注目キーワード
  1. the thor
  2. WordPress
  3. Google
  4. プラグイン

【画像付】THE THOR(ザ・トール)でサイトロゴとヘッダーエリアの設定をしよう〜初期設定編①〜

こんにちは、テンテンです。

 

今回はTHE THOR(ザ・トール)でサイトロゴの設定とヘッダーエリアの設定について解説します。

 

【ヘッダーエリア完成例】

※サブメニューはヘッダーエリアには設置していません。

 

サイトロゴの設置方法

ヘッダーの背景色と文字色の変更方法と細かい設定方法

サブメニューの表示方法

グローバルメニューの表示方法

サーチパネルの表示方法

メニューパネルの表示方法

 

まず、各ポジションの名前を覚えておきましょう。

 

初期設定の項目は多いですが、作業自体は簡単に設定が可能で、それほど時間はかかりません。

 

今回の作業時間:10分〜20分ほど

 

では早速解説に進みます。THE THORの大事な初期設定なので、じっくり読み進めて取り組んでいきましょう。

 

THE THOR(ザ・トール)でサイトロゴを設置する方法について

 

まず、ヘッダーの一番メインエリアであるサイトロゴを設置していきます。

 

①サイトロゴを用意しよう。

 

自分で作成できる方は、自分でチャッチャッと作成してしまいしょう!

 

僕の場合、少々面倒ということもあったのでココナラで500円ほどでブログ用のロゴを作成していただきました。

 

ロゴサイズは、縦220px×縦50pxで作成していただきました。

 

登録自体は無料なので、まずは登録だけでもしておきましょう。

 

ロゴを準備して次のステップに移っていきましょう。

 

次にサイトロゴをアップロードしていきます。

 

②「外観」→「カスマイズ」に進みます。

 

②「基本設定[THE]」に進みます。

 

③「サイトロゴの設定」に進みます。

 

④「画像を選択」してサイトロゴをアップロードします。

 

この際、青枠の箇所でロゴサイズの調整を行うことができます。

 

スマホ表示とPC表示で別けられていますので、お好みにサイズを変更をしてください。

 

ちなみに、当ブログではスマホ表示は25px、PC表示は40pxで設定しています。

 

一点注意するべき点は、PCのロゴサイズを調整する際、一度「公開」をして確認しないとサイズが変更できているか確認できない点です。

※要はカスタマイズ画面からのままだとサイズ調整してもわかりにくい。

 

実際にやってみると言っている意味が伝わるかと思いますので、詳しい説明は省きます。

 

ロゴは、ブログの顔でもありますので、しっかり設置しておきましょう。

 

これで、サイトロゴのアップロードは完了しました!忘れずに「公開」をして確認をしましょう。

 

THE THOR(ザ・トール)でヘッダーエリアの設定をしていこう!

 

ヘッダーにロゴをアップロードをすることができましたが、場合によってはヘッダーの背景色の変更や細かい設定をした方もいるでしょう。

 

また、デフォルトの状態でグローバルメニュー、メニューパネル、サーチパネルは表示される設定となっていますが、人によっていらないよ!という方もいるかと思います。

 

ここでは、主にヘッダーエリアの細かい設定について解説します。

 

ヘッダーの背景色や文字色を変更したい!

 

まず、ヘッダーエリアをカスタマイズする場所に移っていきます。

 

①「外観」→「カスタマイズ」→「共通エリア設定」→「ヘッダーエリア設定」に進みます。

 

 

赤枠で囲っているところが、色の変更ができる箇所です。

 

・「ヘッダーの背景色を指定」:背景色の変更

・「ヘッダーのテキストカラーを選択」:文字色の変更

一方で青枠で囲っている箇所が、細かい設定の部分です。

 

まず「ヘッダーのレイアウトを選択」について、「シンプル」と「ダイナミック」のどちらかを選択することができます。

 

【シンプル例】

 

【ダイナミック】

 

お好みなモノを選択しましょう!僕もちょくちょく変更をしています(笑)

 

次に「ヘッダーを固定表示させるかの選択」についてです。

 

