カルーセル、どうやって作ってる？

WordPress でこのようなカルーセル ↑ を実装するときって、「○○○○ Slider」とか、そっち系のプラグインを使う人が多いと思います。

カルーセルだけのためにプラグインを増やしたくないよ～、って思って、カスタム HTML ブロック を使って作る場合もよくあります。(私はだいたいこれ)
それだと HTML を直接扱うことに慣れていないお客様にとって、スライドの追加・変更はハードルが高い作業になってしまいます。
（作業依頼してもらえるならありがたい、って考えもありますが...）

VK Blocks Pro のスライダーブロックでもカルーセル動作ができますが、レスポンシブ対応するためには複数のスライダーブロックと非表示設定（画面幅ごとの出し分け）による実装が必要で、出力されるコード（ブロック）が冗長になり、スライドを差し替えるときなどのメンテナンス作業の効率が悪くなってしまいます。

前述のプラグインを使って実装する場合でも、スライドの追加・変更は専用の画面を使っての作業になりますので、その操作に慣れていないお客様にとっての使い勝手は必ずしもよくないです。

2023.11.10 追記

VK Blocks のスライダーブロックで PC・タブレット・モバイルに一度に表示するスライドアイテムの数を別々に設定できるようになっていますので（もうかなり前の今年3月にその機能がスライダーブロックに追加されています）、この記事に書いたグリッドカラムブロックを使うやり方はもう必要ないかもしれません。

スライダーブロックでできることがかなり増えましたので、Swiper のオプションを細かく指定したい場合だけ、この記事のやり方が必要になると思います。

ということで、（VK Blocks Pro ユーザー限定の）カルーセルの決定版です

上記の問題を解決して、お客様が容易にスライドの追加・変更を行っていただけるように、VK Blocks Pro のグリッドカラムブロックをカスタマイズしてこのページの先頭に表示されているカルーセルを作りました。

ブロック構成は以下の通りとてもシンプルで、ひとつのグリッドカラムブロックだけを使ってカスタマイズしてレスポンシブ対応まで組み込んであります。

具体的には、スライド枚数を以下のように設定してあります。
また、アクティブなスライドを中央に配置して、前後（左端と右端）のスライドをチラ見せするデザインになっています。

スマホ	1.5枚
タブレット	3.5枚
パソコン	4.0枚

操作画面はこんなかんじ（ふつうのブロックエディター）です

編集画面は、ブロックエディターにふつうのグリッドカラムブロックが配置されているものです。

そのため、編集作業は以下のような直感的でわかりやすい操作になっています。

作業画面がコンパクトで、カルーセルの全体構成をひとめで把握できる。
グリッドカラムアイテムの追加(複製)・変更によりスライドを追加・変更できる。
スライドの並び順の変更はマウスでクリックするだけ。
画像の置換もいつもと同じ操作でオッケーです。

いろいろ応用できます

グリッドカラムアイテム内でさまざまなブロックを組み合わせることができますので、例えば以下のような使い方もできます。

お客様の声

○○ ○○ 様

カスタマイズでお世話になりました。期待以上の出来上がりで満足しています。ありがとうございました。

○○○ ○ 様

VK Blocks Pro、便利なブロックが盛りだくさんですね。いつも使っています。

○○ ○○○ 様

使いやすいテーマ、プラグインを開発していただき、ありがとうございます。これからも期待しています。

○ ○○○ 様

すてきなお店のホームページができました。自分で作ったと思えない出来映えにちょっと感動...

○○ ○○ 様

勉強会、フォーラムではいろいろと教えていただき、感謝しています。もっと勉強してスキルアップを目指します。

○○○ ○○○ 様

VK パターンライブラリー、コンテンツ制作が捗り、ありがたいです。ブロックの使い方のアイディアもステキです。

弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

魚沼情報サービスへのお問い合わせ

Swiper によるスライダー～エフェクト coverflow | Lightning Pro + Origin II のカスタマイズ、TIPS (1)

http://lightning.hp2.work

サイト運営者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

今よりもっといい WordPress サイトにしたいなら Vektor Passport がおすすめ

ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています（個々の単体販売はされていません）。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。

ライセンス購入はこちら