WordPressの記事の見出しを綺麗に表示させるhosiiのメモ帳

記事の見出しを見やすくしてみた

上記のように、ブログの見出しに修飾を加えて見やすくしてみた。
Wordpressでは、テーマごとにデフォルトのCSSファイルが用意されている。しかし、モノによっては見出しのデザインが見づらいので、直接CSSファイルを編集してやる。

編集方法

WordPressのダッシュボードを開き、「外観」→「テーマ編集」。
style.cssを選択し、一番最後に以下のコードを追加する。

/* Custom CSS*/
#entry-content h3{ /* entry-contentクラスにあるh3のみを指定 */
margin: 10px 0 5px; /* 見出しの上を10px、下を5px空ける */
padding: 0 0 5px 10px; /* 見出し全体の枠に対して、下から5px、左から10px文字を詰める */
height: 20px; /* 見出しの高さは20px */
border-left: 6px solid #6495ed; /* ６pxの幅で、見出し枠の左部に青い線を描画 */
border-bottom: 2px solid #6495ed; /* 2pxの幅で、見出し枠の下部に青い線を描画 */
}

あとは、h3タグで見出しを囲むと、この記事のようなデザインで表示される。
ブログのタイトルがh1、キャッチフレーズがh2だったので記事内の見出しをh3にしたけど、SEO的にはどんな影響があるのかは不明。時間があるとき調べてみよう。