ブログデザインの設定。

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

本記事を書くに至る経緯

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

気になるポイント

  • 見出し部分に目立つように背景を入れたい
  • 記事のレベルによってスタイルを統一したい
私もやり方もよくわからないところからのスタートですが、
一度設定すれば記事を書くたびに書き換えなくても良く、
ずっと使えるのでとりあえずチャレンジです。



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



調べたところ、書式設定については以下のページが参考になりました。
[ライブドアブログ]記事タイトル・記事本文のデザインをカスタマイズしよう | 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。

設定してみたポイント

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

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

.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でのカスタムに挑戦してみました。
  • タイトル部への下線の追加
  • 特定レベルの見出しへの背景色の追加
コンテンツの充実も課題ですが、
デザインも日々進化させていきたいところです。
kirintropは、Amazon.co.jpを宣伝しリンクすることによって
サイトが紹介料を獲得できる手段を提供することを目的に設定された
アフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。