【SWELL】ピックアップバナーの作り方から設置方法までを解説

こういった悩みにお答えします。

今回の記事を読むことで以下のようなピックアップバナーを設置できるようになります。

【SWELL】ピックアップバナーの作り方から設置方法までを解説

ピックアップバナーの作成および設置

管理画面メニューから、「外観」＞「メニュー」を選択します。

メニューから、以下の設定を行い「メニューを作成」をクリックします。

メニュー項目を追加から、追加したい記事を選択後「メニューに追加」をクリックします。

メニュー構造にメニュー項目が追加された後「メニューを保存」をクリックします。

これでピックアップバナーの設置は完了です。次に、表示崩れが起きているので修正していきます。

表示崩れ対策

対策①：異なったサイズの画像でも表示崩れが起きないようにする

管理画面メニューの「外観」＞「カスタマイズ」＞「追加CSS」に以下コードをコピペします。

.c-bannerLink {
	height: 100%;
}
.c-bannerLink__figure {
	height: 100%;
}
.c-bannerLink__img {
	height: 100%;
	object-fit: cover;
}

コードをコピペ後「公開」をクリックします。

これで表示崩れが改善されます。

対策②：同じサイズの画像を用意する

ピックアップバナーのメニュー項目（赤枠）を開きます。

「説明」に画像のURLを貼り付けます。

「説明」がない場合は、表示オプションを開き「説明」にチェックを入れると表示されます。

画像のURLは、管理画面メニューの「メディア」＞「ライブラリ」から画像を選択後、URLをクリップボードにコピーをクリックします。

全てのメニュー項目に画像のURLを貼り付けた後「メニューを保存」をクリックします。

これで表示崩れは起きません。

ピックアップバナーをカスタマイズ

管理画面メニューの「外観」＞「カスタマイズ」＞「トップページ」＞「ピックアップバナー」からカスタマイズが行えます。

今回は以上です。