【プラグイン】ブロックエディターでカルーセルを簡単に実現。プラグイン「Carousel Slider Block for Gutenberg」の使い方

ブログ運営で「見せたいコンテンツを動きのあるスライダー形式で表示したい」といった場合、「Carousel Slider Block for Gutenberg」（Gutenberg 用プラグイン）は比較的シンプルで使いやすい選択肢です。

以下の手順に沿って、導入からカスタマイズ、実際の運用ポイントまで整理します。

プラグイン概要

「Carousel Slider Block for Gutenberg」は、WordPressのブロックエディタ（Gutenberg）専用に設計された軽量スライダープラグインです。画像やテキスト、ボタンなど、あらゆるブロックをスライド内に自由に配置できるのが特徴で、単なる画像スライダーではなく「ブロック構成のスライド」を直感的に作成できます。追加したスライドはエディタ上でそのまま並べ替えや削除ができ、操作も非常にシンプルです。

また、スライダーとしての動作設定が細かく調整できるのも魅力です。表示枚数、スクロール枚数、アニメーション速度、自動再生、ループ、ドットや矢印ナビゲーションの有無などをブロック設定パネルから簡単に指定できます。さらに、画面幅ごとのレスポンシブ設定にも対応しており、スマートフォンやタブレットでも最適な表示が可能です。

デザイン面では、CSS変数を使って矢印やドットの色・サイズなどをカスタマイズできる柔軟性を備えています。FrostやTwenty Twenty-Fiveなどのシンプルなテーマとの相性も良く、軽快な動作が特徴です。特に、「見出し付きバナー」「おすすめ記事のスライド紹介」など、動きを取り入れたい場面に適したブロック型スライダーとして活用できます。

活用・実践例

• 1スライドごとに画像を単に入れるだけでもOK。
• トップページの「おすすめ記事」セクションにスライダーを設置し、4枚表示（PC）・1枚表示（スマホ）で切り替え。
• 各記事内で「関連投稿スライダー」を設置：画像＋タイトル＋ボタン付きスライドとして、読者の回遊率アップ。
• ブログの「実績紹介」ページで、クライアントロゴ＋説明文をスライド形式で並べて、視覚的なインパクトを出す。

プラグインのインストールと有効化

1. プラグインを検索してインストール、有効化する

• WordPress 管理画面 → プラグイン > 新規追加 を開きます。
• その後、検索ボックスに「Carousel Slider Block」と入力し、対象プラグインを見つけます。
• 見つけたら、インストール → 有効化 を実行します。

2. 「Carousel Slider」ブロックの追加を確認する

有効化後、Gutenberg（ブロックエディタ）で使用可能な「Carousel Slider」ブロックが「デザイン（Design）」カテゴリあるいは「レイアウト系」のブロック群に追加されます。

3. 導入時のポイント・注意点

• プラグイン自体は比較的軽量です。PHP 5.6＋／WordPress 5.8＋が推奨とされています。
• 既存テーマ・子テーマとの相性もチェックしておきましょう。こちらのようなスライダー系のブロックは CSS の影響を受けやすいです。
• 2025/11/09時点で日本語化されていないため、英語等に抵抗のある方は扱いに気をつけて下さい。

カルーセル（スライダー）の作成手順

• 投稿または固定ページを編集（Gutenberg）します。
• ブロック挿入ボタン「＋」をクリックして Carousel Slider ブロックを追加します。
• ブロック内に「スライド（Slide）」となる子ブロックを追加できます。通常は、ブロック内に「＋」ボタンがあり、そこを使って「スライドを追加」します。
• 各スライドには、画像、見出し、テキスト、ボタン、カバー（背景付き）など 任意のブロック を配置できます。つまり「画像だけ」「テキスト＋画像」「完全カスタム」など自由度が高いです。
• スライドの順序を設定できます。ブロック上部に左右の矢印などがあり、スライドを移動（並び替え）できます。
• 不要なスライドは、該当スライドを選択 → 右上の「…（その他オプション）」 → 「スライドを削除」で除去します。

カルーセルブロックの設定項目

1. 基本設定

カルーセル（スライダー）を配置したら、ブロックを選択して右サイドバー（設定パネル）で以下のような項目を設定できます。

