do-log

子どもがいるから、自由に生きる。

WordPressでスマートな小見出しをつける方法

このブログ(do-log(どぅろぐ))のように、なるべくテキストだけで勝負していく場合、少しでも文章を読みやすくするということが、重要なテーマになってきます。今使ったように、重要な箇所は文字を太くするというのも、見やすくする方法の一つ。また、文章の場面が変わった時には段落分けをしますが、もっと視覚的に変化をつけたい時に使うのが小見出しです。そもそも小見出しとは何か?といいますと、

こちらです。

↓↓↓

ここからが詳細です

 いわゆるhtmlタグを使うのですが、記載している内容はというと、

<h3 class="selector01">ここからが詳細です</h3>

 これだけです。ただ、いきなりこれだけ文章に記載しても、小見出しが表示されるわけではありません。ポイントは、事前にCSS小見出しのデザインについて記載をしておくこと。ここで小見出しの内容を決めてしまえば、あとからブログのテーマを変えて、色をガラッと変更したときも、先ほどのCSSだけを変更すればすべての小見出しに変更が反映されます。

 CSSをどのように変更していくかというと、WordPressのstyle.cssの末尾に以下のコードを追加します。

h3.selector01 {

color: #141414;

font-size: medium;

font-weight: bold;

border-left: 7px solid #e0e0e0;

border-bottom: 1px solid #e0e0e0;

padding: 0.3em 0.8em;

margin: 2em 0em 1em 0em;

}

 小見出しを使うことでブログの視認性は格段に上がりますから、積極的に使ってみてください。

 なお、参考にさせていただいたのはこちらのブログです!

[CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方

永無流、WordPressにおける、小見出しの作り方