THE THORの画像とカラーの設定

THE THOR(ザ・トール)、画像とカラーの設定

ここでは、WordPressテーマ、THE THOR(ザ・トール)の画像やカラーの設定・変更について解説しています。

THE・THORでは、画像やカラーに関する設定・変更は、全てWordPress管理画面の「外観」-「カスタマイズ」に遷移して行います。

以降は「カスタマイズ」内にあるメニューを前提に解説していきます。

THE THORの画像の設定

サイトアイコン(ファビコン)画像を設定

サイトアイコンは、Web独自のアイコンのことで、

  • ブラウザーのタブや
  • ブックマークバー
  • スマホのホーム画面

などで表示されます。ファビコン(favicon)とも言われます。

設定しなくても支障はありませんがサイトに個性を出すためにも設定しておきたいものです。

サイトアイコンの表示場所

サイトアイコンは、

「サイト基本情報」の「サイトアイコン」で設定します。

サイトアイコンのサイズは、512×512ピクセル以上の正方形が推奨されています。

IE10以下のブラウザは、.icoしか認識してくれないようですが、現在は殆どがIE11やMicrosoft Edge、Chrome、Safariだったりしますので、pngなどの画像で問題ありません。

サイトアイコンを変更した場合、なかなか変わらないことがあります。この場合は、PC、スマホともブラウザのキャッシュをクリアしてみて下さい。

ヘッダーに表示する文字またはサイトロゴ画像の設定

ヘッダーには、文字(タイトル)またはサイトロゴ画像を表示させることができます。

THE THORのヘッダー部分

文字を表示させる場合

文字を設定する場合は、WordPress管理画面の設定(一般設定)のサイトタイトルが表示されますので、改めて表示させる文字を設定する必要はありません。

「共通エリア設定」-「ヘッダーエリア設定」の「ヘッダー設定」で文字のカラーと背景色を設定すればOKです。

サイトロゴ画像を表示させる場合

サイトロゴ画像を設定する場合は、「基本設定」-「サイトロゴ設定」の「ロゴ画像の設定」で画像をアップロードさせる必要があります。

背景色は、「共通エリア設定」-「ヘッダーエリア設定」の「ヘッダー設定」で設定します。

ヘッダー部分にサイトロゴ画像を表示する場合は、そのサイズに注意して設定する必要があります。その手順は以下で詳しく解説していますのでそちらを参照して頂ければと思います。

参考記事

サイトロゴ画像の設定は、画像のサイズや色合いの微調整とかをしていると記事を書くより多くの時間を費やしてしまいます。 特に、WordPressテーマ「THE THOR」の場合は、アップした画像のサイズが、一見、不規則[…]

THE THORでサイトロゴ画像を設定する手順

トップページを固定ページにした場合はタイトルとh1の整合性に注意

ちょっと細かい話になりますが、注意すべき重要な点があります。

トップページの表示を「最近の投稿」としている場合、「設定」-「一般」の「サイトのタイトル」に記載(設定)した文字は、トップページのタイトル<h1>タグにセットされます。

このように、トップページの表示を「最近の投稿」としている場合は、サイトのタイトルと<h1>タグは同じになり、整合性がとれます。

しかし、トップページの表示を「固定ページ」としている場合は、サイトタイトルには固定ページのタイトルが設定され、<h1>タグは「設定」-「一般」の「サイトのタイトル」に記載(設定)した文字が設定されますので必ずしも同じになりません。

例えば、当サイトでは、

  • トップページを固定ページ表示とし、サイトのタイトルを「定年後リッチ」とし、
  • トップページ(固定ページ)のタイトルを「定年後・老後の生活を豊かにするために今からできること」

としています。

トップページのタイトルが、「定年後・老後の生活を豊かにするために・・・」なのに、<h1>が「定年後リッチ」と設定されるという訳です。

そして、ヘッダーにサイトロゴ画像を設定した場合は、そのサイトロゴ画像が<h1>として扱われ、その画像のalt属性にサイトのタイトル「定年後リッチ」セットされます。

これでは、トップページのSEO対策としてのワードが分散してしまいますので、このサイトでは、<h1>には、固定ページのタイトルがセットされるように自分でカスタマイズしています。

ちょっと面倒ですがトップページの検索結果の順位に関わってきますので重要な部分です。

トップページに画像(メインビジュアル)を表示

トップページに静止画像(メインビジュアル)を表示する場合は、

「TOPページ設定」-「メインビジュアル設定」の「静止画時の設定」で画像を登録します。

同じ箇所でスライドシューの設定も可能です。

メインビジュアル画像の位置

トップページに関する設定の詳細は、以下で解説しています。

参考記事

2018年11月の下旬にインストールして使い始めたWordPressテーマ「THE THOR」 THE THORは、機能が多いだけに設定項目が多いのが特徴です。 THE THORの前身とも言える無料版のライオ[…]

THE THORのトップページの設定

アイキャッチ画像の設定・変更

アイキャッチ画像は、記事の顔になる画像です。

投稿記事のトップの位置に表示されたり、カテゴリーやタグの記事一覧で記事ごとに表示されたりする重要な画像です。

アイキャッチ画像

投稿記事のトップの位置にアイキャッチ画像を表示する設定

投稿記事のトップの位置にアイキャッチ画像を表示するか否かの設定は、

「投稿ページ設定」-「スタイル設定」の「ページタイトルデザイン設定」で行います。デフォルトでは表示されるようになっています。

バイラル風(投稿記事のみで有効)を選択した場合は、画像のマスクを選択できます。

また、投稿記事のアイキャッチ画像には、必要に応じて、「投稿日」「更新日」「閲覧数」「コメント数」などを表示させることもできます。

