かわんです。
今回は、はてなブログにおける箇条書きの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の知識がある方はお試しあれ！
今日はこの辺で終わりたいと思います。最後までお付き合い頂きありがとうございました。