【SWELL】ピックアップバナーをヘッダー下に設置する方法

こんな疑問にお答えします。

当サイトでは、WordPressテーマの「SWELL」の様々なカスタマイズ方法を紹介しています。

本記事は、トップページによくある下記の設定方法です。

名称としては「ピックアップバナー」と呼ばれ、トップページに表示できる画像バナー形式のナビゲーションメニューのことを指してます。

本記事では、このピックアップバナーの設定方法を画像付きで分かりやすく解説していきます。

ぜひ参考にしてみてください。

ピックアップバナーの設置方法

まずは、デザインをいじらずにピックアップバナーを設置する方法から紹介していきます。

やり方は、下記の3ステップです。

それでは画像付きで解説していきますね！

以上でピックアップバナーの設置は完了になります。

上記のステップのように、４つのリンクとバナー画像を設定すると下記のように表示されます。

ピックアップバナーのカスタマイズ方法

続いて、下記ではピックアップバナーの細かなレイアウト・デザインのカスタマイズ方法を紹介していきます。

設定できるのは主に下記の５つです。

まずはレイアウト・デザイン設定を開きます。

「外観」→「カスタマイズ」→「トップページ」を開きます。

「ピックアップバナー」を開きます。

こちらの設定から、ピックアップバナーのレイアウトやデザインに関する設定が可能です。

①：バナーレイアウトの設定

②：バナーデザインの設定

ピックアップバナー設置した段階で、通常は上記のような設定になっており、トップページでは下記のように表示されています。

「バナータイトルのデザイン」が「左上に表示」に設定されていると、上記のようにメニューで設定したときのタイトルになっていて、「内側に白線」を「つける」で設定されていると、ピックアップバナーの画像の内側に四角の枠線が表示されています。

これらを下記のように変更して設定していみると

タイトルと白枠の線を消すことができました。

③：ピックアップバナー上下の余白の設定

続いて、ピックアップバナーの上下の余白の設定です。

ピックアップバナー上部にある記事スライダーの表示を無くしたい人は「外観」→「カスタマイズ」→「トップページ」→「記事スライダー」を開き、「設置しない」を選択しましょう。

続いて余白については、「外観」→「カスタマイズ」→「トップページ」→「その他」を開きます。

現段階では、記事スライダーを削除すると、下記のようにお知らせバーとの間に大きめの余白があります。

「その他」を開くと、「コンテンツの上の余白量」を4段階で変更することが可能です

まずは余白「なし」の設定をすると、下記のようになります。

続いて、余白「狭め」と設定すると、下記のようになります。

続いて「標準」。

最後に「広め」。

ぜひ好みの余白にカスタマイズしてみてください。