そして、実際に投稿記事で表示させるアイキャッチ画像は、記事投稿画面の右下にある「アイキャッチ画像を設定」から選べます。

アイキャッチ画像設定画面

ここでアイキャッチ画像を設定しない場合は、投稿ページ(記事のページ)には、画像が表示されず、アーカイブページ(カテゴリーページやタグページなど)では、予め用意されたnoimage画像が表示されます。

NO IMAGE画像

このnoimage画像を変更する場合は、

「基本設定」-「アイキャッチ画像の設定」の「NO IMAGE画像の設定」で変更します。

THE THORの色(カラー)の設定

ヘッダーカラー

ヘッダーカラーの設定は、

「共通エリア設定」-「ヘッダーエリア設定」の「ヘッダーの背景色を指定」で行います。

ヘッダーカラーの位置

サイドカラム・メインカラム・フッターエリア・メニューパネルのウィジェット見出しのカラー

ウィジェットとは、WordPressのサイトやブログで、固定の位置に特定の機能を表示するパーツのようなものです。

サイドカラムのに設定するウィジェットの見出しのカラーは、

例えば、新着情報というウィジェットの見出しのカラーは、「共通エリア設定」-「サイドカラムエリア設定」の「ウィジェット見出しの色を指定」で設定します。

サイドカラムのに設定するウィジェットの見出しのカラー
メインカラムにウィジェットを設置する場合のウィジェット見出しのカラーは、
「共通エリア設定」-「メインカラムエリア設定」の「ウィジェット見出しの色を指定」で

フッターエリアにウィジェットを設置する場合のウィジェット見出しのカラーは、
「共通エリア設定」-「フッターエリア設定」の「ウィジェット見出しの色を指定」で

メニューパネルにウィジェットを設置する場合のウィジェット見出しのカラーは、
「共通エリア設定」-「ヘッダーエリア設定」の「ウィジェット見出しの色を指定」で

それぞれ設定します。

テーマカラー

テーマカラーの設定は、

「基本設定」-「基本スタイル設定」の「テーマカラーを指定」で設定します。

テーマカラーの位置

投稿内テキストリンクのカラー

テキストリンクのカラーとは、リンクURLを貼った文字の色のことです。

通常の文字と色を変えることでテキストリンクであることを分かります。

投稿内テキストリンクのカラーは、

「基本設定」-「基本スタイル設定」の「投稿内テキストリンク色を指定」で設定します。

背景のカラー・画像

背景のカラーや画像は、

「基本設定」-「基本スタイル設定」の「全体の背景色を指定」または「全体の背景画像を登録」で設定します。

共通ボタンカラー

共通ボタンカラーは、

「パーツスタイル設定」-「共通ボタン設定(全ページ用)」の「共通ボタン設定」で指定。

記事投稿ページで下のようなボタンを設置したい場合などにボタンの色を指定。

プライマリボタン、セカンダリボタン、ノーマルボタンの3種類がありますが、それぞれの背景と文字の色設定が可能です。

全ページ共通ボタン

ボタンカラー

ボタンカラーは、

「基本設定」-「タグ管理設定」の「ボタンカラー設定」で指定します。

サイト内リンクボタンとサイト外リンクボタンの色指定が可能です。

ボタンはランキングなどでも使用されていますので、これらの色を変更する場合もボタンカラー設定を使います。

ボタンカラーの設定

テーブルのカラー

記事の中で使うテーブルのカラーを設定する場合は、

「パーツスタイル設定」-「テーブル設定」の「テーブルデザイン設定」で指定します。

テーブルの背景色、文字色、線色、TH背景色、TD背景色、TD背景色(偶数列)などの設定が可能です。ランキングにもテーブルは使用されていますので、これらの色を変更する場合もテーブルデザイン設定を使います。

テーブルの色設定

尚、投稿画面でテーブルを設定したのちに表のプロパティやセルのプロパティを利用して背景色や線の色などを変更することも可能です。

背景色変更
背景色変更 線の色変更

見出しのデザインとカラー

見出しとは、記事中の見出し(文字や背景、線の色やデザイン)のことです。

記事の中の見出しのカラー・デザインは、

「パーツスタイル設定」-「見出し設定(個別ページ用)」の「見出しデザイン設定」で、h2見出しからh5見出しまでお好みのものに設定できます。

THE THORの見出しのデザインと色の設定

ちなみに当サイトではカスタマイズをしてh2とh3見出しの横幅を少し拡張させています。

カテゴリーのイメージカラー

カテゴリーごとのイメージカラーは、WordPressメニューの「カテゴリー」から該当のカテゴリーを選び、「イメージカラー」を指定します。

カテゴリー毎のカラー設定

THE THORでは、下図のように色分けされます。

カテゴリー毎の色分け例

THE THORの画像やカラーの設定まとめ

以上、THE THORの画像やカラーの設定・変更について解説してきました。

ホームページの見た目の良し悪し(デザイン)は、画像とカラーのバランスによるところが大きいと言われています。

この画像とカラーを一つ一つ詰めていくことで、ホームページのデザインを向上させるとともにオリジナリティを深めたホームページを作成することができます。

尚、その他の設定・カスタマイズについても以下でまとめていますので、必要に応じて参考にして頂ければと思います。

参考記事

現在、当サイトでは、WordPressテーマに「THE THOR(ザ・トール)」を使用しています。 THE THORは標準で多くの機能を搭載している分、設定項目が多く、使いこなせるようになるまで少し時間がかかります[…]

THE THORのカスタマイズまとめ
参考記事

このサイトは、THE THOR(ザ・トール)という有料のWordPressテーマを使用しています。 ここでは、THE THORの評判や評価はどうなのか、と思っている人に、筆者が実際にTHE THORを1年以上使って[…]

THE THORの評判と評価レビュー