【THE THOR ザ・トール】見出しの設定方法。デフォルトデザインを厳選してみた。
katsuです。
最近ブログを書いていて思うことがあります。基本的にブログとは文章や絵・写真を織り交ぜて書くもの。そんな中に「見出し」という概念があります。「見出し」とは、ひとことで言うと「文章の各項目の頭に付けるタイトル」のことです。まずはこちらの画像をご覧ください。
この画像は僕のブログの「見出し」です。H2からH5までランクが分かれていて、H2がそのページのタイトルとなり、記事内に1回だけしか使うことを許されていません。
そしてH3からH5までは大見出し、中見出し、小見出しというイメージと捉えてください。つまりこんな感じでブログは構成されます。
H2 記事のタイトル
H3 記事の大見出し その１
H4 記事の内容 その１
H4 記事の内容 その２
H3 記事の大見出し その２
H3 記事の大見出し その３
H4 記事の内容 その１
H5 細かい分類 その１
H5 細かい分類 その２
それぞれの見出しの間に記事が書かれるわけですね。このように必ず階段状に構成する必要があります。例えば、H2の下にいきなりH4見出しを持ってくることは許されていません。ちょっと難しいように思えるかもしれませんが、慣れると簡単。
そしてこの見出しは、記事の読みやすさに大きく影響します。見出しデザインに変なものを選んでしまうと記事が非常に読みづらくなってしまいます。上の画像の僕のブログ見出しはどうでしょうか・・・
これ、何だか見づらくないですか？
記事のタイトルとも言うべきH2見出しはなんだか薄緑で質素ですし、H3からH5も横棒や縦棒しかありません。本文中の文字を大きくしたり太くしたりすると、どれが見出しだか本文だかわかりづらくなってしまいます。
僕は有料テーマのTHE THOR（ザ・トール）を使っていますので、見出しデザインはかなり融通がきくはずです。デフォルトで用意されているデザインをどう選ぶべきか。チャレンジしてみることにしました。THE THORを使っている初心者の方、見出し背景色のデザインなどの設定に悩んでいる方、ぜひご覧ください！
【広告】
ブログを始めるならサーバー選びからです。
公式サイト＞＞ロリポップ！
THE THORで見出しデザインを変更する方法
まずは見出しのデザインを変更する方法をご説明しておきます。Wordpressメニューの「外観」から「カスタマイズ」を選択。
「パーツスタイル設定［THE］」を選びます。[THE]と書いてある項目の一番下です。
「見出し設定（個別ページ用）」を選びます。
見出しデザイン設定の画面が表示されます。H2からH5まで、タブボックスでデザインを選ぶことができます。
例えばこの画像のH2の場合『背景-リボン［カラーA：文字 B:背景 C：影］』というデザインを選んでいます。そしてA、B、Cの色をそれぞれ選ぶことで、文字と背景のリボン、リボンの影の色を設定しています。設定方法はH2からH5まで共通です。
タブボックスを押すとわかるのですが、あまりに膨大な種類が用意されています。それではわかりやすくまとめてみましょう。
THE THORの見出しデザイン一覧
見出しのデザインは膨大な数がありますが、グループで区切ると大きく9種類に分けられます。それぞれご紹介しましょう。
１．「基本」タイプ
1種類のタイプが用意されています。
見出し見本
ただのちょっと大きめ、太めの文字です。使用することはまぁ無いでしょう。
２．「下線」タイプ
10種類のタイプが用意されています。
見出し見本
比較的よく見かけるタイプの見出しです。見やすくて使いやすいでしょう。
３．「左線」タイプ
1種類のタイプが用意されています。
見出し見本
タイトルの左側に線が入るだけ。これも比較的よく見かけますし僕も使っていましたが、文章の区切りとしては認識しづらくイマイチだと思います。（だからこそ僕も変えたいと感じました）
４．「左下線」タイプ
3種類のタイプが用意されています。
見出し見本
左線タイプと下線タイプの合体版です。比較的認識しやすく、左線タイプの認識しづらさが改善されています。利用価値あり。
５．「背景」タイプ
14種類のタイプが用意されています。
見出し見本
見本は少し色が濃くなってしまいました。見出し部分がしっかり絵柄で表示されますので、文章の区切り能力としては一番優れているでしょう。その代わり色の選び方センスが問われます。変な色を選ぶと文字すら読めなくなります。
６．「グラデ」タイプ
10種類のタイプが用意されています。
見出し見本
背景タイプのグラデーションタイプです。見やすいタイトルを作ることができますが、背景タイプよりさらに色の選択がシビアになります。設定が難しい分、オリジナリティ溢れた見出しが作りやすいというメリットもあります。
７．「ラインマーク」タイプ
5種類のタイプが用意されています。
見出し見本
目立たないタイプのため、H5あたりの小さな見出しに使うことになるはず。しかし、ラインは漢字の「一」にも見えるため紛らわしくなる可能性があります。あまりオススメできません。
８．「丸マーク」タイプ
5種類のタイプが用意されています。
見出し見本
ラインマークの丸形バージョンです。こちらもH5専用と考えて良いかもしれません。目立ちにくいですが、色の設定次第でかなり使いやすくなるかもしれません。いずれにしてもH5用かな。
９．「先頭大」タイプ
4種類のタイプが用意されています。
見出し見本
見出し文字列の頭の文字を大きくし、色を変えることができます。僕は物珍しさで使っていました。しかし、文章間の区切り能力としてはイマイチだと感じます。もっと小さな見出しか、思い切ってH2で1回だけ使うためのものかもしれません。
活ノートの見出しデザイン設定はこれです
さて、いろいろと悩んだ結果「活ノート」の見出し設定を変更しました。結果がこれです。
![<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-2280410803630625" data-ad-slot="6125904351" data-full-width-responsive="false"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>](https://katsu-note.com/wp-content/uploads/2019/11/コメント-2019-11-09-200754-1.jpg)
配色のセンスとかはともかく・・・これまで見づらかったH3見出しの区切り機能が強化できたと思います。ちょっと派手ですが、見出しだとそれでも良いのかなという判断です。今後もいろいろと変更するかもしれませんが、今回の設定内容を書いておきましょう。
カラーA：#f4f4f4
カラーB：#7c0a02
カラーC：#f1bc31
カラーA：#4d4d4d
カラーB：#f1bc31
カラーC：#7c0a02
カラーA：#b22222
カラーB：#7c0a02
カラーC：#f1bc31
カラーA：#b22222
カラーB：#7c0a02
ご覧の通り、それぞれの見出しで使っているカラーは同じ色が多いです。あまりに配色を変えすぎると見づらくなります。そして、今回の配色にはこちらのサイトを利用させて頂きました。おしゃれな配色パレットがたくさんあります。
Discover the newest hand-picked color palettes of Color Hunt…
さいごに
今回はWordpressのテーマ「THE THOR」の見出しデザインのお話をお届けしました。THE THORは設定項目が多く、良く言えば自由度が高い。悪く言えば設定の煩わしさがあります。まぁ・・・これも楽しみですか。
CSS(スタイルシート）をいろいろ追加すると更に自由なデザインを行うことができますが、僕にはそんな技術はありませんし、誰かのマネをするしかありません。そして折角ですから、有料テーマTHE THORのデフォルト見出しを活用してみませんか？
THE THOR使用中のブロガーさん、ぜひ参考にしてくださいね！
活ノートでは最新記事の投稿情報をメールでお伝えしています。お気軽にご登録ください！
配信例はこちらにあります。
↑1いいやん！されています。良い記事でしたら「いいやん！」クリックお願いします。
下のSNSボタンから記事拡散にもご協力お願い致します。
読み込み中...
