【SWELL非公式マニュアル】記事スライダーの設定

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

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

デモサイト01の記事スライダー
SWELL公式サイト:記事スライダーの例

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

目次

\ 初心者におすすめ /

以下の3つを利用すると
最短最速でブログ収益化ができます

【レンタルサーバー】

エックスサーバー

【WordPressテーマ】

SWELL

【SEOツール】

ラッコキーワード

上記のリンクを選択すると、各サービスの詳しい記事に移動します。

カスタマイザーの起動

記事スライダーに関する設定は、カスタマイザー内の「トップページ」>「記事スライダー」メニュー内にあります。

「トップページ」>「メインビジュアル」
SWELL公式サイト:「トップページ」>「メインビジュアル」
「トップページ」>「記事スライダー」
SWELL公式サイト:「トップページ」>「記事スライダー」

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

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

記事スライダーの表示設定
SWELL公式サイト

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

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

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

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

について設定できます。

記事スライドの見た目に関する設定

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

SWELL公式サイト

スライダー機能の設定

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

記事スライダーの機能設定
SWELL公式サイト:記事スライダーの機能設定

その他の設定

記事スライダーの「その他の設定」
SWELL公式サイト:記事スライダーの「その他の設定」
記事スライダーエリアのタイトル

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

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

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

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

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

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

背景画像の設定

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

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

記事スライダーの設置例

デモサイト01の記事スライダー
SWELL公式サイト:デモサイト01の記事スライダー
デモサイト02の記事スライダー
SWELL公式サイト:デモサイト02の記事スライダー

SWELL公式マニュアル:記事スライダーの設定方法

この記事を書いた「ブルー」です。
プログラマー×ブロガー
へなちょこシステムエンジニアが副業ブログで月収10万円を達成。エックスサーバー、SWELL、ラッコキーワードを使った稼げるブログを作る方法を解説します。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次