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

プラグイン概要

「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：上記で設定した幅未満になった場合、移動時に何枚分ずれるか。

Breakpoint Settingsの設定例

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

もっとデザインにこだわりたい場合、テーマの 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: /* 選択中ドットの不透明度 */;

2. 適用方法

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

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

3. 注意点

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

運用時のポイント

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

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

この記事では、ブロックエディタとクラシックエディタの違い、特徴、メリット・デメリットを説明いたします。どちらを選ぶべきか悩んでいる方は、ぜひ参考にしてください。

目次

ブロックエディタ（Gutenberg）とは？

ブロックエディタ（Gutenberg）は、WordPress 5.0（2018年）から標準搭載された新しいエディタです。従来のクラシックエディタ（後述）とは異なり、「ブロック」単位で文章や画像を配置するのが最大の特徴です。

• 文章、見出し、画像、ボタンなど、それぞれが独立した「ブロック」として扱われる
• ドラッグ＆ドロップでレイアウト変更が可能
• コーディングなしで装飾やデザインができる
• 視覚的に直感的な編集が可能

このように、HTMLやCSSの知識がなくても、デザイン性の高い記事が作れるのがブロックエディタの魅力です。

ブロックエディタのメリット

• 直感的な編集ができる：ブロックごとに移動や調整ができるため、レイアウトの変更が簡単です。
• デザインの自由度が高い：カラム（段組み）、背景色、ボタンなどを使い、視覚的に優れた記事を作成できます。
• プラグインなしでも多機能：見出し、リスト、画像ギャラリー、YouTube埋め込みなど、標準機能が充実しています。
• レスポンシブ対応が簡単：スマホ・PCの表示を調整しやすく、モバイルフレンドリーな記事が作成可能です。
• 現在主流となっているエディタ：WordPressの開発方針として、ブロックエディタが標準仕様となっています。

ブロックエディタのデメリット

• 慣れるまで時間がかかる：特にクラシックエディタに慣れている人は、最初は使いづらく感じることがあります。
• シンプルな記事には向かない場合も：文章主体の記事の場合、ブロック単位での操作が煩雑になることがあります。
• 操作感がやや重く、もっさりしている：登場時の頃と比べると、改善に改善を重ねて操作感が良くなってきてはいますが、それでも時折重くなってしまうことがあります。
• テーマやプラグインとの互換性の問題：一部の古いテーマやプラグインが、ブロックエディタに対応していない場合があります。

クラシックエディタとは？

クラシックエディタは、WordPress 5.0以前の標準エディタです。Microsoft Wordのようなシンプルな入力画面が特徴で、主にテキスト中心の記事作成に向いています。

• 文章の入力がスムーズで、シンプルな編集が可能
• HTMLやショートコードを使って装飾を行う
• WordPressの基本的な機能のみを備えたエディタ

現在は「Classic Editor」プラグインをインストールすることで利用できます。

クラシックエディタのメリット

• シンプルで使いやすい：余計な機能がなく、直感的にテキスト入力ができます。 
• 入力スピードが速い：ブロックの操作が不要なため、テキスト主体の記事作成がスムーズです。 
• 動作が軽く、サクサク動く：ブロックエディタよりも処理が軽いため、ストレスなく執筆できます。 
• 古いテーマやプラグインとの互換性が高い：一部のプラグインやテーマは、クラシックエディタの方が動作しやすいことがあります。

クラシックエディタのデメリット

• カスタマイズ性が低い：レイアウトの自由度が低く、デザイン性の高い記事作成には向きません。
• プラグインが必要になる場合がある：ボタンやカラムレイアウトなどの機能を追加するには、プラグインを導入しなければなりません。 
• 将来的にサポートが終了する可能性がある：「Classic Editor」プラグインやテーマ独自の機能によりクラシックエディタを使用することは現状可能です。しかし、今後サポートが打ち切られる可能性があります。

ブロックエディタとクラシックエディタ、どちらを選ぶべき？

どちらのエディタを使うべきかは、記事の目的や作業スタイルによって異なります。

ブロックエディタが向いている人

• デザイン性の高い記事を作りたい（カラムやボタンを活用したい）
• 長期的にWordPressを運用する予定がある（最新の機能を活用したい）
• 視覚的な編集をしたい（コーディング不要でレイアウトを調整したい）

クラシックエディタが向いている人

• シンプルな文章中心の記事をスピーディーに書きたい
• 旧来のWordPressの操作に慣れていて変更したくない
• 古いテーマやプラグインを使い続けたい

比較表

まとめ

• デザイン性の高い記事を作りたいなら「ブロックエディタ」
• シンプルな執筆をしたいなら「クラシックエディタ」

ただし、今後WordPressはブロックエディタを中心に開発が進むため、長期的な運用を考えるならブロックエディタに慣れておくのがベストです。