具体的に説明すると、通常ブログを読む際、上から下に向かって読みますよね!その際、当然スクロールをしていきます。
さすがに下から読む人はいないだろうけど(笑)

 

この設定は、スクロールをしても、ヘッダーエリアを固定で表示させるかの設定となります。

 

この辺りは、実際に検証してみるとさらにわかりやすいので、今の説明でわからない方は検証してみることをオススメします。

 

最後に「ヘッダーエリアの区切り装飾選択」に関しては、設定してもかなりわかりにくいので、あまり気にする必要はありません。

 

グローバルメニューの設定について

 

ここでは、主にグローバルメニューを表示させるかどうかの選択を行うことができます。先ほどと同様、「ヘッダーエリアの設定」から行うことができます。

 

 

ちなみに当ブログでは、デフォルトの状態のままとしています。

 

ここでの設定は、あくまでもグローバルメニューを表示させるかどうかの設定なので、グローバルメニューを一から作成したい場合は、下記の記事をご覧ください。

 

あわせて読みたい記事

こんにちは、テンテンです。   今回は、WordPressでグローバルメニューを設定する方法について解説していきます。   【グローバルメニュー完成イメージ】   グ[…]

 

サブメニューの表示方法

 

次はサブメニューの表示方法です。先ほどと同様、「ヘッダーエリアの設定」から行うことができます。

 

 

サブメニューの表示については、主に2つの場所を選択することができます。

 

今回は、検証として、「テスト」というテキストにリンクを入れております。あまり使い道がわからないので、当ブログでは使っておりません。

 

【サブメニューの表示場所は2つ】

①グローバルメニュー内にサブメニューを表示

②メニューパネル内にサブメニューを表示

 

【グローバルメニューにサブメニューを表示した場合】

 

【メニューパネルにサブメニューを表示した場合】

 

サーチパネルの表示方法

 

サーチパネルは、主に読者が求める必要な情報を検索する為に設置します。サーチパネルの場所がわからない方ははじめの方で解説していますので、戻って場所を確認しましょう。

 

当ブログでもサーチパネルは、設置しています。先ほどと同様、「ヘッダーエリアの設定」から行うことができます。

 

 

当ブログでは上記のように設定しています。サーチパネルの設置しておくことで、自分でも必要な記事を検索することができますので設置しておくことをオススメします。

 

メニューパネルの表示方法

 

メニューパネルの場所がわからない方は、はじめに戻って確認をしましょう。

 

当ブログでもメニューパネルは、読者の方が必要な情報を得られやすいようにメニューパネルを設置しています。

 

ちなみに、当ブログでは下記のように設定をしています。

 

 

メニューパネルの設定を変更する際に一点注意があります。メニューパネルの見出しデザインを変更する際は、スマホからでないと変更の確認ができません。

 

ウィジェットの見出しの色変更は、PCからでも変更の確認が可能です。ちなみに赤枠で囲った場所が、色変更をできたり、デザインを変更したりすることができます。

 

 

ここでは、あくまでもメニューパネルの表示とウィジェットのデザインを変更するだけなので、一からメニューパネルを作成した場合は下記の記事をご覧ください。

 

あわせて読みたい記事

こんにちは、テンテンです。   今回は、THE THOR(ザ・トール)で見やすいメニューパネルを作る方法を解説します。   【THE THORメニューパネルの完成イメージ】 &nbs[…]

THE THOR(ザ・トール)で見やすいメニューパネルの設定方法

 

さいごに

 

今回は、主にTHE THOR(ザ・トール)で初期設定であるサイトロゴの設置方法とヘッダーエリアの細かい設定について解説させていただきます。

 

その他にも、THE THORの使い方をわかりやすく解説している記事をたくさん用意しているので、よかったらカテゴリーやサーチパネルから検索してみてください!

 

また、THE THORではかなり細かいところまで設定できる分、時間がかかってしまうので、記事を更新しながら少しづつ設定を変更していく方が効率的かと思います。

 

では頑張っていきましょう!最後まで読んでいただき、ありあとうございました。

最新情報をチェックしよう!