WordPressを使う初心者がcssを変更して見出しをカスタマイズしてみた

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

このブログは超弱小ブログである。PVがほとんど発生しない。記事数が少ないし、更新頻度も少ないので、当り前である。

良質の記事を書けばPVが増えることは、頭では分かっている。

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

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

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

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

デザインの3要素

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

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

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

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

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

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

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

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

でも、ブログに使うイメージではない。

結局、自分で考えるしかないらしい。

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

一応、視野を広く持ちたかったので、デザインには「形状」「色調」「サイズ」の3要素があると仮定してみた。一応、MECE(ミーシー:重複なく、漏れなく)っぽく分けられたのではないだろうか。

形状

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

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

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

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

色調

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

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

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

サイズ

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

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

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

カスタマイズ手順

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

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

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

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

ローカル環境の作り方は、文献(※)を参照していただきたい。

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

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする