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

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ページメインビジュアルの位置

noimage画像の変更

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

このnoimage画像を変更する場合は、「基本設定」-「アイキャッチ画像の設定」の「NO IMAGE画像の設定」で変更します。

NO IMAGE画像

色(カラー)の設定

ヘッダーカラー

「共通エリア設定」-「ヘッダーエリア設定」の「ヘッダーの背景色を指定」

ヘッドカラーの位置

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

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

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

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

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

テーマカラー

「基本設定」-「基本スタイル設定」の「テーマカラーを指定」

テーマカラーの位置

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

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

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

背景のカラー・画像

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

共通ボタンカラー

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

記事投稿ページで下のようなボタンを設置したい場合などに色を指定。プライマリボタン、セカンダリボタン、ノーマルボタンの3種類があり、それぞれの背景と文字の色設定が可能です。

全ページ共通ボタン

ボタンカラー

ボタンカラーは、「基本設定」-「タグ管理設定」の「ボタンカラー設定」で指定

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

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

ボタンカラーの設定

テーブルのカラー

記事の中で使うテーブルのカラーを設定する場合は、「パーツスタイル設定」-「テーブル設定」の「テーブルデザイン設定」で指定します。

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

テーブルの色設定

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

記事の中の見出しのカラー・デザインは、「パーツスタイル設定」-「見出し設定(個別ページ用)」の「見出しデザイン設定」で指定します。

記事中の見出しのデザイン(文字や背景、線の色やデザイン)を指定できます。

見出しの色設定

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

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

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

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

カテゴリー毎の色分け例

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

参考:THE THORをWordPressテーマに選んだ理由

参考:THE THORのTOPページの各種設定

参考:THE THORでランキングページを作成する手順