THE THOR（ザ・トール）設定方法のすべて その３「共通エリア設定」
katsuです。
前回の記事から引き続き、WordpressのテーマTHE THOR（ザ・トール）の設定方法をご説明していきます。これが活ノートの設定方法の全てです！
今回は項目「共通エリア設定」の設定方法をご紹介します。
THE THOR（ザ・トール）「共通エリア設定」
ヘッダーエリア設定
ヘッダー設定
まずヘッダーとは、活ノートの場合「KATSU NOTE」と表示されていたり検索窓、メニューボタンが表示されているサイト一番上のバーの部分のことを指します。活ノートの設定はこんな感じです。
ヘッダーのレイアウトを選択：シンプル（デフォルト）
ヘッダーを固定表示するか選択：固定表示しない（デフォルト）
ヘッダーのテキストカラーを選択：黒文字（デフォルト）
ヘッダーの背景色を指定：デフォルト
ヘッダーエリアの区切り装飾を選択：ボーダー
このように、ほぼデフォルトとしています。レイアウトはシンプルとダイナミックがありますが、これは完全に好みの問題ですね。わずかですが、シンプルの方がヘッダーのバーの厚みが薄くて済むため、「シンプル」設定としています。
固定表示に関しては、画面をスクロールしてもヘッダーが画面についてまわります。これも画面がガクガクと見えてしまうので、固定は辞めました。テキストカラー、背景色についてはサイトのデザインに合わせて自由に変更してOKでしょう。区切り装飾についても好みの問題ですね。活ノートの場合は最初からヘッダーとすぐ下の画像の色が全く違うので、どんな設定でもOKでした。
グローバルメニュー設定
グローバルメニューとは、ヘッダーのバーに横並びで表示されるメニューのことです。活ノートでは「スマホで表示しない」にしています。
PCを使っている方はメニューをご覧になることができます。スマホの場合は、グローバルメニューを横並びにしてしまうと、メニューの項目が多い場合にバーを横スライドする必要があるんですね。これは煩わしいと感じましたので、スマホでは非表示としています。代わりにスマホではメニューボタンでサイト内ジャンプできるようになっています。
サブメニュー設定
サブメニューとは、活ノートの場合ツイッターボタンとRSSボタンのことを指しています。PCの場合はヘッダー内に２つのボタンが表示され、スマホではメニュー内にボタンが表示されているはずです。
設定は「グローバルメニューの右に表示」（デフォルト）としています。ただ、この設定はPCでの表示時のみ有効です。スマホではヘッダーにいろいろ表示すると画面がうるさくなってしまうので、この設定でちょうど良い感じです。
サーチパネルの設定
ヘッダーに表示される検索ボタンの設定です。活ノートでは、「表示」「キーワード検索」としています。検索機能のデフォルトは「複数条件検索」ですが、カテゴリー検索とタグ検索は不要と感じたので「キーワード検索」のみとしています。タグが増えてくると、とても使いづらくなってしまいそうなので。
メニューパネルの設定
活ノートでは、メニューパネル：表示、ウィジェットの見出しデザイン：はみ出すボーダー、ウィジェットの見出し色：デフォルトで使用しています。
メニューパネルは横線三本のボタンを押すと出てきます。ボタンひとつでいくつものページジャンプ先を登録できるため、非常に便利です。よほどすっきりしたサイトでないかぎり、表示しておいて間違いは無いと思います。見出しデザイン、色についてはお好みで。
ヘッダーボトムエリア設定[検索窓・お知らせ]
ヘッダー検索窓の表示設定
活ノートでは、ヘッダーの検索窓表示：非表示（デフォルト）、注目キーワードの表示：非表示（デフォルト）としています。この２つの設定を非表示にしているので、これ以降の設定も無効になります。
ここで検索窓を表示とすると、一番上のヘッダーバーの下に表示されるヘッダー画像の中に検索ウインドウが表示されます。ヘッダーバーに検索ボタンを設置するのであれば、ここで検索ウインドウを表示する意味はありません。どちらに検索機能を持たせるかは、サイトのデザインセンスによりますね。人それぞれです。
ヘッダーお知らせの表示設定
活ノートは「表示」で運用しています。サイトの上の方に、横に文字が流れていると思います。この文字列を設定することができる項目です。リンク先URLや背景色を指定することもできます。活ノートはURLは使用していません。背景色は黒(#000000)にしています。
この機能はすごく面白いですよね。ここに文字を流すと目立ちますし、有料テーマの醍醐味とも言える機能だと思います。僕は積極的に使っていきたいと思います。
【広告】
ブログを始めるならサーバー選びからです。
公式サイト＞＞ロリポップ！
メインカラムエリア設定
メインカラムフレーム設定
まずカラムの説明をしておきましょう。活ノートをPCで見ると、２カラムです。左のほうに記事のサムネイルと項目がずらずらと並びます。そして右側には、サイドバーと言ってカテゴリーや人気記事などが表示されます。メインカラムとは、左側の記事が並んでいるエリアのことを指します。スマホの場合、横幅が小さくなるので１カラムに自動的に切り替わります。
活ノートでは「ボーダーフレーム」を採用しています。ここを「無し」設定にしてしまうと、記事群が背景画像の上に表示されるので、背景画像によっては文字が読みづらくなってしまいます。ここもサイトを作るセンスだとは思いますが・・・。
ウィジェット設定
活ノートでは一切設定を変更していません。全てデフォルト設定です。メインカラムフレーム設定でボーダーフレームを設定しているせいか、変更しても全く変化無しです。
サイドカラムエリア設定
サイドカラムフレーム設定
サイドカラムとは、メインカラム設定で説明した２カラムの右側のことを指します。PCではメインの右に表示されますが、スマホではメインの下に表示されることになります。
活ノートでは、メインカラムと同じく「ボーダーフレーム」を使っています。こうすることで、サイドバーのエリアも枠で囲われるわけです。
各ウィジェットフレーム設定
活ノートの設定は「無し」（デフォルト）です。活ノートの場合のウィジェットは、検索窓、カテゴリー、人気記事という順で表示されています。これらウィジェットのフレームを選ぶことができます。
メインカラムでもそうでしたが、サイドカラムのフレームを「ボーダーフレーム」にしているので、各ウィジェットのフレーム設定は不要です。
ウィジェット見出しデザイン設定
活ノートの設定は見出しデザイン：角丸（デフォルト）、見出し色：デフォルトのままです。活ノートの場合に見出しとは、「カテゴリー」「最近の人気記事」のことを指します。よく見るとデザインが角丸であることがわかります。これも好みで設定してください。
【’19.3.13追記】
見出し色を「#a43737」に変更しました。少し色を変えたほうがわかりやすいですからね。今後もちょくちょく変更するかもしれません。
フッタートップエリア設定[CTA]
フッターCTAの表示設定
フッターCTAとは、サイトの一番下に表示される情報領域のことです。活ノートは「表示」設定としています。サイトの下のほうを見ると、画像（琵琶湖です）の上に文字やテキストを記載しています。
このエリアは、細かい説明よりも自由にいじってみるのが一番だと思います。参考に、僕の場合は見出しと本文を入力し、アイキャッチ画像：無し、背景画像：琵琶湖の画像、画像のマスク：カラー、カラー系マスク利用時の色：#adadad、ボタンテキスト：空欄、ボタンリンク先URL：空欄としています。
画像のマスク選択については、少し注意があります。設定によっては、PCではカラーで表示されるのにスマホでグレー表示されたりします。可能であれば両方の機器で表示を確認してみてください。
【広告】
ブログを始めるならサーバー選びからです。
公式サイト＞＞ロリポップ！
フッターエリア設定
SNSフォロー背景色の設定
このサイトの一番下をご覧ください。コピーライト表示の黒い帯があります。そのすぐ上にフッターCTAがあるのですが、本来はこの間にSNSアイコンの帯を表示することができるのです。シンプル表示を目指したかったので消しちゃいました。そのため、設定はデフォルトのままです。
ここでの背景色とは、このSNSアイコンが並ぶ帯の色を変えることができます。
ウィジェット見出しデザイン設定
フッターにウィジェットを表示する場合の見出しと見出し色を設定することができます。先ほど説明したサイドバーのウィジェット見出しと同じ意味です。活ノートではフッターにウィジェットを一切使っていませんので、デフォルトのままです。
コピーライトの設定
サイト一番下のコピーライト表示を変更することができます。これは有料テーマならではの機能ですね。ここでコピーライトを入力せず、空欄にしておくだけで自動的にデフォルトの表示がされます。活ノートは空欄のままです。
コピーライト下のリンクを表示するかについては、ぜひ「非表示」にしましょう。デフォルトでは「表示」になっていると思います。表示すると、せっかくの有料テーマが無料っぽくなってしまいます。（個人的な意見ですが。）
固定フッターエリア設定[スマホ専用]
スマホ用固定フッターの設定
この設定項目はスマホ専用です。スマホでサイトを開いたときに、画面の一番下にメニューバーを表示するかどうかの設定です。活ノートでは「表示」で、区切りは「ボーダー」線としています。これはTHE THORでぜひ使いたい機能です。
項目１の設定～項目４の設定
活ノートでは、以下の設定としています。
項目１：ホームボタン（入力欄は全て空欄でOK）
項目２：シェアボタン（Facebook～LINEボタン６個にチェック）
項目３：メニューボタン（入力欄は全て空欄でOK）
項目４：自由設定リンクボタン（入力欄をあえて全て空欄にする）
活ノートをぜひスマホで開いてみてください。一番下にメニューバーが表示されているはずです。ボタンは４つで左からホーム、シェア、メニュー、TOPへ、と並んでいます。「TOPへ」ボタンはデフォルトで絶対に表示されるものです。ここでの設定は、左側に表示される４つのボタンを選択することができます。
項目４については、デフォルトでは電話番号を入れる設定になっています。これは必要無いと感じましたので、上記設定としています。このように設定すると、項目４はメニューに表示されません。３ボタンでメニューを構成することができます。
このメニューバーは画面表示を圧迫しますが、スマホでサイト内を移動するときにとっても便利です。ぜひ活用したほうが良いでしょう。
【’19.10.24追記】
項目2のシェアボタンから「Google+」のチェックを外しました。Google+廃止による処置です。
これで「共通エリア設定」の説明は終わりです。基本設定と合わせて設定することで、ほぼサイトの基本形が整ってくることでしょう。頑張って設定してみましょう！僕も引き続き勉強していきたいと思います。
↑7いいやん！されています。良い記事でしたら「いいやん！」クリックお願いします。
下のSNSボタンから記事拡散にもご協力お願い致します。
読み込み中...
