ついに念願のWordPress有料テーマ「THE THOR」をインストール!「カスタマイズ」からのデザイン変更を確認しよう。

今日も元気に個人商店を営んでいる40代「ヨフカシ(@yofukashi-kirin)」です。

ついに、念願だったWordPressの有料テーマ「THE THOR」(ザ・トール)を購入しました。

他にも迷ったテーマがありましたが「買わずに後悔する」より「買って後悔する」方がスッキリする性格なので、個人的に惹かれたテーマを選びました。

早速インストールして、設定やデザインをいじっていると、あっという間に時間が過ぎていきました。

 
ヨフカシ
一番やりたかった「デザイン調整」が楽しくてしかたない!

まずは「カスタマイズ」のメニューから設定できるデザインの変更を確認していきます。

\ 1度の購入で複数のサイト運営もOK! /

目次の項目をクリックして移動できます

管理画面「カスタマイズ」から設定できるデザインの項目

WordPressの管理画面(ダッシュボード画面)のメニュー項目「カスタマイズ」の内容を確認していきます。

「カスタマイズ」から設定できる内容は、テーマによって変わるので、注意しましょう。

今回は「THE THOR」について解説します。

カスタマイズを開くと表示される項目(18個)

  • 基本設定[THE]
  • 共通エリア設定[THE]
  • TOPページ設定[THE]
  • アーカイブページ設定[THE]
  • 投稿ページ設定[THE]
  • 固定ページ設定[THE]
  • カスタム投稿タイプ設定[THE]
  • 広告設定[THE]
  • SEO設定[THE]
  • SNS設定[THE]
  • AMP設定[THE]
  • PWA設定[THE]
  • パーツスタイル設定[THE]
  • サイト基本情報
  • メニュー
  • ウィジェット
  • ホームページ設定
  • 追加CSS

「THE THOR」の項目は、全部で18個あり、他のテーマと比べても多い方だと思います。

初心者の人には、むずかしく感じるかもしれませんが、「どこで何ができるか」を理解すれば怖くはありません。

ちなみに[THE]という文字が付いている項目は、「THE THOR」特有の項目だと思ってください。

[THE]が付いていない項目は、WordPressに共通する項目です。

デザイン関連の項目に絞って解説します

すべての項目を解説すると記事があまりに長くなってしまうので、この記事では「デザイン関連」というポイントに絞ります。

中でも「色を変える」「形を変える」といった「見た目の変化」を設定できる範囲を「デザイン関連」に括ろうと思います。

基本設定[THE]

  • ロゴ画像の設定
  • 軸となる基本カラーの設定
  • 背景画像の設定

基本設定[THE]→サイトロゴの設定

サイトのタイトルを画像に変更できます。

タイトルロゴとなる画像を用意して登録します。

ちなみに私が使っているロゴ画像

サイズは「400 x 50 px」
ヘッダーに表示されたときに一体化するように、背景の色を統一しています。
Canvaで制作しました。

基本設定[THE]→基本スタイル設定

サイトデザインの軸となるデザインを設定します。

「色」に関する設定

  • テーマカラーを指定
  • テキストリンクの色を指定
  • 全体の背景色を指定
 
ヨフカシ
私のサイトのメインカラーは、実は「黄色」ではない

「背景画像」の設定

背景に模様や写真を使うことができます。

画像を登録すると、自動的に反映されます。

背景用画像の作り方や、設定の仕方を解説した記事があります。

関連記事

私は、サイトデザインが大好きですが、絵心はまったくありません。 デッサン、イラスト、風景画など「絵を描く」のが、おそろしくヘタクソで、学生時代の美術の成績は本当にひどいものでした。 この話をすると、当ブログのデザインは別の[…]

 
ヨフカシ
画像なしだと、単色のベタ塗になるよ

パーツスタイル設定[THE]

見出し、ボタン、リストなど、記事の装飾に関するデザインの設定を調整できる。

ダッシュボード
→ 外観
→ カスタマイズ
→ パーツスタイル設定[THE]
→ 以降、各項目を選んで設定変更が可能

見出し設定(個別ページ用)

「h2」から「h5」までのデザインを設定できます。

「THE THOR」では、53種類のデザインが用意されています。

見出しデザインを選ぶコツ

見出しは、話の区切り話題の転換を表す役目があります。

そのため「区切り」をイメージできるデザインを選ぶのがオススメです。

さらにもう一つのポイントは、記事の構成が「入れ子構造」になっていることがわかるようなデザインを選ぶことです。

たとえば、見出しの頭文字の位置が、だんだん内側にずれていくような流れだと、読者にわかりやすく伝わるでしょう。

 
ヨフカシ
自分の好みで選べば、いいけどね!

POINT

