★おかげさまで月間15,000PV達成! 今後も楽しい記事をお届けします。ぜひブックマークを★
コメント 2019-11-09 200754

【THE THOR ザ・トール】見出しの設定方法。デフォルトデザインを厳選してみた。

【THE THOR ザ・トール】見出しの設定方法。デフォルトデザインを厳選してみた。

 

katsuです。

 

最近ブログを書いていて思うことがあります。基本的にブログとは文章や絵・写真を織り交ぜて書くもの。そんな中に「見出し」という概念があります。「見出し」とは、ひとことで言うと「文章の各項目の頭に付けるタイトル」のことです。まずはこちらの画像をご覧ください。

 

コメント 2019-11-05 210651

 

この画像は僕のブログの「見出し」です。H2からH5までランクが分かれていて、H2がそのページのタイトルとなり、記事内に1回だけしか使うことを許されていません。

 

そしてH3からH5までは大見出し、中見出し、小見出しというイメージと捉えてください。つまりこんな感じでブログは構成されます。

 

見出しの構成例
H2 記事のタイトル
  H3 記事の大見出し その1
    H4 記事の内容 その1
    H4 記事の内容 その2
  H3 記事の大見出し その2
  H3 記事の大見出し その3
    H4 記事の内容 その1
      H5 細かい分類 その1
      H5 細かい分類 その2

 

それぞれの見出しの間に記事が書かれるわけですね。このように必ず階段状に構成する必要があります。例えば、H2の下にいきなりH4見出しを持ってくることは許されていません。ちょっと難しいように思えるかもしれませんが、慣れると簡単。

 

そしてこの見出しは、記事の読みやすさに大きく影響します。見出しデザインに変なものを選んでしまうと記事が非常に読みづらくなってしまいます。上の画像の僕のブログ見出しはどうでしょうか・・・

 

これ、何だか見づらくないですか?

 

記事のタイトルとも言うべきH2見出しはなんだか薄緑で質素ですし、H3からH5も横棒や縦棒しかありません。本文中の文字を大きくしたり太くしたりすると、どれが見出しだか本文だかわかりづらくなってしまいます。

 

僕は有料テーマのTHE THOR(ザ・トール)を使っていますので、見出しデザインはかなり融通がきくはずです。デフォルトで用意されているデザインをどう選ぶべきか。チャレンジしてみることにしました。

THE THORで見出しデザインを変更する方法

まずは見出しのデザインを変更する方法をご説明しておきます。Wordpressメニューの「外観」から「カスタマイズ」を選択。

コメント 2019-11-05 211548

 

パーツスタイル設定[THE]」を選びます。[THE]と書いてある項目の一番下です。

コメント 2019-11-05 211654

 

見出し設定(個別ページ用)」を選びます。

コメント 2019-11-05 211735

 

見出しデザイン設定の画面が表示されます。H2からH5まで、タブボックスでデザインを選ぶことができます。

コメント 2019-11-05 211915

 

例えばこの画像のH2の場合『背景-リボン[カラーA:文字 B:背景 C:影]』というデザインを選んでいます。そしてA、B、Cの色をそれぞれ選ぶことで、文字と背景のリボン、リボンの影の色を設定しています。設定方法はH2からH5まで共通です。

 

タブボックスを押すとわかるのですが、あまりに膨大な種類が用意されています。それではわかりやすくまとめてみましょう。


THE THORの見出しデザイン一覧

見出しのデザインは膨大な数がありますが、グループで区切ると大きく9種類に分けられます。それぞれご紹介しましょう。

1.「基本」タイプ

1種類のタイプが用意されています。

コメント 2019-11-05 214904

 

見出し見本

1_kihon

ただのちょっと大きめ、太めの文字です。使用することはまぁ無いでしょう。

 

2.「下線」タイプ

10種類のタイプが用意されています。

コメント 2019-11-05 214941

 

見出し見本

2_kasen

比較的よく見かけるタイプの見出しです。見やすくて使いやすいでしょう。

 

3.「左線」タイプ

1種類のタイプが用意されています。

コメント 2019-11-05 215031

 

見出し見本

3_hidarisen

タイトルの左側に線が入るだけ。これも比較的よく見かけますし僕も使っていましたが、文章の区切りとしては認識しづらくイマイチだと思います。(だからこそ僕も変えたいと感じました)

 

4.「左下線」タイプ

3種類のタイプが用意されています。

