SWELLの記事スライダーがおしゃれだから使ってみたい！
今回は記事スライダーの設定について画像付きで詳しく説明しています。
- どの記事をスライドに表示するかの設定
- スライドに表示する情報の設定
- スライドのレイアウト
記事スライダーとは、Topページのメインビジュアル下に表示される以下のエリアです。
今回は、どの記事を表示するかやレイアウトなど自分好みにカスタマイズする方法について解説します。
SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。
画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。
この機能を使って、変更を確認しながら基本設定を進めましょう。
「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。
SWELLをまだ導入していない方は以下の記事が参考になります。
記事スライダー内の記事のピックアップ方法
「トップページ」＞「記事スライダー」に進みます。
記事スライダーを表示するかどうかで、「表示する」を選択します。
記事のピックアップ方法では、どの記事をスライダーに表示させるのか選択できます。
全ての記事を対象にするのであれば、空白のままにします。
カテゴリー：Wordpressダッシュボードの「投稿」＞「カテゴリ」からIDが確認できます。
タグ：Wordpressダッシュボードの「投稿」＞「タグ」からIDが確認できます。
並び順では、スライダーの順番を以下の４つから選択できます。
- ランダム
- 投稿日
- 更新日
- 人気順
新着順にしたい場合は「投稿日」、人気順にしたい場合は「人気順」を選択します。
記事スライダー内に表示する情報を設定する
記事の表示設定では、スライダー上の記事の情報の位置や公開日・更新日の表示の有無などの設定をします。
スライドの速度や間隔を設定する
スライド設定では、表示させる記事の数（PC／SP）、アニメーションの速度や間隔を設定します。
「その他の設定」にあるページネーションとは、スライダーの下に現れる点のことです。
記事スライダーのその他の表示設定
その他の表示設定で、細かい設定ができます。
記事スライダーのエリアタイトル
記事スライダーの上にタイトルが表示されます。
上下の余白量・左右の幅
記事スライダーの上下・左右の余白量を調整します。
記事スライダーエリアの文字色・背景色
画像の上に被せても見えやすいよう文字の色も変えられます。
記事スライダーエリアの背景画像
記事スライダーの背景を以下のように画像にすることもできます。
以上で記事スライダーの設定は終わりです。