【WordPress / Twenty Fourteen】おすすめ見出し装飾カスタマイズ♬

WordPress 純正のテーマでちょっと、イヤ、かなり寂しいのが見出しです。
どこかで「純正テーマはカスタマイズして貰うこと前提なのでシンプル」というのを見かけましたが、僕みたいなそんなガシガシコード書いてカスタマイズとか出来ない一般ユーザーには少しハードルが高いです。。
でも、これ↓はシンプル過ぎだよな〜

wordpress twenty fourteen カスタマイズ前見出し

ご覧の通りカスタマイズ前の見出しはシンプルさを極めていて、

  1. フォントが大きく・太くなっているだけで、他の装飾は一切なし
  2. そのフォントサイズもちょっと大き過ぎる
  3. **h2 / 見出し2** と **h3 / 見出し 3** の区別が付きづらい

上の絵の例ですと、
h2 / 見出し2:「カテゴリーをメニュー表示するメリット・デメリット」
h3 / 見出し3:メリット デメリット
となっているのですが、フォントサイズにあまり差がないので区別するのが難しいです。
(大前提として、基本的に WordPress の場合はページやブログポストのタイトルh1 / 見出し1 です)

さすがにコレはガンバってカスタマイズしたくなります。
結論、次のようにしました♬

wordpress twenty fourteen カスタマイズ後見出し

おぉぅ! 華やかになった (・∀・)!!

オススメ!見出しカスタマイズ

WordPress の場合には見出しタグが「h1」から「h6」までありますが、僕は文章中では、

  • h2 大見出し
  • h3 中見出し
  • h4 小見出し

の 3つだけ使っています。
それぞれ外観>テーマの編集>style.css を開いて、style.css の文末にコードを足します。

h4 小見出しのカスタマイズ

まず、 h4 ですが、こうなります ↓

h4 小見出し

  1. 上下にサイトのテーマカラーの細い点線
  2. フォントサイズは 16px

としました。
具体的なコードは次の通りです。

/* 見出しh4 */
.entry-content h4 {
border-bottom: 1px dotted #d1b5b9;
border-top: 1px dotted #d1b5b9;
padding: 0 0 0 10px ;
line-height: 2;
font-size: 16px;
font-weight: normal;}

h3 中見出し

続いて中見出しです。
実際、↑が中見出しですが、

h3 中見出し

こうですね。

  1. 左罫線部分に太めのテーマカラーのラインでアクセントを付けました
  2. 他には罫線/ラインは使わず、背景をテーマカラーを薄くした色で塗りつぶして少し目立つように
  3. フォントサイズはこれも本文と同じ 16px

/* 見出しh3 */
.entry-content h3 {
border-left: 5px solid #d0102c;
padding: 0 0 0 10px ;
line-height: 2;
font-size: 16px;
font-weight: normal;
background-color: #d1b5b9;}

コードの 2行目 border-left 部分が左罫線です。
5px と太めのラインにしました。
その下、padding: が見出しスペース内での文字の上下左右の余白です。
左側に 10px の余白を入れました。
コードの最下行の background-color: が塗りつぶしです。

h2 大見出し

最後に大見出しです。
本文の中で一番大きな括りですので目立つようにしました。
ちょっと遊びも取り入れて。

h2 大見出し

  1. 絵を使う
  2. 上下にサイトのテーマカラーの太めのライン
  3. フォントサイズは大き過ぎない 18px

としてみました。

/* 見出しh2 */
.entry-content h2 {
background-image: url(http://画像の URL);
background-repeat: no-repeat;
background-position: left center;
border-top: 1px solid #d0102c;
border-bottom: 1px solid #d0102c;
padding: 0 0 0 90px ;
line-height: 2;
font-size: 18px;
font-weight: normal;
background-color: #fff;}

せっかくなので実際にちょっと見出し入れながら書いてみますw

1. 絵を使う

background-image: url(http://画像の URL);

ここに使いたい絵の URL を記述すれば OK です。
僕の場合は自分のサイトのファビコン(サイトアイコン)の自分の似顔絵を使ってみました♬
最初大きさ変えずにそのまま使ったところ、「でけぇw」となったので調整してラインの間に収まるようにしたのですが、なんか解像度(?)が悪いのか絵が汚くなるんですよね、、、
(´・ω・`)
色々試した結果、インパクトあって良いだろう ということで大きさそのままにしました。

background-repeat: no-repeat;
background-position: left center;

絵なので繰り返しはなし。
ポジションは左側の上下中央としました。

padding: 0 0 0 90px ;

絵が大きいのでテキストのスタート位置、左側の余白は 90px としました。

2. 上下にテーマカラーのやや太めのライン

border-top: 1px solid #d0102c;
border-bottom: 1px solid #d0102c;

太めって言っても h3 中見出しの左側アクセントの 5px ほどではありませんが、1px の実線を上下に引きました。

見た目も分かり易く、内容もロジカルに

以上、デフォルトのままだとちょっと分かりづらく、かつ味気ない見出しをちょっぴり楽しくカスタマイズしました。
大見出し・中見出し・小見出しの区別も付いて、分かり易くなったと思います。

最後にせっかくビジュアルも分かり易くなったところで、内容も分かり易く・ロジカルにしたいですね
ってことで、以前書いたロジカル・ライティングに関するエントリーです。

考える技術・書く技術 by バーバラ・ミント

僕のロジカル・ライティング関連の一押し、バーバラ・ミントさんのピラミッド・プリンシプルについて、まとメモも置いてありますので、よろしければご覧下さい。
ロジカル・ライティングに興味のある方や、ある程度まとまった文章・長い文章を書く機会のある方には是非ご一読をおすすめします。


【バンド:流 / Ryu】NY Song 絶賛発売中♬ 試聴も出来ます。 iTunes: http://bit.ly/1b7OEiD  ブラウザで見る http://goo.gl/NIfXf4 NY Song アルバムジャケット

僕のソロも試聴・ご購入いただけます (・∀・)!! 是非、お聴き下さい! Free Trial Listening of My Tunes 😀

スクリーンショット 2013-06-08 21.54.36 1曲 ¥150 です / $ 1.29 each

各種 SNS アカウントでコメントできます