WordPressでは「h6」まで使えるようになっています。
しかし「THE THOR」でデザインの変更ができるのは「h2~h5」までの見出しです。

共通ボタン設定(全ページ用)

ブログ記事やWebページのリンクでよく使用する「ボタン」のデザインを調整できます。

ここでは「共通ボタン」のデザインを設定できます。

用途に合わせて使えるように、3タイプ用意されています。
ちなみに、色は全て「青(#039de7)」にしました。
「リンク=青」が定説だからです。

ちなみに表示の位置は「左」「中央」「右」から選択できる。

重要度の高い場面で使える「プライマリボタン」

カーソルをホバーすると、光ります。
目立ってカッコいい!

設定できる項目

  • 文字の色
  • 背景の色

ちょっと注目!っていう感じで使える「セカンダリボタン」

気軽に使える「ノーマルボタン」

引用設定(個別ページ用)

「THE THOR」の引用ボックスは、7種類のデザインが用意されています。
色の設定はそれぞれお好みで設定しましょう。

私が選んだのは「ラベル」というタイプ。

キリン (Giraffa camelopardalis) は、哺乳綱偶蹄目(鯨偶蹄目とする説もあり)キリン科キリン属に分類される偶蹄類。

引用元:Wikipedia

気を付けたい引用ボックスの使い方

ブログやサイトを見ていると、たまに引用ボックスの「NGな使い方」を見かけます。

引用ボックスには「 ” 」のマークが必ず表示されるので「目立たせたいボックス」みたいな感覚で使っている人がいます。

引用ボックスを「見た目のデザイン」で使うのは正しい使い方ではありません。

引用ボックスの意味

「引用」とは「他のページで表示されている文章を、そのまま転用する」こと、つまり「コピー」です。

他のサイトの一部、もしくは全部を「コピー」して自分のサイトに載せてしまう行為(転載やコピペ)は、やってはいけないことです。

検索エンジンからペナルティを与えられる可能性があります。

「コピー」を載せる際「これは他のページから転用しました」ということを明記するためのプログラムが、引用です。プログラム的にも「blockquote」というタグが使われ、他のテキストとは区別されます。

これにより、悪意のあるコピーと認定されるのを回避できます。
また、どのページからの転用なのかを「引用元」としてリンクをつけて明記するのが、ルールとなっています。

知らなかった!という方は、自分が間違った使い方をしていないか、確認してください。

リスト設定(個別ページ用)

記事作成で、かなり使用頻度が高い「リスト」のデザインです。
大きく分けて「番号なし」と「番号あり」の2種類です。

「THE THOR」では、それぞれ8種類のタイプが用意されています。

私は、デフォルトとなる基本設定をシンプルなものにして、オリジナルのCSSデザインを活用しています。

番号なし

  • キリンは、立ったまま寝る
  • たまに2 ~ 3 時間ほど、座って休憩をとることもある

番号あり

  1. ヌビアキリン
  2. アンゴラキリン
  3. コルドファンキリン
  4. ケープキリン
  5. ナイジェリアキリン
  6. アミマキリン
  7. ウガンダキリン
  8. キタローデシアキリン
  9. マサイキリン

吹き出し設定(個別ページ用)

「吹き出し」はWordPressテーマの中でも、特殊なデザインだと思います。

海外のWordPressテーマでは、あまり見たことがありません。
漫画やアニメの文化がある日本ならではの機能かもしれません。

吹き出しの画像を設定したり、文字や背景の色を変えることができます。

吹き出しの見本

 
ネボスケ
左側背景スタイル
 
ヨフカシ
右側背景スタイル
 
ネボスケ
左側ボーダースタイル
 
ヨフカシ
右側ボーダースタイル

Q&Aはどんな感じかな?

その他エディタ用パーツ設定からカラーを変更できます。

なぜ、そんなに「キリン」にこだわるの?
キリンが好きだから。

使いたいアイコンのクラス名

|icon-bullhorn

|icon-new

|icon-cog

|icon-image

|icon-flag

|icon-bookmark

|icon-bookmarks

|icon-warning

|icon-notification

|icon-question

|icon-info

|icon-checkmark

|icon-checkmark2

|icon-new-tab

|icon-point-right( up / down / left )

|icon-arrow-right( up / down / left )

テーブル設定(個別ページ用)

テーブルと呼ばれる「表」は、記事での使用頻度が高いです。
文字の色、線の色、セル(各マス目)の色を指定することができます。

【テーブル(表)の見本】

「麒」の画数19画
「麒」の部首鹿
「麒」の読み方ギ / キ / きりん
「麒」の意味・麒麟
・想像上の動物
・偶蹄目キリン科の首の長い動物
「麒」について
 
ヨフカシ
「麒」の一文字でも「きりん」と読むそうです。