【はてなブログ】箇条書きをCSSでカスタマイズしてみる

f:id:Kawan0116:20201123205843j:plain

かわんです。

今回は、はてなブログにおける箇条書きのCSSについて書きます。

なお、これはマークダウンモードで行なった方法で、「マークダウン、使ったことないよ」という方には参考になりません(笑)。

それでは解説していきます。

お話の前に

今回は、僕の環境で実現したものであって、あなたの場合は上手く行かない可能性があります。

また、今回はCSSとHTMLを使います。

あらぬトラブルが発生しても、僕ではサポート出来ませんので自己責任の上お試しください。

なお、予めバックアップを取っておくことをオススメします。

箇条書きをCSSでカスタマイズ

ズバリ、CSSは以下になります。

.box {
border:1px solid #ccc;
margin-bottom:10px;
border-radius:2px;
padding:20px;
margin-top:20px;
background:#f7f7f7;
}

「.box」は任意の名前でOK

もう一度CSSを紹介します。

.box {
border:1px solid #ccc;
margin-bottom:10px;
border-radius:2px;
padding:20px;
margin-top:20px;
background:#f7f7f7;
}

「.box」は任意の名前でOKです。覚えやすいモノを使えばOKです。

また、はてなブログのデザインCSSに書きます。

マークダウンモードでHTMLを書く

CSSに関してはこれくらいにして、実はHTMLも書く必要があります。

どうするのかと言うと、マークダウンモードで以下のように書きます。

<div class="box">
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>
</div> 

HTMLの先頭の「box」とCSSの「.box」は同じにしないとダメです。

仮に、HTMLの先頭を「write」にしたら、CSSも「.write」にしないとダメです。

ここで、writeにした場合はこうなります。

まずはCSSから。

.write {
border:1px solid #ccc;
margin-bottom:10px;
border-radius:2px;
padding:20px;
margin-top:20px;
background:#f7f7f7;
}

先頭が「.write 」になっていますよね。HTMLはこうなります。

<div class="write">
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>
</div> 

先頭が「write」になっていますよね。

マークダウンモードであれば可能です。

デザインのカスタマイズは自由

くどいようですが、もう一度CSSを・・・。

.box {
border:1px solid #ccc;
margin-bottom:10px;
border-radius:2px;
padding:20px;
margin-top:20px;
background:#f7f7f7;
}

CSSを知っている方であれば、"{}"の中身は自由に変えることが出来ます。

これは、僕が気に入っているものでありますので、人によって好みが変わるので、ご自由にすれば良いです。

もう1度言わせて下さい

冒頭でも書きましたが、今回は、

  • 僕の環境で実現したもの
  • マークダウンモードを使う
  • CSSを使う
  • HTMLを使う
  • デザインCSSを使う

という感じです。作業はCSSとHTMLを知っている方に適した方法です。

2つとも知らないのであれば、作業しないほうが良いです。

それでも試したいという方は、自己責任で作業して下さい。

何かトラブルが発生しても僕ではサポート出来ないので、ホント、自己責任でお願いします。

まとめ

出来るだけ分かりやすく説明したつもりでしたが、いかかでしたか?

もしCSSについて興味がある方は勉強を始めても良いかも知れないですね。

今回の方法は、とても初歩的なモノだと思いますので、CSSやHTMLの知識がある方はお試しあれ!

今日はこの辺で終わりたいと思います。最後までお付き合い頂きありがとうございました。