記事の見出しについてと、カスタマイズ【WordPress】
こんにちは、しろもじです。
前回は「ブログ記事へのメディアの追加」をやりました。
https://textfield.net/blog/add-media今回は、同じく記事に関しての内容ですが「見出しについて」です。
WordPressの記事を書く際に「見出し」は重要です。見出しとは
こんな感じで表示されるものですね。
見出しは、読んで下さる方と検索エンジンに「ここからはこの内容について書いてるで〜」と伝えるものです。
今日は、記事の見出しについて、見ていきましょう。
見出しの重要性
冒頭でも書きましたが、記事中の見出しは検索エンジン（Google）や読んで下さっている方に「ここからはこういう内容の記事です」ということを伝えるものです。
これがなくても1,000字程度の記事なら、さほど問題はないかもしれません。
でも、5,000字、8,000字などの中・長文になってくると「一体、どんな構成なのか」というのが分からないと、読むのも大変になってきますよね。
またテーマ「Luxeritas」の標準機能、もしくはプラグインで、記事の冒頭に「目次」を付けることもできます。
この目次に使われるのが「見出し」になります。
見出しの種類
少し前の記事でWordPressの投稿の仕方を解説した際に、少しだけ見出しについても触れました。
見出しを設定する方法は、その記事内に書いていますが「見出しにしたい文字列にカーソル（マウスカーソルじゃなくて、点滅している方）を置いた状態で選ぶ」と見出しが設定できます。
見出しの種類は<h1> <h2> <h3> <h4> <h5> <h6>の６種類あります。番号が小さい方が大きな見出しになります。
通常、WordPressのテーマでは<h1>は記事のタイトルに使われることが多いので、本文中の見出しは<h2>〜<h6>を使用します。
ただ、見出しは入れ子構造で使うのが普通なので、使う際には気をつけなければなりません（無視してもエラーにはなりませんけど）。
＜良い例＞
<h2>見出し
<h3>子見出し
<h4>孫見出し
＜悪い例＞
<h4>見出し
<h2>子見出し
<h3>孫見出し
小説家さんに分かりやすく言うと「h1は小説タイトル、h2は章、h3は節」という感じになります。
通常、記事中ではh2とh3を使うことになると思います。一応h6までありますが、あまりにたくさん増やすと、構造がややこしくなるので、2つの構造にしておくくらいがベストですね。
見出しのカスタマイズ
見出しの見た目は、テーマにより異なります。
WordPressテーマについては、以下のページを参考にしてみて下さいね。
通常どのテーマでも、見出しの見た目はシンプルなものが多いようです。見出しの見た目って、人によって好みが違いますので「自分でカスタマイズしてね」ってことだと思います（笑）。
もちろん、シンプルなものも悪くはありません。サイトのイメージによっては、変にカスタマイズしない方が良いこともありますね。
でも、もう少し目立つようにしたいなぁ、と思ったら意外と簡単に変えることができます。その方法を見ていきましょう。
まず、管理画面の左のサイドバーから「外観」 → 「テーマの編集」を選びます。
すると、テーマのCSSの編集画面になります。
写真の中で「ご存知ですか？」と書かれていますが、確かに直接スタイルシートを編集しなくても、別の場所で行うことができます。
ただしテーマ「Luxeritas」では、その方法は推奨されていません。だから、ここに記述していく必要があります。
見た目を変えるのは「小テーマのスタイルシート」になります。Luxeritasの場合は「Luxeritas Child Thema」の「style.css」というファイルになります。
他のテーマでも、大抵は子テーマには「Child」の表記が書かれているので、間違えないようにしましょう。
「style.css」というのは、スタイルシートと言って「ウェブページの見た目」を記述したものになります。文章などのコンテンツが記載されたものは「HTMLシート」と呼ばれます。この辺は、その内突っ込んだ話もしたいところですが、今は「そうなんだ」程度で大丈夫です。
「style.css」を編集する際は、基本的に「今書いてあるものは、消さない」というようにしましょう。あくまでも「見出しに対する見た目を変更する記述を足す」ということだけやりましょう。
注意書きや、既にコードが書かれている場合は、一番下に付け足していくようにします。
※スタイルシートなどccsファイルは、誤って記述したりするとキチンと表示されないばかりか、ウェブページ自体が表示できなくなるものもあります。
FTPソフトなど（MixHostならウェブサイト上から）で編集するファイルをダウンロードしておいて、バックアップを取った状態で行うことをおすすめします。
さて、見た目を変えるccsの記述ですが、例えばGoogleなどで「WordPress 見出し デザイン」などで検索すると、色々なものが出てきますので、その中から気に入ったものを選んで、コードをスタイルシートにコピペすると終わりです。
私はここを参考にさせて頂いています。
https://saruwakakun.com/html-css/reference/h-design
このサイトで、気に入ったデザインを見つけたら「コードを表示」ボタンでコードが表示されるので、それをコピーして、自分の「style.css」にペーストします。
二つ注意点があります。
h1の記述を変えておく
サンプルコードでは、h1という表記になっているかと思います。先程言ったように、これは記事タイトルのことですから、記事中の見出しに使う際はh2かh3になります。
h2とh3で、違うスタイルにしたい場合は、別々に書きますが、同じにしたい場合は
h2,h3 {
というふうに半角ピリオドを挟むと、同時に記述することができます。
コメントの記入
上記サイトのサンプルコードにも、一部記述されていますが、cssの中にコメントを書くことができます。コメントは/*と*/で囲んで書きます。
/*コメント。ここに書いた文字はcssに適応されません*/
こんな感じですね。
コメントはその記述が何を指しているのかの注釈に使うと便利です。後々見直した時に「これ、なんだっけ？」ってなりますよね（笑）。それを防ぐためにも、コードを貼り付けたら、コードの上に
/*見出し用*/
みたいに書いておきましょう。
テーマ「Luxeritas（ルクセリタス）」での見出しカスタマイズ時の注意点
このように、スタイルシートに付け加えるだけで、見た目をカスタマイズできるので、とても簡単なのですが、一部のテーマでは素直に変わらないこともあります。
Luxeritasでもそのままだと、うまくいきませんでした。
まず、h2のスタイルを追加すると、なぜか記事一覧のタイトルまで同じように装飾されてしまいました。
色々調べてみたのですが、ちょっと分からないので、とりあえずこの方法で解決しています。
h2の記述の前に「.post」という記述を挟んでいます（h2との間は半角スペース）。
これは「記事画面のh2にのみ適応する」という記述になります。h3でもh4でも、同じように書けばOKです。
この「.post」の部分は、どのテーマでも共通、というわけではなく、テーマごとに異なります。あくまでもLuxeritasではということになります。
また、h3のcssでは下線のみの記述のものを使ったので、元々あった左の線が残ってしまっていました。
見出しの左に灰色の線が見えますよね。これが「元々の見出しのスタイル」だったのですが、新しいcssには左の枠に関する記述がなかったので、そのまま適応されているようです。
これが元々のcssなんですが、ここに「左枠はいらんぜよ」と記述します。
「border-left: 0 none;」が「左枠はいらんぜよ」になります。
こう書くと
こんな感じで、左の枠がキャンセルされて、見えなくなりました。
他のテーマでも、この手の問題は「書き足したcssに記述がなかったので、前の記述が生きている」ことが原因になることが多いようです。
ここを掘り下げていくと、とても大変で、私の指が持ちそうにありません（笑）。
ですので、そこら辺に関してはまた今度ということにしておきます。
まとめ
今回の話は少し難しい話だったかもしれません。見出しに関することは全て書ききると、書く方も大変ですが、読む方も大変なことになっちゃいます（笑）。
今回は
- ある程度の文章量には見出しはあった方が良い
- 見出しの見た目はstyle.cssファイルに書き込むことで変えられる
- style.cssに既に記載されている部分は消しちゃダメ！
- テーマによっては、多少弄らないといけないかもよ
という部分だけ押さえておきましょう。
さて、次回は記事カテゴリについてお話しましょう。
それでは、またあした〜。