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