WordPressの見出しのカスタマイズ

見出しを変えたくなった理由

このブログは超弱小ブログです。PVがほとんど発生していません。記事数が少ないですし、更新頻度も少ないので、当り前といえば当たり前です。

良質の記事を書けばPVが増えることは、頭では分かります。

でも、その前に見出しを変えたくなりました。

自分好みの見出しになれば、サイトに対する愛着が更に湧いて、記事を書くためのモチベーションが高まるに違いありません。

でも、どこから手を付ければ良いのだろう。

統一感のある見出しのセットをどのように決めれば良いのだろう。

デザインの3要素

見出しのh2、h3、h4をデザインすることにしました。h2は中見出し、h3は小見出し、h4は小々見出しです。

h1は特に変更する必要性を感じませんでした。また、h5以下の見出しは、おそらく使いません。

なんとなく方針が決まったので、検索してみます。

「見出し css」をキーワードとして検索すると、「こんなデザインの見出しにしたければ、このcssをコピペしてね」といったサイトがいくつか見つかりました。カスタマイズなんてすぐにできそう・・・

でも、僕が最初に知りたかったのは、h2、h3、h4を並べてみた時、統一感が感じられるデザインセットそのものや、セットを作る上での考え方でした。そんなことを解説しているサイトはほとんど見つかりませんでした。

そこで、面白そうなブログをいくつか訪れ、見出しのデザインを調べてみることにしました。

でも、面白いブログは、その内容を読み込んでしまい、あまり真面目に調査をすることができませんでした。ただ、強いて言えば、吹き出しのような形のh2を使っている人が多そうだなと感じました。

Microsoft Wordのスタイルセットも見てみました。

でも、ブログに使うイメージではありません。

結局、自分で考えるしかなさそうです。

じゃぁ、どこから考えるかな。

一応、視野を広く持ちたかったので、デザインには「形状」「色調」「サイズ」の3要素があると仮定してみました。

形状

とにかくシンプル・イズ・ベストを目指します。

凝って表示の時間を要しては元も子もありません。(本当は、複雑なコードを書くことができない)

h2とh3は、行全体にわたるような幅広なデザインにしたいです。そうすることにより、章なり節なりを区切っている感じが生まれることでしょう。

h4は、冒頭にアクセントがあるくらいにします。小々見出しは少し目立てばそれで良しとします。

色調

できればテーマに適した色調にしたいです。

「さしあたって」は雑記ブログです。

雑多に絵具を混ぜ合わせると鼠色になります。実際に色々な鼠色を試してみた結果、深川鼠が最もイメージに合っていました。コードとしては#94A78Eです。

サイズ

このブログのテーマは、わいひらさんがお作りになったSimplicity2です。

PCの画面とスマホの画面で、フォントサイズとしての違和感を感じなかったため、デフォルトサイズを使いました。h2、h3、h4はそれぞれ26pt、23pt、20ptです。

以上を考慮してできたデザインが、本ページでも使っているデザインです。

※ 現在は、Simplicity2からCocoonに変えてしまいましたので、この節のことはあてはまっていません。

カスタマイズ手順

以下、カスタマイズを実施する場合には、自己責任にて実施してください。

ローカル環境と子テーマについて

カスタマイズは、ローカル開発環境で実施し、その後、本番サーバに適用することをおススメします。

さもないと、エラーが発生した場合に、再起不能になったり、閲覧中の読者に迷惑をかける可能性があります。

ローカル環境の作り方は、文献(※)に詳しく述べられています。

また、子テーマを使い、そちらをカスタマイズすべきです。

Simplicity2の子テーマについては、以下を参照してください。

Simplicity2の子テーマ
テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

セレクタの確認

先ず、親テーマのStyle.cssを調べます。

この節は確認だけなので、Style.cssが分からない方は、コードを書き込むシートに進んでいただいて差し支えありません。

「見出し」の周辺で、h2が書かれているところを抜き出すと以下のようになります。(実際にはコメント行のところにもコードが書かれている)

h1, h2, h3, h4, h5, h6{
/* 全てのh1~h6に共通の設定 */
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
/* 見出しのh1~h6に共通の設定 */
}

.article h2 {
/* 見出しのh2に適用する設定 */
}

見出しのh2を変更したければ、”.article h2″をセレクタとすればよさそうです。

念のため、自分で書いた記事のh2に関するソースコードを見てみます。

IEだったら、記事を開いた状態で、「表示」→「ソース」 を選択することで、ソースを見ることができます。

<article class="article">
<header>
<h1 class="entry-title">
WordPressを使う初心者がcssを変更して見出しをカスタマイズしてみた          </h1>
<!-- 中略 -->
<div id="the-content" class="entry-content">
<h2>見出しを変えたくなった2つの理由</h2>
<!-- 後略 -->

記事は”article”というクラスの中に書かれています。クラスは、クラス名の前にドット”.”を付けて示すことになっていて、半角スペースはANDを示すので、結局、”.article h2″をセレクタとすれば、所望するh2に対するカスタマイズができます。

コードを書き込むシート

シングルサイトとマルチサイトでは、書き込むシートが異なります。

どちらかわからない場合は、先ず、シングルサイトの場合を試してみて、無ければマルチサイトの場合を試してください。

シングルサイトの場合

「ダッシュボード」→「外観」→「テーマの編集」

右側の「テーマファイル」欄において、「スタイルシート(style.css)」を選択

マルチサイトの場合

「ダッシュボード」→「外観」→「カスタマイズ」→「追加 CSS」

コードの書き込み方

“.article h2″、”.article h3″、”.article h4″のセレクタを準備し、それらの後に中かっこを付け、その中にCSSのコードを貼り付けます。

次に、色のコードを、予定した色に変更します。

なお、コードを張り付けたとき、エラーが生じる場合があります。
大抵は、行の最後にスペースのような余計なコードが付いていることが原因なので、Deleteキーで余計なコードを削除してください。

投稿日現在、使用しているコードは次のとおりです。なお、h5、h6は、h4と同じ設定にしました。

.article h2{
border-bottom:5px solid #94A78E;
border-left: hidden;
padding:10px 30px;
}
.article h3{
border-bottom: 5px double #94A78E;
border-top: 5px double #94A78E;
padding: 10px 25px;
}
.article h4, .article h5, .article h6{
border-bottom: hidden;
border-left: solid 7px #94A78E;
padding: 10px 25px;
}

最後に画面をリフレッシュし、自分の思い通りになったら出来上がりです。そうでなければ、適宜修正してください。

今回のコードでは、h2の左側にボーダが残っていたので、hiddenで消しました。

参考文献

※安藤、岡本、古賀、深沢:WordPress導入とサイト制作の教科書、技術評論社、pp.113-126、2017

タイトルとURLをコピーしました