Menu
カテゴリー

【SWELL】記事スライダーの設置からカスタマイズ方法までを解説

悩む人

トップページの記事スライダーをカスタマイズする方法が分からないので教えてほしいです。

こういった悩みにお答えします。

本記事で解決できること

  • 記事スライダーを設置するかどうか
  • 記事スライダーで特定の記事を表示させるかどうか
  • 記事の表示設定(タイトルや日付、カテゴリー、著者)
  • スライド設定(枚数、速度、切り替わる間隔、矢印、ページネーション、記事間の余白)
  • 記事スライダーエリアのタイトルを付けるか付けないか
  • 記事スライダーエリアの「上下の余白量」や「左右の幅」設定
  • 記事スライダーエリアの文字・背景色の設定
  • 記事スライダーエリアの背景画像や透過度の設定

本記事を読むことで例えば以下のような記事スライダーを設置できるようになります。

WordPressブログ開設直後にSWELLを有効化した記事スライダーは以下の通りです。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

本記事の内容

SWELLで記事スライダーの設置からカスタマイズ方法までを解説

管理バーから、「カスタマイズ」を選択します。

サイドバーから、「トップページ」を選択します。

「記事スライダー」を選択します。

記事スライダーのカスタマイズ画面が表示されました。

では、ここからカスタマイズ方法について解説していきます。

SWELLで行える記事スライダーのカスタマイズ方法を解説

以下の順で解説してきます。

  • 記事スライダーを設置するかどうか
  • 記事スライダーで特定の記事を表示させるかどうか
  • 記事の表示設定(タイトルや日付、カテゴリー、著者)
  • スライド設定(枚数、速度、切り替わる間隔、矢印、ページネーション、記事間の余白)
  • 記事スライダーエリアのタイトルを付けるか付けないか
  • 記事スライダーエリアの「上下の余白量」や「左右の幅」設定
  • 記事スライダーエリアの文字・背景色の設定
  • 記事スライダーエリアの背景画像や透過度の設定

① 記事スライダーを設置するかどうか

以下の選択肢が用意されています。

  • 設置しない
  • 設置する(デフォルト)

② 記事スライダーで特定の記事を表示させるかどうか

ピックアップ対象で「タグ」をした場合

  • ピックアップ対象のタグ名:「スラッグ」を入力します。
  • 並び順:ランダム・投稿日・更新日・人気順の選択が用意されています。

結論から先に言うと、スラッグと紐づいているカテゴリーが表示されます。

スラッグとは

管理画面メニューから、「投稿」>「タグ」を選択するとタグ一覧が表示されます。

赤枠がスラッグです(例:ウィジェットwidgetがスラッグになります)。

スラッグと紐づいているカテゴリーとは

赤枠のように、先ほどのウィジェット(タグ)のスラッグ(widget)と紐づいているエディター(カテゴリー)が表示されています。

ピックアップ対象で「カテゴリー」を選択した場合

  • ピックアップのタグ名:カテゴリーIDを入力します。
  • 並び順:ランダム・投稿日・更新日・人気順から選択できます。

IDと紐づいたカテゴリーが表示されています。

カテゴリーIDとは

管理画面メニューから、「投稿」>「カテゴリー」を選択するとカテゴリー一覧が表示されます。

赤枠がカテゴリーIDです(例:その他6がカテゴリーIDになります)。

③ 記事の表示設定(タイトルや日付、カテゴリー、著者)

タイトルや日付

以下の選択肢が用意されています。

  • 画像の下側(デフォルト)
  • 画像の上に被せる

カテゴリー表示位置

以下の選択肢が用意されています。

  • 表示しない
  • サムネイル画像の上(デフォルト)
  • タイトルの下

日付の表示設定

以下の選択肢が用意されています。

  • 公開日を表示する
  • 更新日を表示する

著者の表示設定

「著者を表示する」にチェックを入れると著者名が表示されます。

④ スライド設定(枚数、速度、切り替わる間隔、矢印、ページネーション、記事間の余白)

スライダーの枚数設定(PC)

枚数は「1〜6枚」の範囲で設定できます。

スライダーの枚数設定(SP)

枚数は「1〜3枚」の範囲で設定できます。

スライドのアニメーション速度

新幹線に例えると、新幹線が走る速さのことです。

スライドが切り替わる間隔

新幹線に例えると、ホームに停車している長さのことです。

ページネーションを表示する

デフォルトでは、チェックが付いています。

矢印ナビゲーションを表示する

デフォルトでは、チェックが外れています。

スライド間の余白をなくす

デフォルトでは、チェックが外れています。

⑤ 記事スライダーエリアのタイトルを付けるか付けないか

記事スライダーの上部にタイトルが表示されます。

⑥ 記事スライダーエリアの「上下の余白量」や「左右の幅」設定

上下の余白量

以下の選択肢が用意されています。

  • なし
  • 小(デフォルト)

赤枠の余白量が変わります。

左右の幅

以下の選択肢が用意されています。

  • コンテンツ幅い収める
  • フルワイド
  • 左右に少し余白あり

赤枠の余白幅が変わります。

Screenshot

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

文字色

文字色を変更すると、ページネーションも同色になります。

背景色

以下が背景色が適応されるエリアになります。

⑧ 記事スライダーエリアの背景画像や透過度の設定

記事スライダーエリアの背景画像

画像を選択から、背景画像を挿入できます。

背景画像の透過設定

1が透過していない状態で値が小さくなる程、画像が透過されていきます。

今回は以上です。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

※ PS:本記事で「悩みが解決した」「参考になった」方は、是非 (Twitter)でシェアをお願いします!

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
本記事の内容