画面をキャプチャしてCSSのカスタマイズを図解で説明してみた

先回、CSSでのカスタマイズでデザイン変更したのだが、すこし分かりにくいところがある。

なので今回は画面キャプチャして図解で説明してみる。

どの部分をカスタマイズするのか

重要な要素であるエントリータイトル(h3)とエントリー内の小見出し(h4)。

変更箇所は、赤い線で囲った部分の2点。

変更後

少し、見やすくなった。

CSSの変更手順

ブログが表示されているのであれば、「Navbar」にある「Design」をクリック。

ダッシュボード画面であるなら「テンプレート」をクリックして、そこに表示された「Customise」をクリック。

「アドバンス」をクリックする。

スクロールバーを一番下まで下ろすと見えてくる「CSSを追加」をクリックして、となりのテキストボックスにあらたなCSSを書き込む。

CSSの追加が終わったら、「ブログに適用」をクリックして、「Bloggerに戻る」で投稿を続けるか、「ブログを表示」でこのエントリーを見てみる。

結論

やはり、図解はわかりやすい。
しかし、説明文の入れ方次第では、誤解を招く事もあると感じた。