見出しのデザインを変更する

2019年8月18日

いいなと思ったブログの多くは本文を表題のようなもので区切って読みやすい工夫しています。よく見るこの表題のようなものを「見出し」と言います。

見出しはHTMLエディタで「<h2></h2>」のように記述して設定します。WordPressではGutenbergエディタになって、見出しを付けやすくなりました。いちいちHTMLで設定したり、プラグインを導入することなく見出しが簡単に付けられるようになったのです。

この見出しはSEOにも影響を及ぼすようなので、意識して見出しをつけることは重要です。

初期設定の見出しはかなりシンプルなもので、H2、H3、H4の区別がつきにくいものです。自分が好きな形に変えられたら楽しいと思いますので、変更の仕方を紹介します。

見出しデザインの変更はCSSでやる!

どの文字を見出しにするかを設定するのはHTMLですが、その見出しのデザインを設定するのはCSSです。WordPressの編集画面にあるCSSをいじると、自分のブログの中の見出しは一律で変更されます。

このCSSは素人ではなかなか編集が難しいのですが、見出しのデザインを変更するためにはここを編集するしかありません。恐る恐るやってみることにします。

編集画面を探す

まず、どこを編集するかということですが、「外観→テーマの編集」を選択し、「スタイルシート(style.css)」という箇所に行きます。

私が利用している『Luxeritas』では、子テーマのスタイルシートを選びます。「/* 以下、好みに応じて子テーマ用のスタイルをお書きください。」と書いてあるので、その下に書いていきます。

書き込んだら「ファイルを更新」という青いボタンをクリックして更新していきます。

基本的な見出しの変更方法

『Luxeritas』での初期設定はこのようになっています。これを変えていきます。

CSSはいきなり自分で書くのは難しいので、基本的にはコピペしていくことになります。私はこちらのサイトを参考にしました。「CSS 見出し」などで検索すると上位にヒットするページです。
サルワカ:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

こちらのページでは「h1{」のように書かれていますが、WordPressで主に使用する見出しは「h2」からですので、これを「h2」に書き換えます。また、私のブログでは「h4」は使用していないので、「h2」と「h3」でやっていきます。

そのままコピペしただけです。「ファイルを更新」を押下すると、「ファイルの編集に成功しました」と表示されます。

プレビューページを更新するとCSSの変更が反映されてこのようになります。たしかに変わっていますね。ところが、H3の左によくわからない線が残ってしまっています。また、右側の「最近の投稿」などのところも「H3」の情報が反映されてしまっていて、ちょっと見栄えが悪い気がします。

『Luxeritas』で左の線が残ってしまうことの対処方法

「H3」の左の線については「Luxeritas 見出し 左の線」などと適当に検索したら、すぐに解決法が見つかりました。みんな困っているようです。

様々なブログで紹介されていますが、「左側の線をなくしてください」という意味を表す「border-left:0 none;」というのを挿入すればいいそうです。「h3{」の中ならどこでもよさそうですが、わかりやすく一番上に挿入します。

また、『Luxeritas』でのCSS編集を解説しているブログはほとんどの人が「h2」「h3」の前に「.post」を追加していたので、とりあえずこれを入れてみます。

左の線が消えましたね。しかも右側の「最近の投稿」のところの見出しも元に戻っています。

どうやら、『Luxeritas』の親テーマのCSSが「.post h2」のように指定しているため、それを上書きするかたちで書くようです。

見出しのフォントサイズを調整する

だいぶ思いどおりの見出しに近づいてきましたが、まだひとつ気になることが。親テーマでは「H2」が「H3」より大きくなるように調整されていましたが、それが消えてしまっています。見出しの階層がわかるように、親テーマのような大きさ調整をしたいですよね。

ここからは勘で操作してみました。

右上のプルダウンから親テーマを選択し、「スタイルシート(style.css)」を表示します。「h2」の箇所を調べます。思ったとおり、「.post h2{」という箇所が見つかります。この中の「font-size」をコピペします。メモ帳などを利用して、忘れずに二つともコピーします。

コピーした「font-size」を子テーマのCSSに貼り付け、ファイルを更新します。

ついでに、「h2」と「h3」の色を合わせます。記事内に統一感を出したいので。

わずかですが大きさが変わりましたね。また、色も調整できました。フォントの大きさについてはもう少し差をつけたいとも思いましたが、CSSのフォントサイズ指定のことをよく知らないので、少し勉強してから「font-size」をいじってみたいと思います。

まとめ

CSSは初心者には編集はかなり難しいです。下手に編集するとレイアウト全体が崩れてしまい大変なことになります。なので、できればこの編集もまだ訪問者が少ない時にやるのが望ましいでしょう。また、やるときはバックアップを取ることをおすすめします。なかにはこういった編集をテストするために別のブログを用意している人もいるようですね。

あと、よくよく見ると上の方に「 ここで CSS を変更する必要はありません — 付随の CSS エディター で、編集とライブプレビューを行うことができます。 」などと書かれていますね。

様々なブログを見ましたが、ほとんどの人がこの「外観」のページで編集していたので疑いもなくここで編集してしまいました。このCSSエディターがどのような感じなのかはまた調べてみたいと思います。