ブログデザインの設定。 - kirintropのブログ

ブログデザインのカスタマイズをしたい

本記事を書くに至る経緯

ブログ運営を始めましたが、まだまだデザインが改善できていません。
デザインの編集方法について、
基本は何事も大事なのでひとつづつ抑えていきます。

気になるポイント

見出し部分に目立つように背景を入れたい
記事のレベルによってスタイルを統一したい

私もやり方もよくわからないところからのスタートですが、
一度設定すれば記事を書くたびに書き換えなくても良く、
ずっと使えるのでとりあえずチャレンジです。

ミニマムでシンプルなのを作りたいけど、
うまいこといけるかどうか・・・

調べたところ、書式設定については以下のページが参考になりました。

[ライブドアブログ]記事タイトル・記事本文のデザインをカスタマイズしよう | No.2宣言
http://hataraku-ikiru.com/archives/lddesign-article.html

記事タイトルや本文の書式を設定するには、CSS編集画面で行う。
書式設定はカーソルを合わせた時と合わせてないときで変更できる。
余白等の設定は文字サイズに対してemで指定又はpx単位での指定ができる。

そして、実際に記事を書く際の見出しの使い方は、こちらのページがわかりやすいとの情報。
ありがたやありがたや。

見出しタグの使い方と絶対に知っておくべき注意点
https://bazubu.com/how-to-use-h-tags-26344.html

見出しタグはh1からあり、h1は1ページに1個。
そこからh2,h3と下の階層をつけていく。
自分で試したところlivedoorブログでは、記事の下層の見出しはh2となる。（タイトルがh1)
階層を飛ばしてh3に飛ぶのはNG。

設定してみたポイント

まずは、タイトル部分の下線追加

※元々のテンプレート色で下線を追加して目立つようにしました。

.article-body h2{
margin: 10px 0;
border-bottom:1.5px solid #878787;
font-size: 150%;
}

地味なところですが、フォントのアンダーラインで追加ではないので、
太さも色も自由自在でした。

そして見出し箇所への背景追加。

背景を黄色で面取りした感じにしてみました。
コードはこちら。

.article-body h3 {
margin: 10px 0;
padding:0.5em;
font-size: 130%;
background:#fff190;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

}

追加した背景の面取りはborder-radiusの箇所。
面取りに合わせてpaddingで文字の位置を変更しています。

まとめ

今回、ブログデザインのCSSでのカスタムに挑戦してみました。

タイトル部への下線の追加
特定レベルの見出しへの背景色の追加

コンテンツの充実も課題ですが、
デザインも日々進化させていきたいところです。