• 表示枚数（Slides per view）：画面に同時に表示するスライド数。
• スクロール枚数（Slides to scroll）：移動時に何枚分ずれるか。
• スピード（Slide speed）：切り替えアニメーションの速さ。
• パディング（Slide padding）：スライド間の余白。
• ナビゲーション矢印（Prev/Next arrows）：左右移動ボタンを表示するか。
• ドットナビゲーション（Dots navigation）：下部に点でスライド位置を表示／移動できるか。
• 無限ループ（Infinite loop）：最後のスライドの次に１枚目に戻るか。
• 自動再生（Autoplay）：自動的にスライドが切り替わるか。ONにした場合、切り替わり秒数をミリ秒（ms）単位で指定可能です。
• RTLモード：右から左方向（Right-to-Left）表示を使う言語・サイト向け。

2. Breakpoint Settings

「特定の横幅を下回った場合、表示枚数等の一部設定を変更する」というオプションになります。モバイル向けの表示設定と理解しておけば問題ありません。

• Breakpoint width：指定したピクセル数を下回った場合、以下の設定内容が適用されます（デフォルトは768px）。
• Slides per view at breakpoint：上記で設定した幅未満になった場合に画面に同時に表示するスライド数。
• Slides per group at breakpoint：上記で設定した幅未満になった場合、移動時に何枚分ずれるか。

スタイル調整・カスタマイズ

もっとデザインにこだわりたい場合、テーマの CSS や theme.json 経由でカスタマイズ可能です。特にこのプラグインはバージョン 2 で Swiper.js を採用しており、CSS 変数（カスタムプロパティ）で色やサイズを変更できます。

変数についてはWordPress公式プラグインの当該プラグインのページにおいても記載ございます。

1. 主な CSS 変数例

/* 矢印（ナビゲーション）関連 */
--wp--custom--carousel-block--navigation-size: /* 矢印の大きさ */;
--wp--custom--carousel-block--navigation-sides-offset: /* 端からの距離 */;
--wp--custom--carousel-block--navigation-color: /* 矢印の色 */;
--wp--custom--carousel-block--navigation-alignfull-color: /* 横幅いっぱい表示時の矢印色 */;

/* ドット（ページネーション）関連 */
--wp--custom--carousel-block--pagination-bullet-size: /* ドットのサイズ */;
--wp--custom--carousel-block--pagination-bullet-color: /* 通常ドット色 */;
--wp--custom--carousel-block--pagination-bullet-active-color: /* 選択中ドット色 */;
--wp--custom--carousel-block--pagination-bullet-opacity: /* 通常ドットの不透明度 */;
--wp--custom--carousel-block--pagination-bullet-active-opacity: /* 選択中ドットの不透明度 */;
Code language: CSS (css)

2. 適用方法

FSEテーマの子テーマを使っているのであれば、theme.json の styles → custom → cssVariables に上記変数を追加して調整するのが WordPress 最新の手法です。

もちろん、子テーマの style.css などに記述しても構いません（特に、クラシックテーマの場合はこちらにて対応を進めると良いでしょう）。

3. 注意点

• スライド内部ブロック（見出し・段落・ボタン等）のマージン（余白）がプラグインのスタイルで「ゼロ」になってしまい、間隔が詰まって見えるケースがあります。CSSの競合・勝ち負け等によるデザインの崩れには気をつけておきましょう。
• 編集画面（エディタ）では横スクロールでスライドを確認する UI になっているため、事前に公開画面で「見え方」をチェックするのがおすすめです。

運用時のポイント

• 表示枚数を多くしすぎない：ブログ記事や特集バナーを見せる目的で使うなら、1回の表示で「2～4枚程度」が読みやすさの観点で適しています。
• 自動再生（Autoplay）は慎重に：自動でスライドが変わる設定にするとユーザーが読みづらくなる場合があります。特に文章が入ったスライドでは、「自分で操作できる」設定が安心です。
• スマホでも見やすく調整：レスポンシブ設定でスマホ時の表示枚数を「1枚／1スクロール」にしておくと、スマホ読者向けに使いやすくなります。
• スライドごとのテーマ統一：スライド背景、テキスト色、ボタン色などを統一しておくと、ブログのデザインとしてまとまりが出ます。
• 画像の読み込み最適化：スライドに高画質画像を入れすぎるとページ速度に影響します。テーマの lazy-load 機能を活用したり、画像サイズを適切に縮小・圧縮しておきましょう。
• 再利用ブロックとして保存：同じスライダー構成を別ページでも使いたいなら、Gutenberg のパターン機能を活用してテンプレート化しておくと便利です（非同期がオススメです）。

よくあるトラブルと対処法