記事スライダーをメインビジュアルにする – SWELLカスタマイズ

こんなSWELLユーザーに読んでほしい！

今回は、SWELLのデフォルト機能でもある「記事スライダー」をメインビジュアルにするカスタマイズです。

メインビジュアルで記事（アイキャッチ）をスライド表示するレイアウトは、メディア・マガジン系のサイトでよくみますよね。

ウチのカスタマイズリンク集でご紹介している、ナガイユカリさんの「tipswork.net」でも記事スライダーをメインビジュアルにされています。

これ、SWELLの標準カスタマイズだけでできちゃうって、SWELLユーザーさんの中でも意外と知られていないのではないかと。

そこで、基本設定のみでできるカスタマイズ方法と、さらにアレンジを加えたカスタマイズをご紹介します。

SWELLの設定だけで、記事スライダーをメインビジュアルにする

まず、デフォルト状態のSWELLはこのようになっています。

ヘッダーの下にメインビジュアル領域、その下に記事スライダーが表示されています。
固定ページでトップページを作らなくても、記事を投稿するだけでこのようなレイアウトになります。

これを、CSSなどでカスタマイズしなくても、SWELLの標準カスタマイズだけで以下のようにすることができます。

この例では、SWELLの「メインビジュアル」機能は使用せず、記事スライダーをメインビジュアルのように表示しています。

「CSSはよくわからない…」という方でも、簡単にカスタマイズすることができますので、以下のカスタマイズ手順を参考にチャレンジしてみてください。

STEP

メインビジュアルを非表示にする

カスタマイザーの「トップページ＞メインビジュアル」で、

• メインビジュアルの表示内容：表示しない

を選択。

STEP

記事スライダーをメインビジュアルのように表示する設定

カスタマイザーの「トップページ＞記事スライダー」で、以下のように設定します。

■記事のピックアップ方法

• ピックアップ対象：タグ

• ピックアップ対象のタグ名：pickup

• 並び順：投稿日

すべての記事の中から「pickup」タグを付けた記事を「投稿日」順に表示します。

ピックアップの対象を「カテゴリー」にしてもかまいませんが、カテゴリーだと管理が柔軟ではないので、「タグ」での表示管理をおススメします。

■記事の表示設定

• タイトルや日付などの表示位置：画像の上に被せる

• カテゴリの表示位置：サムネイル画像の上

• 日付の表示設定：公開日を表示する

タイトルや日付なども画像領域の中に含めました。

タイトルや公開日の表示などは、アイキャッチのデザインにあわせて表示／非表示を決めます。

■スライド設定

• スライダーの枚数設定（PC）：1

• スライダーの枚数設定（SP）：1

• 矢印ナビゲーションを表示する：チェックをはずす

• ページネーションを表示する：チェック

• スライド感の余白をなくす：チェック

スライダーの枚数を「1」にすることで、スライダー領域の幅いっぱいにアイキャッチを表示できます。

矢印ナビゲーションや、ページネーションの表示は、お好みにあわせて設定してください。

スライド間の余白をなくすことで、アイキャッチが隙間なくつながってスライドします。

■その他の表示設定

• 上下の余白量：なし

• 左右の幅：コンテンツ幅に収める

上下の余白量もお好みで設定してください。

左右の幅については、今回の例では「コンテンツ幅に収める」を設定します。

STEP

ヘッダーの調整

カスタマイザーの「ヘッダー」より、

■レイアウト・デザイン設定

• ヘッダー境界線：なし

に設定します。

STEP

完成

SWELLの標準カスタマイズだけで、以下のようなメインビジュアルになります。

記事スライダーをフルワイドにする

上記のカスタマイズでは、「コンテンツ幅」の領域で記事スライドを表示しました。

どうせなら、もうちょっとメインビジュアルっぽくするために、記事スライダーにヘッダーを被せて、記事スライダーの表示幅もフルワイドに広げてみます。

STEP

ヘッダーを記事スライドの上に被せる設定

カスタマイザーの「ヘッダー」で、以下を設定します。

■トップページでの特別設定

• ヘッダーの背景を透明にするかどうか：する（文字色：白）

背景を透明に設定すると、ヘッダー領域は画面幅いっぱいに広がり、記事スライダーの上に被せられます。

■ヘッダーバー設定

• SNSアイコンリストを表示する：チェックをはずす

• コンテンツが空でもボーダーとして表示する：チェックをはずす

■キャッチフレーズ設定

• キャッチフレーズの表示位置：ヘッダーロゴの近くに表示

STEP

記事スライダーを「フルワイド」にする

カスタマイザーの「トップページ＞記事スライダー」で、

■その他の表示設定

• 左右の幅：フルワイド

に設定します。

STEP

完成

これで、記事スライダーの幅が画面幅いっぱいに広がり、ヘッダー領域も記事スライダーの上に被さって、よりメインビジュアルっぽくなったと思います。

記事スライダーをフルスクリーンにする

ここまでは、カスタマイザーからの設定のみでカスタマイズできました。SWELLのポテンシャルの高さがおわかりいただけたと思います。

ここからは、CSSを使用してSWELLのメインビジュアル機能のように、記事スライドをフルスクリーンで表示するカスタマイズです。

.p-postSlider .c-postThumb__figure {
  height: 100vh;
}

CSSをコピペするだけで、フルスクリーンの記事スライダーが表示されます。

さらにカスタマイズでこんなこともできます

さらに、手の込んだカスタマイズを加えると、タイトル部分のレイアウト変更やスライド表示にあわせたアニメーションも可能です。

上記のカスタマイズは、デモサイトで確認できます。

あわせて読みたい

SWELLカスタマイズ事例 – まほろば書店 【まほろば書店】 UPDATE： 2022年3月15日CATEGORY： ブログCOLOR： □■■CLIENT： – VIEW 制作ノート このブログは「メディア・マガジン」系サイトのデザインを意識し、”…

WordPressテーマ「SWELL」

17,600円（税込）

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。ブロックエディター完全対応！

ご購入はこちら

デモサイトを見る