THE THOR(ザ・トール)のサイドカラム(サイドバー)およびメニューパネルの設定

 

THE THOR(ザ・トール)のサイドカラムエリア(サイドバーエリアおよび追従サイドバーエリア)の設定と、ヘッダーにあるメニューパネルのウィジェットの設定についてもご紹介します。

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

 

WordPressメニューで「外観」、「カスタマイズ」を選択して、THE THORメニューを表示させます。

THETHORメニューの「共通エリア設定」、「サイドカラムエリア設定」を選択します。

 

サイドカラムのフレーム設定

サイドカラムエリアのフレームを「無し」、「シャドウフレーム」、「ボーダーフレーム」の中から設定します。

 

フレームが「無し」の場合

フレームが無いので、サイドカラムエリアはそのまま背景色となります。

 

フレームが「シャドウフレーム」の場合

サイドカラムエリアが影のついた線で囲われます。

 

フレームが「ボーダーフレーム」の場合

サイドカラムエリアが線で囲われます。

各ウィジェットフレーム設定

サイドカラムエリアの中の、各ウィジェットのフレーム設定を行います。「無し」、「シャドウフレーム」、「ボーダーフレーム」の中から設定します。

 

 

フレームが「無し」の場合

フレームが無いので、各ウィジェットはサイドカラムエリアの背景色となります。

 

フレームが「シャドウフレーム」の場合

各ウィジェットが影のついた線で囲われます。

 

フレームが「ボーダーフレーム」の場合

各ウィジェットが線で囲われます。

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

ウィジェット見出しのデザインと色を設定します。

 

 

デザインについては、以下でサンプルを見ることができます。

 

THE THOR(ザ・トール)でサイト共通のヘッダーエリアとヘッダーボトムエリアの設定手順
THE THOR(ザ・トール)で、ヘッダーエリアとヘッダーボトムエリアのデザインを設定します。このエリアはサイト共通で表示される部分になります。この設定手順をご紹介します。

サイドカラムエリアへのウィジェット追加・設定

サイドカラムエリアの全体設定は前項でTHE THORのメニューから設定しました。

ここでは、サイドカラムエリアに表示させたいウィジェットを設定する方法をご紹介していきます。

WordPressメニューの「外観」、「ウィジェット」を選択します。

 

ウィジェットの概要

以下のような画面が表示されます。

左側が利用できるウィジェットで、右側がサイトの各エリアになります。

今回対象のサイドカラムエリアは「サイドバーエリア」と「追従サイドバーエリア」に該当します。「追従サイドバーエリア」は「サイドバーエリア」の下に表示され、スクロールをさらに下にしても、固定位置で表示されるエリアです。

 

 

利用できるウィジェットはいろいろなものが準備されています。WordPress提供のウィジェットやTHE THOR提供のウィジェットがあります。頭に「THE」と付いているものが
THE THOR提供のウィジェットになります。

 

ウィジェットの追加・設定方法

ウィジェットをサイドバーエリアまたは追従サイドバーエリアに追加する方法には、以下の方法があります。

 

ドラッグ&ドロップでの追加

設定したいウィジェットを、サイドバーエリアにドラッグ&ドロップすることによって簡単に追加することができます。

※ドラッグ&ドロップはマウスなどで選択したものをクリックした状態のまま目的の場所まで移動し、クリックを離すイメージです。

 

ウィジェットからの追加

設定したいウィジェット(例ではAd Inserter)をクリックすると、以下のように展開されます。追加したいエリアを選択し、「ウィジェットを追加」をクリックすると追加できます。

 

ウィジェットの設定変更

 

サイドバーエリアおよびサイドバー追従エリアをクリックすると展開し、設定されたウィジェットが表示されます。

 

ウィジェットの順番を変えたい場合

ウィジェットをドラッグ&ドロップすることによって、順番を変えることができます。

 

 

ウィジェットを削除したい場合

削除したいウィジェットをクリックすると、以下のように詳細が表示されます。左下に「削除」がありますので、そこをクリックすることで削除できます。

メニューパネルへのウィジェット追加・設定

 

メニューパネルへウィジェットを追加・設定する方法も、サイドカラムエリアへの追加・設定と同じです。

メニューパネルのフレーム等の設定は、以下をご参照ください。上の方で内部リンクした場所とまったく同じ箇所になります。

 https://manbo2525.com/the-thor-common-header#toc6

今回は以上になります。お疲れさまでした。

コメント

タイトルとURLをコピーしました