コメント 2019-11-05 215108

 

見出し見本

4_hidarishitasen

左線タイプと下線タイプの合体版です。比較的認識しやすく、左線タイプの認識しづらさが改善されています。利用価値あり。

 

5.「背景」タイプ

14種類のタイプが用意されています。

コメント 2019-11-05 215148

 

見出し見本

5_haikei

見本は少し色が濃くなってしまいました。見出し部分がしっかり絵柄で表示されますので、文章の区切り能力としては一番優れているでしょう。その代わり色の選び方センスが問われます。変な色を選ぶと文字すら読めなくなります。

 

6.「グラデ」タイプ

10種類のタイプが用意されています。

コメント 2019-11-05 215241

 

見出し見本

6_gurade

背景タイプのグラデーションタイプです。見やすいタイトルを作ることができますが、背景タイプよりさらに色の選択がシビアになります。設定が難しい分、オリジナリティ溢れた見出しが作りやすいというメリットもあります。

 

7.「ラインマーク」タイプ

5種類のタイプが用意されています。

コメント 2019-11-05 215307

 

見出し見本

7_linemark

目立たないタイプのため、H5あたりの小さな見出しに使うことになるはず。しかし、ラインは漢字の「一」にも見えるため紛らわしくなる可能性があります。あまりオススメできません。

 

8.「丸マーク」タイプ

5種類のタイプが用意されています。

コメント 2019-11-05 215342

 

見出し見本

8_marumark

ラインマークの丸形バージョンです。こちらもH5専用と考えて良いかもしれません。目立ちにくいですが、色の設定次第でかなり使いやすくなるかもしれません。いずれにしてもH5用かな。

 

9.「先頭大」タイプ

4種類のタイプが用意されています。

コメント 2019-11-05 215417

 

見出し見本

9_sentoudai

見出し文字列の頭の文字を大きくし、色を変えることができます。僕は物珍しさで使っていました。しかし、文章間の区切り能力としてはイマイチだと感じます。もっと小さな見出しか、思い切って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>

 

配色のセンスとかはともかく・・・これまで見づらかったH3見出しの区切り機能が強化できたと思います。ちょっと派手ですが、見出しだとそれでも良いのかなという判断です。今後もいろいろと変更するかもしれませんが、今回の設定内容を書いておきましょう。

H2見出しの設定:背景-ステッチ
カラーA:#f4f4f4
カラーB:#7c0a02
カラーC:#f1bc31
H3見出しの設定:背景-左線
カラーA:#4d4d4d
カラーB:#f1bc31
カラーC:#7c0a02
H4見出しの設定:下線-グラデ
カラーA:#b22222
カラーB:#7c0a02
カラーC:#f1bc31
H5見出しの設定:丸マーク-基本
カラーA:#b22222
カラーB:#7c0a02

 

ご覧の通り、それぞれの見出しで使っているカラーは同じ色が多いです。あまりに配色を変えすぎると見づらくなります。そして、今回の配色にはこちらのサイトを利用させて頂きました。おしゃれな配色パレットがたくさんあります。

Color Hunt is a free and open platform for color inspiration…


さいごに

今回はWordpressのテーマ「THE THOR」の見出しデザインのお話をお届けしました。THE THORは設定項目が多く、良く言えば自由度が高い。悪く言えば設定の煩わしさがあります。まぁ・・・これも楽しみですか。

 

CSS(スタイルシート)をいろいろ追加すると更に自由なデザインを行うことができますが、僕にはそんな技術はありませんし、誰かのマネをするしかありません。そして折角ですから、有料テーマTHE THORのデフォルト見出しを活用してみませんか?

 

THE THOR使用中のブロガーさん、ぜひ参考にしてくださいね!

 

活ノートでは最新記事の投稿情報をメールでお伝えしています。お気軽にご登録ください!


 

配信例はこちらにあります。

 
いいやん!
↑まだ0いいやん!です。良い記事でしたら最初の「いいやん!」をお願いします。
読み込み中...

記事はいかがでしたか?
THE THORの購入はこちらから。


コメント 2019-11-09 200754
最新情報をチェックしよう!
>活ノート!でつながる。

活ノート!でつながる。

記事にはお気軽にコメントをどうぞ!
ご意見、ご質問、記事の執筆依頼などなどお待ちしております。

ブログランキングに参加中です。
順位の確認はこちらです。
人気ブログランキングブログランキング・にほんブログ村へFC2ブログランキング