THE THOR(WordPressテーマ)の画像とカラーの設定

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

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

画像の設定

サイトアイコンを設定

サイトアイコンは、ブラウザーのタブブックマークバーモバイルなどで表示されます。

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

サイトアイコンのサイズは、512×512ピクセル以上の正方形にします。

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

ヘッダーにロゴ画像を設定

サイトロゴ画像をヘッダーに設定する場合

ヘッダーのロゴ画像は、

「基本設定」-「サイトロゴの設定」の「サイトロゴ画像を登録」で設定します。

尚、下記の図は当サイトを立ち上げた当初の画面です。

ヘッダーロゴの位置

現在は、「TUKAERU-LAB」という画像を「使えるラボ」という画像に変更し、画像(メインビジュアル)も変更しています。

使えるラボpng画像
使えるラボpng画像

上記のような文字画像をpng形式で作成することで背景と馴染ませることができます。

サイトロゴ画像を登録しない場合

サイトロゴ画像を登録しない場合は、WordPress管理画面の、

「設定」-「一般」の「サイトタイトル」に記載(設定)した文字が表示されます。

尚、WordPress管理画面の「設定」-「一般」の「サイトタイトル」に記載した名称は、TOP画面の<h1>タグに記述される名称となりますのでSEOを考慮して名称を考える必要があります。

<補足>
TOPページの<title>は、
・固定ページをTOPページに設定した場合は、固定ページのタイトルが、
・最近の投稿ページをTOPページに設定した場合は、「SEO設定」-「TOPページSEO設定」の「TOPページの<title>」で記述したタイトルが設定されます(未入力時はWordPress管理画面の「設定」-「一般」の「サイトタイトル」が設定される)

TOPページの<h1>は、
・固定ページ、最近の投稿ページいずれをTOPページに設定した場合でも、WordPress管理画面の「設定」-「一般」の「サイトタイトル」で記述した名称が設定されます。

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

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

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

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

TOPページメインビジュアルの位置

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

関連記事

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

THE THORのTOPページの設定

noimage画像の変更

アイキャッチ画像を設定しない場合は予め用意されたnoimage画像が表示されます。

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

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

NO IMAGE画像

色(カラー)の設定

ヘッダーカラー

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

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

ヘッドカラーの位置

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

サイドカラムのウィジェット見出しのカラーは、

「共通エリア設定」-「サイドカラムエリア設定」の「ウィジェット見出しの色を指定」で設定します。

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

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

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

それぞれ設定します。

テーマカラー

テーマカラーの設定は、

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

テーマカラーの位置

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

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

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

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

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

背景のカラー・画像

背景のカラーや背景の画像は、

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

共通ボタンカラー

共通ボタンカラーは、

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

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

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

全ページ共通ボタン

ボタンカラー

ボタンカラーは、

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

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

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

ボタンカラーの設定

テーブルのカラー

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

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

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

テーブルの色設定

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

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

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

「パーツスタイル設定」-「見出し設定(個別ページ用)」の「見出しデザイン設定」で指定できます。見出しのデザインと色の設定ができます。

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

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

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

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

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

カテゴリー毎の色分け例

以上、WordPressテーマ、THE・THORの画像やカラーの変更・設定の仕方でした。

関連記事

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。THE THORは標準で多くの機能を搭載している分、設定項目が多いのが特徴です。設定によって自在にデザインや表[…]

WordPressテーマ「THE THOR」でカスタマイズしている点
関連記事

このサイトは、THE THORという有料のWordPressテーマを使用しています。管理人は、このサイト以外にもいくつかのサイトを運営していますが、そのうちの毎週更新している個人用ブログでもこのTHE […]

WordPressテーマ「THE THOR」とは?THE THORを実際に使用したレビュー