「THE THOR（ザ・トール）」のデザイン着せ替え機能を使って、デモサイト04のデザインに設定しましたが、他のデモサイトのような機能も入れたい！色々と変更を加えたい！と思い、色々といじってみました。
色々な設定をどこで操作するのかが分かっていなかったので、なかなか時間がかかりました。
この記事では主に、デモサイト04の設定をどのようにいじって、現在のTOPページに変更できたのかを、ヘッダーに絞ってご説明しようと思います。あとカルーセルスライダーの設定です。
変更するのは、ヘッダーについては赤枠の①〜④の部分になります。
ヘッダーの設定場所は、外観＞カスタマイズ＞共通エリア設定[THE]＞ヘッダーエリア設定で行います。
ちなみに、赤枠のところがカルーセルスライダーになります。
当サイトと同じようなレイアウトにしたい。という方がもしいらっしゃれば、ぜひご参考にしていただければ幸いです。
①ロゴの位置設定・②サーチパネルの位置設定
デモサイト04では、サイトのロゴが左にあるのですが、デモサイト01のように真ん中に持ってきたいなーと思ったので、いじってみました。一瞬でできます！これをすると、もれなくサーチパネルの位置が左になります。
ヘッダーエリア設定内のヘッダー設定の■ヘッダーのレイアウトを選択という画像の赤枠の部分を「ダイナミック」にすると変更されます。
③グローバルメニューの設定
グローバルメニューを表示するか選択するには、グローバルメニュー設定の■グローバルメニューを表示するか選択という画像の赤枠部分を変更します。
当サイトでは、スマホではなくてもいいかなと思ったので、「スマホで表示しない」で設定しています。
※何も表示されないという方は、まだメニューの設定をしていないためです。そちらは別の記事でご説明しようかと思います。
④メニューパネルの設定
メニューパネルの表示
メニューパネルを表示するには、メニューパネルの設定の■メニューパネルを表示するか選択という赤枠の部分を「表示(default)」に設定します。
メニューパネル内の見出しの設定
メニューパネル内の見出しのデザインと色をメニューパネルの設定で選ぶことができます。
デザインは、■ウィジットの見出しデザインを選択で、種類は「角丸(default)、シンプル、ボトムボーダー、はみ出すボーダー、シンプル(ワイド)、内側ボーダー(ワイド)」の６種類から選べます！
・角丸(default)
・シンプル
・ボトムボーダー
・はみ出すボーダー
・シンプル(ワイド)
・内側ボーダー(ワイド)
色は、■ウィジット見出しの色を指定で変更できるので、お好みの色に設定してみましょう！
※「カテゴリー」という見出しが出ていますが、これはウィジットを設定したためです。最初は真っ白です。そちらについては、ウィジットについての記事で解説できればと思います。
カルーセルスライダーの設定
設定は、TOPページ設定[THE]＞カルーセルスライダー設定の■カルーセルスライダーを表示するか選択で「表示」「非表示(default)」の選択を行います。
デモページ04では「表示」になっていたので、ここでは「非表示(default)」を選択し、設定します。