THE THOR(ザ・トール)のレイアウト変更方法(ヘッダー編)

THE THOR(ザ・トール)」のデザイン着せ替え機能を使って、デモサイト04のデザインに設定しましたが、他のデモサイトのような機能も入れたい!色々と変更を加えたい!と思い、色々といじってみました。

色々な設定をどこで操作するのかが分かっていなかったので、なかなか時間がかかりました。

この記事では主に、デモサイト04の設定をどのようにいじって、現在のTOPページに変更できたのかを、ヘッダーに絞ってご説明しようと思います。あとカルーセルスライダーの設定です。

変更するのは、ヘッダーについては赤枠の①〜④の部分になります。

ヘッダーの設定場所は、外観カスタマイズ>共通エリア設定[THE]>ヘッダーエリア設定で行います。

ちなみに、赤枠のところがカルーセルスライダーになります。

当サイトと同じようなレイアウトにしたい。という方がもしいらっしゃれば、ぜひご参考にしていただければ幸いです。

①ロゴの位置設定・②サーチパネルの位置設定

デモサイト04では、サイトのロゴが左にあるのですが、デモサイト01のように真ん中に持ってきたいなーと思ったので、いじってみました。一瞬でできます!これをすると、もれなくサーチパネルの位置が左になります。

ヘッダーエリア設定内のヘッダー設定の■ヘッダーのレイアウトを選択という画像の赤枠の部分を「ダイナミック」にすると変更されます。

③グローバルメニューの設定

グローバルメニューを表示するか選択するには、グローバルメニュー設定の■グローバルメニューを表示するか選択という画像の赤枠部分を変更します。

当サイトでは、スマホではなくてもいいかなと思ったので、「スマホで表示しない」で設定しています。

※何も表示されないという方は、まだメニューの設定をしていないためです。そちらは別の記事でご説明しようかと思います。

④メニューパネルの設定

メニューパネルの表示

メニューパネルを表示するには、メニューパネルの設定の■メニューパネルを表示するか選択という赤枠の部分を「表示(default)」に設定します。

メニューパネル内の見出しの設定

メニューパネル内の見出しのデザインと色をメニューパネルの設定で選ぶことができます。

デザインは、■ウィジットの見出しデザインを選択で、種類は「角丸(default)、シンプルボトムボーダーはみ出すボーダーシンプル(ワイド)内側ボーダー(ワイド)」の6種類から選べます

 

角丸(default)

シンプル

ボトムボーダー

はみ出すボーダー

シンプル(ワイド)

内側ボーダー(ワイド)

色は、■ウィジット見出しの色を指定で変更できるので、お好みの色に設定してみましょう!

※「カテゴリー」という見出しが出ていますが、これはウィジットを設定したためです。最初は真っ白です。そちらについては、ウィジットについての記事で解説できればと思います。

カルーセルスライダーの設定

設定は、TOPページ設定[THE]カルーセルスライダー設定の■カルーセルスライダーを表示するか選択で「表示」「非表示(default)」の選択を行います。

デモページ04では「表示」になっていたので、ここでは「非表示(default)」を選択し、設定します。