こんにちは、あゆりです。
今回は、THE THOR(ザ・トール)でのサイトロゴとヘッダーエリアの設定方法を画像付きで解説します。
・ヘッダーエリアの細かい設定方法
・グローバルメニューの設定方法
・サブメニューの設定方法
・サーチパネルの設定方法
・メニューパネルの設定方法
項目は多いですが、設定自体は簡単です。
THE THORではさまざまなカスタマイズができるので迷うと思いますが、ヘッダーは自分のサイトの顔にもなるのでしっかり設定しましょう。
それではさっそく解説に進みます。
THE THORでサイトロゴの設定方法
まずは、ヘッダーエリアの一番のメインでもあるサイトロゴを設置しましょう。
サイトロゴとは、当ブログでいうとこちらですね。
サイトロゴは、ロゴ画像を作成して設置する方法と文字を表示させる方法があります。
当ブログではロゴ画像ではなく文字を表示していますが、ここでは両方の設定方法を紹介しますね。
サイトロゴ画像の設定方法
まずは、サイトロゴ画像の作成、設定方法を解説します。
サイトロゴを作成しよう
サイトロゴ画像は、自分で作成しても良いですし、ココナラなどでデザイナーさんに依頼して作成してもらうこともできます。
自作する場合は、ロゴ作成ツールなどたくさんあるので調べたらすぐ出てきます。
ロゴ画像のサイズは後から調整できますが、大きく作ってもファイルサイズが大きくなってしまうので、縦220px×横50pxがちょうど良いと思います。
ココナラなどでデザイナーさんに依頼した場合は、500円〜3000円程度で作成してもらえます。
登録自体は無料なので、まずは登録してみても良いでしょう。
作成したロゴ画像を設置しよう
①「外観」→「カスタマイズ」に進む
②「基本設定[THE]」に進む
③「サイトロゴの設定」に進む
④「画像を選択」からサイトロゴをアップロードする
ロゴサイズの変更をPC表示、スマホ表示とそれぞれ調整できるので自分の好きなように変更しましょう。
ロゴ画像のアップロード、サイズ変更ができたら、忘れずに「公開」ボタンをクリックしましょう。
以上でサイトロゴ画像の設定方法の解説は完了です。
サイトロゴに文字を表示させる設定方法
次に、サイトロゴに画像ではなく文字(サイト名)を表示させる設定方法を解説します。
ちなみに、ロゴ画像の設定がなければテキストでサイト名を表示してくれているので、ここではカスタマイズのみ行います。
①「外観」→「カスタマイズ」に進む
②「共通エリア設定[THE]」に進む
③「ヘッダーエリア設定」に進む
④「ヘッダー設定」で設定を行う
背景色や文字の色を設定することができます。
文字は、登録しているサイト名が表示されます。
文字の色は、白か黒しか選べないので、背景色に合わせて自分好みに選択しましょう。
THE THORでヘッダーエリアの設定方法
さて、ここからはヘッダーエリアの設定方法を解説していきます。
今回解説する内容は、次の5つです。
②グローバルメニューの設定方法
③サブメニューの設定方法
④サーチパネルの設定方法
⑤メニューパネルの設定方法
さっそく一つずつ見ていきましょう。
①ヘッダーエリアの細かい設定方法
まずは、ヘッダーエリアの背景色や文字色などの細かい設定方法について解説していきます。
サイトロゴの文字表示の箇所で解説しているので、そちらもを見てもらえれば設定方法はわかると思いますが、ここでも簡単に解説しておきますね。
①「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「ヘッダーエリア設定」→「ヘッダー設定」で設定を行う
赤枠で囲っている箇所では、ヘッダーエリアの背景色と文字色を設定できます。
文字色は白か黒のみなので、背景色に合わせて自分好みに設定しましょう。
青枠で囲っている箇所では、その他細かい設定をすることができます。
一つずつ見ていきます。
ヘッダーのレイアウトを選択
「ヘッダーのレイアウトを選択」では、「シンプル」か「ダイナミック」のどちらかを選択することができます。
実際に画像で見てみましょう。
シンプル
ダイナミック
こんな感じです。
自分の好みの方を選択しましょう。
ヘッダーを固定表示するか選択
こちらは、具体的に言うと、ブログを読む際にページを上下にスクロールするときにヘッダーを固定表示するかしないかということです。
実際にやってみた方がわかると思うので、試してみてくださいね。
ヘッダーエリアの区切り装飾を選択
すごく細かく分かりにくいと思いますが、どこの区切りかというと下記画像の場所です。
こちらですね。
正直分かりにくいし、そこまで大事な設定ではないですが、一応私自身は「ボーダー」に設定しています。
以上でヘッダーエリアの細かい設定は完了です。
忘れずに「公開」ボタンをクリックしましょう。
②グローバルメニューの設定方法
次に、ヘッダーエリアにグローバルメニューを表示させるかどうかの設定をします。
先ほどと同様に「ヘッダーエリア設定」から設定できます。
ちなみにグローバルメニューとは、こんなやつです。
下記画像のように、PC/スマホ両方で表示、表示しない、スマホで表示しない、PCで表示しないのどれかを選択できるので、自分の好みで選びましょう。
ちなみに当ブログでは、「スマホで表示しない」に設定しています。
ここでの設定は、あくまでもグローバルメニューを表示させるかどうかの設定なので、細かいカスタマイズ方法は別記事で解説しますね。
こちらも設定が完了したら、忘れずに「公開」ボタンをクリックしましょう。
③サブメニューの設定方法
次は、サブメニューの設定です。
こちらも先ほどと同様に「ヘッダーエリア設定」から設定できます。
当ブログでは使用していないですが、一応設定すると画面上でどんな表示のされ方をするのか紹介しますね。
検証ということなので、「サブ」というテキストでリンクを貼り付けてみます。
サブメニューを表示できる場所2つ
・メニューパネル内
グローバルメニュー右側に設定した場合
メニューパネル内に設定した場合
こんな感じです。
こちらも好みで設定しましょう。
設定が完了したら、忘れずに「公開」ボタンをクリックしましょう。
④サーチパネルの設定方法
次は、サーチパネルを設定します。
こちらも先ほどと同様に「ヘッダーエリア設定」から設定できます。
サーチパネルとは、読者がキーワード検索をして記事を探すことができたり、自分自身も必要な記事を探すことができます。
ちなみにサーチパネルとはここのことです。
当ブログでもサーチパネルは設置していて、下記のように設定しています。
設置する場合は、基本的に同じように設定すれば良いと思います。
こちらも設定が完了したら、忘れずに「公開」ボタンをクリックしましょう。
⑤メニューパネルの設定方法
最後に、メニューパネルを設定しましょう。
こちらも先ほどと同様に「ヘッダーエリア設定」から設定できます。
メニューパネルとは、これですね。
当ブログでも設置していて、下記のように設定しています。
ウィジェットの見出しデザインを選択
ウィジェットの見出しデザインは、全部で6種類あります。
実際に見てみましょう。
角丸
シンプル
ボトムボーダー
はみ出すボーダー
シンプル(ワイド)
内側ボーダー(ワイド)
お好きなデザインを選びましょう。
ウィジェット見出しの色を指定
ウィジェットの見出し色を変更できます。
こちらもお好きな色を選びましょう。
ここでの設定は、あくまでもメニューパネルを表示させるかどうかとウィジェットのデザインを設定するだけなので、細かいカスタマイズ方法は別記事で解説しますね。
設定が完了したら、忘れずに「公開」ボタンをクリックしましょう。
スポンサードサーチ
おわりに
無事にサイトロゴとヘッダーエリアの設定はできましたか？
ヘッダーエリアは、自分のサイトの顔にもなるので、しっかり設定しましょう。
さて、ヘッダーエリアの表示設定が完了したら、グローバルメニューの細かい設定をしましょう。
別記事のTHE THOR(ザ・トール)でグローバルメニューの設定方法【画像付き】で詳しく解説しているのでよかったらぜひ。
というわけで今回は以上です。
こんにちは、あゆりです。今回は、THE THOR(ザ・トール)でのグローバルメニューの設定方法を画像付きで解説します。・グローバルメニューにメニューを新規追加、削除する方法・グローバルメニューの応用設定・グローバルメニューがうまく表[…]