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

2019 12/10
記事スライダーの設定方法
記事上のウィジェットエリア

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

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

デモサイト01の記事スライダー
記事スライダーの例

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

目次前広告表示エリア
目次

カスタマイザーの起動

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

以下では、カスタマイザー上での操作について説明していきます。

記事スライダーに関する設定は、[TOP]記事スライダー設定 というメニューから設定できます。

記事スライダー設定
[TOP] 記事スライダー設定

記事スライダーを表示するかどうかの設定

カスタマイザー の [TOP]記事スライダー設定 を開くと、まず最初に 記事スライダーを表示するかどうか という設定があります。

記事スライダーの表示設定
カスタマイザー > [TOP]記事スライダー設定

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

記事スライダー上部に表示するタイトルの設定

その次に、以下のような設定項目があります。

記事スライダー上に表示するタイトルの設定項目
記事スライダー上に表示するタイトルの設定項目

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

デモサイト02の記事スライダー
デモサイト02の記事スライダー

どの記事をピックアップするかの設定

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

記事のピックアップ方法に関する設定
記事のピックアップ方法に関する設定
  • タグを指定するか・カテゴリーを指定するか
  • タグであればそのタグ名
  • カテゴリーであればそのカテゴリーID
  • 取得する記事の並び順をどうするか

について設定できます。

記事に関する情報の表示設定

また、それぞれの記事をどう見せるかについても表示できます。

記事スライダーの記事の表示設定
記事の表示設定

例えば、デモサイト01の記事スライダーは

・投稿タイトルの表示位置:画像の下側
・カテゴリー表示位置:サムネイル画像の上
・日付の表示設定:チェックなし

デモサイト01の記事スライダー
デモサイト01の記事スライダー

例えば、デモサイト02の記事スライダーは

・投稿タイトルの表示位置:画像の上に被せる
・カテゴリー表示位置:サムネイル画像の上
・日付の表示設定:チェックあり

デモサイト02の記事スライダー
デモサイト02の記事スライダー

スライダーとしての機能設定

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

記事スライダーの機能設定
カスタマイザー > [TOP]記事スライダー設定
  • スライドの表示枚数
  • スライドの遷移スピード
  • スライドが切り替わるまでの間隔
  • 左右の矢印ナビゲーションの有無
  • 下部のページネーションの有無
  • スライド間の余白をつけるかどうか

について設定できます。

その他表示に関する設定

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

記事スライダーの上下・左右の余白量を選択できます。

メインビジュアルとして使用する場合は余白を多めに、メインビジュアルと併用する場合は余白量を少なめに設定するなど、柔軟な設定が可能です。

記事スライダーの余白設定
カスタマイザー > [TOP]記事スライダー設定

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

記事スライダーの背景色・文字色の設定

背景色や文字色ももちろん設定可能です。

記事スライダーの色設定
カスタマイザー > [TOP]記事スライダー設定

背景画像の設定

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

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

記事スライダーの背景画像設定
カスタマイザー > [TOP]記事スライダー設定
記事下のウィジェットエリア

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

目次
目次