THE THOR(ザ・トール)でメイン・サイドエリアの設定方法【画像付き】


こんにちは、あゆりです。

今回は、THE THOR(ザ・トール)でのメインエリアとサイドエリアの設定方法を画像付きで解説します。

・THE THORでのメインカラムエリアの設定方法
・THE THORでのサイドカラムエリアの設定方法


メインカラムとサイドカラムの設定では、主にデザインを設定することができます。

少し変更が分かりにくい部分もありますが、解説通りに順番に設定していけば問題ないと思うので参考にしてみてくださいね。

それではさっそく解説していきます。


Advertising

THE THORでのメインカラムエリアの設定方法


まずは、メインカラムエリアの設定について解説していきます。

①「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「メインカラムエリア設定」に進む


「メインカラムフレーム設定」と「ウィジェット設定」の2種類のデザイン設定を行うことができます。
順番に説明していきますね。


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


ここでは、メインカラムエリアの縁取りの設定をします。
選択値は上記画像にあるように、「無し(default)」「シャドウフレーム」「ボーダーフレーム」の3つです。

 

無し(default)の表示例

 

メインカラムエリアの背景には何も表示されなく、直接カテゴリ名が表示されます。

シャドウフレームの表示例

 

メインカラムエリアの背景の縁にわずかにシャドウがかかっています。

ボーダーフレームの表示例

 

メインエリアカラムエリアの背景の縁がボーダーで囲まれています。

シャドウフレームとボーダーフレームの違いが分かりにくいと思いますが、この辺は好みで良いと思います。

以上で、メインカラムフレーム設定は完了です。


ウィジェット設定


次にウィジェット設定ですが、ここがわりと難しいと言いますかどこが変更されているのか分かりづらいので説明します。

そもそもウィジェットとは、簡単に言うとブログのパーツ(部品)のことです。
なので、メインカラムエリアにウィジェットを設置していなければここの設定はしなくても大丈夫です。
ちなみに当ブログではしていません。

一応設定したい方もいると思いので解説していきます。


「外観」→「ウィジェット」に進み、上記画像の赤枠で囲っている箇所がメインカラムエリアです。
表示したいウィジェットを、「トップページ上部エリア」、「トップページ下部エリア」、「投稿ページ上部エリア」、「投稿ページ下部エリア」のいずれかに設定することで、ウィジェット設定でのデザインを変更することができます。

ここでは一旦「トップページ上部エリア」に「[THE]絞込検索」を設定してみました。
それではウィジェットのデザイン変更をしていきましょう。


まずは、「各ウィジェットのフレームを選択」ですが、こちらはメインカラムフレームと同じなので好みのフレームを設定しましょう。

設定ができたら、次に「ウィジェットの見出しデザインを選択」でお好きな見出しを選択しましょう。


選択値は、上記画像にあるように「角丸(default)」、「シンプル」、「ボトムボーダー」、「はみ出すボーダー」、「シンプル(ワイド)」、「内側ボーダー(ワイド)」の6つです。


表示例はこんな感じです。
こちらもお好きなデザインを設定しましょう。

最後は、「ウィジェット見出しの色を指定」でお好きな見出しの色を選択しましょう。

以上で、ウィジェットの設定は完了です。

メインカラムエリア設定がすべて完了したら、最後に忘れずに「公開」ボタンをクリックしましょう。


THE THORでのサイドカラムエリアの設定方法


それでは次に、サイドカラムエリアの設定について解説していきます。

①「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「サイドカラムエリア設定」に進む


設定項目と実際のサイドエリア表示例で色分けしてみたので、確認してみてください。

分かりづらいかもしれないですが、色々試してみて自分の好みのデザインに設定してみてくださいね。

以上でサイドカラムエリアの設定は完了です。

最後に忘れずに「公開」ボタンをクリックしましょう。


スポンサードサーチ

おわりに


無事にメインエリアとサイドエリアのデザイン設定はできましたか?
かなり細かい設定だったと思いますが、自分が必要だと思った箇所は設定しておきましょう。

さて、メイン・サイドエリアのデザイン設定が完了したら、フッターエリアの設定をしていきましょう。

というわけで今回は以上です。

Advertising