こんにちは、テンテンです。
今回はTHE THOR（ザ・トール）でサイトロゴの設定とヘッダーエリアの設定について解説をします。
ヘッダーエリア完成例
※サブメニューはヘッダーエリアには設置していません。
各ポジションの名前を覚えておくと作業もしやすいので、この機会に是非覚えるようにしましょう。
①サイトロゴの設置方法
②ヘッダーの背景色と文字色の変更方法と細かい設定方法
③サブメニューの表示方法
④グローバルメニューの表示方法
⑤サーチパネルの表示方法
⑥メニューパネルの表示方法
設定の項目は多いですが、作業自体は簡単に設定が可能で、それほど時間はかかりません。
但し、THE THORの大事な初期設定部分なので、じっくり読み進めて取り組んでいきましょう。
では早速解説に進みます。
THE THORでサイトロゴを設置する方法について
まず、ヘッダーの一番メインエリアであるサイトロゴを設置していきます。
①サイトロゴを用意しよう
オススメな方法は、ココナラでデザイナーさんに依頼をかけてロゴを作成していただく方法です。
ロゴ作成費用目安
※あくまでも目安なのでご参考までに
ちなみに、僕自身もココナラを活用してロゴを作成していただきました。
その時は、ワンコイン（500円）で作成していただきました。
ロゴサイズは、縦220px×縦50pxで作成していただきました。
※後からサイズ調整も可能なので、それほど気にする必要はないかと…
ココナラへの登録自体は無料なので、まずは登録だけでも済ましておきましょう。
▶️『ココナラ』へアクセスする
ロゴを準備したら、次のステップに移っていきましょう。
サイトロゴの準備ができたら、ロゴをアップロードします。
②「外観」→「カスタマイズ」に進みます。
②「基本設定[THE]」に進みます。
③「サイトロゴの設定」に進みます。
④「画像を選択」して、サイトロゴをアップロードします。
この際、青枠の箇所でロゴサイズの調整を行うことができます。
スマホ表示とPC表示で別けられていますので、お好みにサイズを変更をしてください。
ちなみに、当ブログではスマホ表示は25px、PC表示は30pxで設定しています。
実際にやってみると言っている意味が伝わるかと思いますので、詳しい説明は省きます。
ロゴは、ブログの顔でもありますので、しっかり設置しておきましょう。
これで、サイトロゴのアップロードは完了です。忘れずに、「公開」をして確認をしましょう。
THE THORでヘッダーエリアの設定をしていこう！
ここからは、ヘッダーエリアの具体的な設定やデザイン変更方法について解説をしていきます。
ここでの解説内容は５つ
①ヘッダーの背景色と文字色の変更方法と細かい設定方法
②グローバルメニューの表示方法
③サブメニューの表示方法
④サーチパネルの表示方法
⑤メニューパネルの表示方法
では、早速一つ一つ設定をしていきましょう。
①ヘッダーの背景色と文字色の変更方法と細かい設定について
では、早速ヘッダーエリアをカスタマイズする場所に移っていきます。
①「外観」→「カスタマイズ」→「共通エリア設定」→「ヘッダーエリア設定」に進みます。
色の変更箇所
・「ヘッダーのテキストカラーを選択」：文字色の変更
・「ヘッダーの背景色を指定」：背景色の変更
一方で青枠で囲っている箇所が、細かい設定の部分です。
ヘッダーのレイアウト選択について
「ヘッダーのレイアウト選択」では、『シンプル』と『ダイナミック』の2種類か選択が可能です。
シンプル例
ダイナミック
お好みなデザインを選択しましょう。
ヘッダーを固定表示するか選択
具体的に説明すると、通常ブログを読む際、上から下に向かって読みますよね！その際、当然スクロールをしていきますよね。
この設定は、スクロールをしても、ヘッダーエリアを常に固定で表示させるかどうかの設定となります。
この辺りは、実際に検証してみるとさらにわかりやすいので、今の説明でわからない方は検証してみることをオススメします。
ヘッダーエリアの区切り装飾選択
すごい細かい設定ですが…下記画像の箇所がヘッダーエリアの区切り先です。
かなり細かい設定ですなので、特に気にする必要はありません。好きな方だけやってみてください。
②グローバルメニューの設定について
ここでは、主にグローバルメニューを表示させるかどうかの選択を行うことができます。
先ほどと同様、「ヘッダーエリア設定」から行うことができます。
ちなみに当ブログでは、デフォルトの状態のままとしています。
ここでの設定は、あくまでもグローバルメニューを表示させるかどうかだけの設定なので、グローバルメニューを一から作成したい場合は、下記の記事をご覧ください。
こんにちは、テンテンです。 今回は、WordPressでグローバルメニューを設定する方法について解説していきます。 【グローバルメニュー完成イメージ】 グ[…]
③サブメニューの表示方法
次はサブメニューの表示方法です。先ほどと同様、「ヘッダーエリアの設定」から行うことができます。
今回は、検証として、「テスト」というテキストにリンクを入れております。当ブログでは、あまり使い道がないので使っていません。
サブメニューの表示場所は2つ
①グローバルメニュー内にサブメニューを表示
②メニューパネル内にサブメニューを表示
グローバルメニューにサブメニューを表示した場合
メニューパネルにサブメニューを表示した場合
④サーチパネルの表示方法
サーチパネルは、主に読者が求める必要な情報を検索する為に設置をします。
サーチパネルの場所がわからない方は、はじめの方で解説していますので、戻って場所を確認しましょう。
当ブログでもサーチパネルは設置しています。先ほどと同様、「ヘッダーエリアの設定」から行うことができます。
当ブログでは上記のように設定しています。サーチパネルの設置しておくことで、自分でも必要な記事を検索することができますので設置しておくことをオススメします。
⑤メニューパネルの表示方法
読者の方が必要な情報を得られやすいように、『俺のブログ運営』では、メニューパネルを設置しています。
ちなみに、当ブログでは下記のように設定をしています。
ウィジェットの見出しデザイン選択
ウィジェットの見出しデザインは6種類あります。
シンプル
内線ボーダー
角丸
ボトムボーダー
はみ出すボーダー
シンプル（ワイド）
好きなデザインを選択をしましょう。
ウィジェット見出しの色を指定
ウィジェットの見出しの色を変更することができます。お好きな色を選択しましょう。
ここでは、あくまでもメニューパネルの表示とウィジェットのデザインを変更するだけなので、一からメニューパネルを作成したい場合は、下記の記事をご覧ください。
こんにちは、テンテンです。 今回は、THE THOR(ザ・トール)で見やすいメニューパネルを作る方法を解説します。 【THE THORメニューパネルの完成イメージ】 &nbs[…]
さいごに
今回は、THE THOR（ザ・トール）で初期設定であるサイトロゴの設置方法とヘッダーエリアの細かい設定について解説させていただきました。
その他にも、THE THORの使い方をわかりやすく解説している記事をたくさん用意しているので、よかったらカテゴリーやサーチパネルから検索してみてください！
また、THE THORではかなり細かいところまで設定できる分、時間がかかってしまうので、記事を更新しながら少しづつ設定を変更していく方が効率的かと思います。
では頑張っていきましょう！最後まで読んでいただき、ありあとうございました。