The・THOR

The・THORのカスタマイズ!共通エリア設定編【WordPress】

更新日:

今回は、The・THORの共通エリアのカスタマイズを解説します。

 

サイトのイメージを決定するカスタマイズです。どんなサイトにしたいのかイメージしながら進めていきましょう!

 

注意

デザイン着せ替え機能」 を使う方は、カスタマイズの前に着せ替えをしておきましょう。着せ替えをするとカスタマイズは全てリセットされます。
ここではデザイン04を使用して説明していきます
うさぎ

 

共通エリアの区分け

 

共通エリア設定では、サイトの1ページを下のように区分けして設定していきます。

 

エリアの名前を覚える必要は無いです。

 

どこを設定しているのかを意識しておくと、設定のやり直しのときにどこを直せば良いのか探しやすくなります。

おじさん
最初はややこしいですね
これでもAffinger5より設定項目は少ないですよ
うさぎ

 

 

カスタマイズをする前に

 

テーマの設定はパソコンで行ないますが、ユーザーの約8割はスマホで見ています。

 

スマホの見え具合を確認しながらカスタマイズしましょう。

 

わたしはBLISK を使って表示確認しています。

BLISKは1日に30分無料で使用できます
うさぎ

 

 

ヘッダーエリア設定

 

ヘッダーエリアとは、ページの上のスペースのことです。

 

ヘッダー設定

 

カスタマイザーの「共通エリア」→「ヘッダーエリア設定」の順でクリックしていきます。

 

ヘッダーのレイアウト、カラーなど

 

まず、「シンプル」と「ダイナミック」ヘッダーの大きさを決めます。

シンプル

 

ダイナミック

 

 

次に、ページを下にスクロールした時にヘッダーを隠すか、そのまま表示するかを決めます。

 

ヘッダーの背景色(ここでは黄色)、テキストカラー(ここでは黒)、区切り装飾も設定できます。

 

おじさん
区切り装飾は、変更が分かりにくいです
ヘッダーの画像に白っぽいものを使うと分かりやすいかも
うさぎ

 

 

グローバルメニュー設定

 

グローバルメニューとは、カテゴリーなどに飛ぶリンクのことです。

 

 

ここでは「PCやスマホのヘッダーにグローバルメニューを表示するのか?」だけを設定できます。

 

ヘッダーに表示するグローバルメニューの項目は、「外観」→「メニュー」で設定し、ヘッダーエリアにチェックを入れます。

 

サブメニュー設定

 

サブメニューは、ヘッダーに置くリンクです。

 

ただ、設定の仕方が悪いのか、スマホでは表示させることが出来ませんでした。

おじさん
わたしは使いみちも無いので問題無いですけど

 

サーチパネルの設定

 

サーチパネルは、ヘッダーにある検索用の虫眼鏡のアイコンです。

 

パソコンもスマホも、思ったより大きく検索スペースが出現します。

 

メニューパネルの設定

 

メニューパネルはヘッダー右にある三本ラインのアイコンです。

 

何を表示させるかは自由で、ウィジェットのメニューパネルで設定できます。

 

スマホはグランドメニューを表示させないとメニューパネルが出てこない仕様のようです。

 

ヘッダーボトムエリアの設定

 

ヘッダーの少し下のスペースがヘッダーボトムエリアです。

 

ヘッダー検索窓の設定

 

ヘッダー下に大きめの検索窓を設置できます。

 

 

注目キーワード」は、カスタマイザーの「基本設定」→「検索機能設定 」で設定できます。

 

パソコンとスマホでは表示の仕方が少し違います。

 

おじさん
注目キーワードの文字色が勝手に白になってしまうので、背景色を変えてみました

 

ヘッダーお知らせの表示設定

 

右から左に流れる文字を設定できます。

 

ここまでのパーツを全部設置していくと、スマホは窮屈になります。

おじさん
断舎離しないといけませんね

 

 

メインカラムエリアの設定

 

メインカラムとは、記事を表示するエリアです。

 

メインカラムフレーム設定

 

背景エリアに画像を設置 すると、記事が読みにくくなります。

 

こういうときは、メインカラムのフレームを選択すれば記事が読みやすくなります。

 

 

スマホでも背景は見えるので、スマホの見え方も考慮して設定してください。

 

ウィジェット設定

 

記事の上と下に好きな枠を設定できます。

 

設定はウィジェットで行ないますが、その枠にタイトルがある場合は、ここでタイトルを装飾できます。

 

 

たとえば、ウィジェットの「投稿ページ下部エリア」に「著作権について」のタイトルの枠を作ってみます。

 

 

これで、記事の文章の下に下の画像のような枠が設置されます。

 

 

サイドカラムエリアの設定

 

サイドカラムエリアもメインカラムエリアと同じ様に設定できます。

 

 

 

フッタートップエリア設定

 

記事を書いたメインカラムエリアの下のスペースです。

 

CTAは「Call To Action」の略で、訪問者に行動を起こすのを呼びかける狙いがあります。

 

本文はそのまま文章を入力しても良いですが、タグが使えるので文字装飾もできます。

 

おじさん
タグがよく分からないときは、記事で一度書いてからテキストモードのタグを貼り付ければ簡単にできます

 

フッターエリアの設定

 

ページの最下部を設定していきます。

 

SNSフォロー背景色の設定

 

SNSのマークの背景色を設定できます。

 

ウィジェット見出しデザイン設定

 

ウィジェットにフッターエリアという項目があるので、左、中央、右を設定できます。

スマホでは、3つの画像は縦並びになります
うさぎ

 

設定が悪かったのか、写真の枠がちょっとおかしくなってしまいました。

 

 

コピーライトの設定

 

ベージの一番下のコピーライト(著作権)の表示を設定できます。

 

ここもタグが使えるので、文字の大きさなどを自由に設定できます。

 

 

固定フッターエリアの設定

 

固定フッターエリアはスマホの最下部です。

 

4つのボタンを配置でき、項目は自由に設定できます。

 

設定は、次のようにします。

  1. 自由設定リンクボタンを選択
  2. タイトルとリンクを入力
  3. アイコン一覧からアイコンのコードをコピペする

 

 

まとめ

 

前回の基本設定編に続き、The・THORの共通エリア設定を解説しました。

 

基本設定に関連する部分もあるので、まとめて設定するのがオススメです。

 

-The・THOR

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.