WordPressを本格的にカスタマイズして遊んでいる今日この頃ですが、前々から現在使用しているテーマのデフォルトのスタイルシートだと記事内の小見出しの表示がつまらないな～と思っていたので、今回はこれをカスタマイズしてみました。今まではWordPressにPluginなどは追加して、テーマファイルをいくつか変更することはしていましたが、style.cssを変更するのは初めての初心者です。といいつつも、カスタマイズとかいうレベルではない、ちょっとした変更です。
現状の小見出しだとこんな感じです。
小見出しです<h2>
これを下のように変更してみました。
小見出しです<h2>
なんかちょっとだけ”小見出し”みたいに見えるようになりました。
style.cssの変更はほんの少しです。以下のようなコードを追加しました。
h2.post {font-size:18px; padding-left: 5px; border-left: 5px solid #ff6600; border-bottom: 1px solid #ff6600; width:300px;}h3.post {font-size:16px; padding-left: 5px; border-left: 5px solid #ff6600; border-bottom: 1px solid #ff6600; width:300px;}
h4.post {font-size:14px; padding-left: 5px; border-left: 5px solid #ff6600; border-bottom: 1px solid #ff6600; width:300px;}
きっともっとうまい方法があるのでしょうが、とりあえずはこんなもんです。
これからちょこちょこいじっていきたいと思います。
Atahualpaで小見出しを装飾
いろんな人のブログをでエントリの途中に小見出しを入れて話題の切替えをわかりやすくしているのをよく見かける。長いエントリを流し読みするときなんかは本当に読みやすくなるの…