見出しをつけるのは大事！
見出しをつけることに最近慣れてきた@akrwnetです（＾ｖ＾）
ブログ記事を見やすくするためには、見出しって非常に重要です。
この見出しがあるのと無いのでは、見やすさがずいぶん違うような気がします。
見出しだけみても記事の内容がわかるぐらいなのが理想なのかもしれませんね。
見出しだけで判断して、重要そうなところを読み直すというような事もできます。
そういう記事を作成出来れば、ブログを読みに来てくれている人にも親切なのかなって思いますし
なので最近は極力見出しをつけてみようと努力をしているのですが、やはりこのiTheme2ではデザインがイマイチなんですね。
そこで、CSSを修正してみようかと検索してみたところ、こんなのをみつけました。
このような感じの装飾ができるCSSを輩出してくれます。
iTheme2では、Gray調の色使いなので
グレーのところをクリックして、さらにつくるをクリック
するとこんなのができました。
この中から、お気に入りのをピックアップしますが、今回は、menuTabLightを採用してみたいと思います。
.menuTabLight {
margin:0 0 10px 0;
padding:2px 8px;
border-width:0 0 0 5px;
border-color:#6D6D6D;
border-style:solid;
background:#CCCCCC;
color:#494949;
line-height:140%;
font-weight:bold;
}
このタグを、前回同様に Custom CSS に挿入します。
しかし、テーマにあった編集をしなければいけないので、見出しになる h3 に対応させてみたいと思います。
その場合には、上記のタグを h3 に置き換えて
h3 {
margin:0 0 10px 0;
padding:2px 8px;
border-width:0 0 0 5px;
border-color:#029EBC;
border-style:solid;
background:#80CEDD;
color:#017589;
line-height:140%;
font-weight:bold;
}
とすればOK！
※2ヶ所変更しました。
アンダーバーも入れたいので、0→2px
border-width:0 0 2px 5px;
背景色と同色にしたかったので、#80CEDD;→#EFEFEF;
background:#EFEFEF;
これで、見出し３を利用すると
こんな感じにすることができます。
↑↑↑
このようにCSSで見出しが装飾されますね。
Custom CSSに挿入するときも、編集がしやすいようにコメントを挿入しておくと良いかもしれません。
/* ===================== */
/* 見出し設定 */
/* ===================== */
こんな感じにつかしておけば、一目でこの部分は何を示しているのかが分かるようにできます。
このブログも、徐々にやりたいようになってきていますね。
「○○したい」と思ったことは、検索してみると結構見つかるものなので、どんどんカスタマイズしていこうかと思います。
コメント