記事スライダーの設定方法

2021年8月13日

このページではSWELLで簡単に設置できる『記事スライダー』についての設定方法を解説していきます。

記事スライダーとはいわゆる『ピックアップスライダー』などとも呼ばれているもののことになります。
例えば、デモサイト01のトップページに表示されている以下のエリアのことです。

『メインビジュアル』を設置している場合、記事スライダーはその下に表示されます。

目次広告表示エリア

カスタマイザーの起動

記事スライダーに関する設定は、カスタマイザー内の「トップページ」＞「記事スライダー」メニュー内に用意しています。

カスタマイザーの「トップページ」＞「記事スライダー」を開くと、まず最初に「記事スライダーを表示するかどうか 」という設定があります。

ここの設定で「表示する」を選択することで、記事スライダーを簡単に設置することができます。

どの記事をスライダーに表示させるかの条件も指定できます。

について設定できます。

ピックアップしたそれぞれの記事スライドの見た目についても設定できます。

表示するスライド数やスライドを切り替えるスピードなど、スライダーとしての機能に関する設定も可能です。

記事スライダーエリアのタイトル

ここにテキストを指定すると、デモサイト02の「Pick up posts!」ように、記事スライダーの上側にタイトルを表示することができます。

記事スライダー周りの余白設定

記事スライダーの上下・左右の余白量を選択できます。
メインビジュアルとして使用する場合は余白を多めに、メインビジュアルと併用する場合は余白量を少なめに設定するなど、柔軟な設定が可能です。

「スライドの表示枚数」を偶数にして「左右の余白」をなしにすると、ウインドウからはみ出るような表示にできます。

スライダーエリアの文字色・背景色の設定

文字色と背景色も設定可能です。
デフォルト（色の指定なし）では文字色は基本カラー設定の文字色と同じになり、背景色は透明になっています。

背景画像の設定

記事スライダーエリア全体の背景として、画像を指定できます。

さらに、不透明度も設定できますので、「スライダーエリアの背景色」の設定と合わせることでカラーオーバーレイを被せるような効果を背景画像に加えることができます。

この記事が気に入ったら
フォローしてね！

Follow @ddryo_loos

よかったらシェアしてね！