このサイトでは WordPressテーマ THE THOR を使用しています。サイトの レイアウト 変更で曖昧だった部分をまとめました。
THE THOR をまだ使用していない方はこちらをご覧ください。
THE THOR は機能が充実していて良いテーマです。ときにその豊富な機能がカスタマイズや設定の邪魔をします。
「あれ、どこで変更したっけ？」「これどこに表示されたっけ？」
さすがに1年以上使用していて迷子になることもだいぶ少なくなりましたが、うろ覚えでモヤッとしていた部分があったので調べたついでに自分なりにまとめてみました。
THE THOR 使いの皆様に、何かの役に立てば幸いです。
※あくまで個人まとめです。
※バージョンアップにより変更になる場合があります。
THE THOR 投稿ページの 基本 レイアウト
投稿ページのレイアウトについて見ていきます。
基本は以下の図のようになります。なお設定は2カラム設定です。
上下にヘッダー＆フッター、中に投稿記事、右（左）にサイドバーという一般的なレイアウトです。
1カラム設定の場合は④サイドバー⑤追従サイドバーの存在が無くなり②投稿記事の横幅が大きくなります。
以前は1カラムにて運営していましたが紆余曲折を経て一般的な2カラム設定に変更しました。
その話はまた今度。
カラム数の設定は以下の場所より変更できます。（1カラム/2カラム）
外観→カスタマイズ→投稿ページ設定[THE]→レイアウト設定
または各投稿ページのカラム設定で記事ごとに個別で設定ができます。
もう少し細かく各エリアの コンテンツ や レイアウト を見ていきましょう。
THE THOR ヘッダーエリア 詳細
ヘッダーエリアはⒶヘッダーとⒷヘッダーボトムエリアの2つがあります。
ほとんど境目無く表示されるのであまり意識していませんでしたが、2つに分かれています。設定の方法も別です。
Ⓐヘッダーの設定
Ⓐヘッダーには、ロゴ/タイトルとグローバルメニュー、サブメニュー注目ボタン、サーチアイコン（虫眼鏡）、メニューパネル（ハンバーガーメニュー）があります。
ロゴ/タイトルの設定
以下にて設定します。
ロゴ画像の設定
外観 → カスタマイズ → 基本設定[THE] → サイトロゴの設定
タイトルの設定
外観 → カスタマイズ → サイト基本情報
ヘッダーエリア設定でレイアウト、背景色などを変更できます。
外観 → カスタマイズ → 共通エリア設定[THE] → ヘッダーエリア設定
「からあげ棒、ありったけ」では、標準とは少し違ったレイアウトにカスタマイズしています。
ヘッダーサンプル
グローバルメニュー/サブメニュー注目ボタン/サーチアイコン（虫眼鏡）/メニューパネル（ハンバーガーメニュー）の設定
ヘッダーエリアの全体的なデザインと各項目の設定はこちらになります。
外観 → カスタマイズ → 共通エリア設定[THE] → ヘッダーエリア設定
- ロゴ/タイトルなどヘッダー内のレイアウト
- グローバルメニューの表示/非表示
- サブメニューのレイアウトとボタン設定
- サーチアイコンの表示/非表示
- メニューパネルの表示/非表示、デザイン
を行うことができます。
グローバルメニューに使用するメニューは、外観→カスタマイズ→メニューで設定。
ときおり出てくるボタンの設定はテキストとリンク先URLの両方を入力することでプレビューが表示されます。
なお、ボタンはプライマリーボタンやノーマルボタンが適用されるので好みに変更しておきましょう。
外観→カスタマイズ→パーツスタイル設定[THE]→共通ボタン設定(全ページ用)
Ⓑヘッダーボトムエリア
ヘッダーボトムエリアの項目は以下より設定します。
外観 → カスタマイズ → 共通エリア設定[THE] → ヘッダーボトムエリア設定[検索窓・お知らせ]
検索窓はヘッダーエリアにあるサーチアイコンと同様の役割です。好みにあわせて表示しましょう。
「お知らせ」とは文字が流れて表示されている部分のこと。リンクをつけることも可能です。
当サイトの「お知らせ」は流れをストップし固定表示にカスタマイズしています。
当サイトは WPテーマ THE THOR を使用しています。 THE THOR はヘッダーまわりの設定が多くあります。本記事はヘッダーボトムエリアの「お知らせ」機能を[…]
トップページの場合は、ヘッダーボトムエリアの下にカルーセルやピックアップ3が表示されます。幅はヘッダーと同じ幅になります。
THE THOR 投稿記事エリア 詳細
投稿記事エリアには多くのコンテンツが存在します。
特に注目なのはウィジェットの表示位置です。この部分が曖昧だったのでレイアウトをまとめることにしました。
Ⓐ投稿ページ上部エリア ウィジェット/Ⓐ投稿ページ下部エリア ウィジェット
Ⓐは投稿記事を挟むように上下に配置されています。
Ⓐ投稿記事上部エリアは「投稿記事」と「ヘッダーエリア」の間に。Ⓐ投稿記事下部エリアは「記事下CTA」の上（記事下CTAを使用していなければ次の項目の上）に表示されます。
ウィジェットは便利ですが、Ⓐ投稿記事下部エリアに多用すると下にあるコンテンツまでたどりつかず読者が離脱してしまう等の恐れがあります。「記事下CTA」や「関連記事」などとⒶ投稿記事下部エリアの内容、どちらが優先なのか判断が必要です。
※当サイトでは記事下CTAを重要視して投稿記事下部エリアにはウィジェットを設置していません。
投稿ページ上部エリアのウィジェットサンプル
Google AdSenseを表示
ウィジェットを設置は2ヶ所で可能です。
・外観 → カスタマイズ → ウィジェット（プレビューあり）
・外観 → カスタマイズ （プレビューなし）
※ウィジェットを使い慣れたらプレビューなしが動作が軽く全体がわかるので便利です。
ウィジェットなどで広告が上手くレイアウトされない場合はこちらをご確認ください。
Ⓑダブルレクタングル
ダブルレクタングルはPC表示のときに広告を2個横並びに表示することができます。
スマホ表示のときは左側のみ表示。右側に設定した広告は非表示となります。
※ダブルレクタングルは記事ごとに表示/非表示の設定も可能です。
外観 → カスタマイズ → 広告設定[THE] → 個別ページ用広告設定
広告タグ以外にもコードが使用可能なのでアイデア次第で様々な活用ができます。
当サイトでは左側にAdSense関連コンテンツ、
右側にアフィリエイト広告を表示
広告はモザイクで見づらくてスイマセン
Ⓒ記事下CTA/PrevNext記事/プロフィール/関連記事/所属カテゴリ最新記事 の設定
その他の記事下コンテンツの設定はこちらです。記事ごとに表示/非表示の設定も可能です。
外観 → カスタマイズ → 投稿ページ設定[THE]
こちらの設定で、記事内のタイトル部分の設定やSNSボタン、フォローボタンなどの設定も行うことができます。
サンプル画像は公式デモサイトから
僕は記事下CTAを重視。他は非表示もしくは別で表示、縮小化などを行っています。
「関連記事」はAdSenseの関連コンテンツが開放されていないユーザーには便利な機能ですね。
「所属カテゴリ最新記事」のみ扱いが特殊になっています。
表示場所がフッターの上、横幅はフッターと同じ幅になります。
Ⓔsnsシェアボタン / Ⓕsnsフォロー
シェアボタンは記事の上下に。フォローボタンは記事下に表示。
シェアボタンの位置はどこが効果的なのか？いろいろなパターンがあると思います。「からあげ棒、ありったけ」では位置を固定して常時表示にカスタマイズしています。
シェアボタンのカスタマイズ記事はこちら
シェアとフォローが勘違いしやすいですよね。自分だけかな？
snsシェアボタンの設定
外観 → カスタマイズ → 投稿ページ設定[THE] → シェアボタン設定
外観 → カスタマイズ → パーツスタイル設定[THE] → シェアボタン設定(個別ページ用)
snsフォロー
外観 → カスタマイズ → 投稿ページ設定[THE] → フォローボタン設定
外観 → カスタマイズ → SNS設定[THE] → Follow設定
Ⓖコメント欄 の設定
この記事を書くにあたり一番困難だったのがコメント欄の設定です。設定をどこでするのかなかなか見つかりませんでした。
根本的なコメントのon/offはどこで設定するのか？
コメントのon/offはワードプレスの基本設定でした。
※コメントの表示/非表示は各記事ごとに設定ができます。
設定 → ディスカッション
THE THOR フッターエリア 詳細
フッターエリアは、フッタートップエリアとフッターエリアに分かれています。
フッターエリアのウィジェットは便利かつ見栄えも良いのでオススメです。
Ⓐフッターエリアの基本設定とⒹsnsフォロー/Ⓔコピーライトの設定
フッターエリアは以下にて設定
外観 → カスタマイズ → 共通エリア設定[THE] → フッターエリア設定
公式フォーラムで良く質問に出るページ下部のコピーライトを変更するのはこちらです。
snsのロゴが表示されるsnsフォローの背景色の変更も可能。
Ⓒフッターエリア[左・中央・右]ウィジェットの設定
フッターエリアにコンテンツを設置する場合はウィジェットを使用します。
フッターエリアのウィジェットは左・中央・右の3つが横並びに表示されます。
スマホ表示時は左・中央・右が縦並びになります。
フッターエリアのコンテンツなので基本的にフッターエリアの背景色が適用されます。コーポレートサイト風にするには必須のウィジェットです。
外観 → カスタマイズ → ウイジェット（プレビューあり）
外観 → ウィジェット（プレビューなし）
※ウィジェットを使い慣れたらプレビューなしが動作が軽く全体がわかるので便利です。
フッターサンプル
多少カスタマイズしています。
Ⓑフッタートップエリアの設定
フッタートップエリアはCTAの表示を想定して用意されていますが、タグの利用が可能なので意外と自由に使用することができます。
「からあげ棒、ありったけ」ではページの飾り兼CTAボタンとして利用しています。
外観 → カスタマイズ → 共通エリア設定[THE] → フッタートップエリア設定
THE THOR サイドカラム 詳細
サイドカラムエリアは初期状態ではコンテンツが何もありません。
コンテンツはウィジェットを重ねて作り上げます。
PC表示での追従サイドバーはスクロール後、固定され常時表示になります。効果的にコンテンツを設定したいアタマを悩ますエリアです。
外観 → カスタマイズ → ウイジェット（プレビューあり）
外観 → ウィジェット（プレビューなし）
※ウィジェットを使い慣れたらプレビューなしが動作が軽く全体がわかるので便利です。
あとがき
「からあげ棒、ありったけ」史上最長の記事になりました。（文字数じゃなくて縦に長い）
ウィジェットの配置場所について整理したいという安易な気持ちで書き始めたら大変な目に遭いましたw
それでも誰かの役に立てば嬉しいです。
THE THOR のカスタマイズが浸透して様々なデザインのブログが見られるようになったら楽しいな〜なんて思っています。
