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

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

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

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

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

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

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

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

グリッドカラムブロックをカルーセル表示したカスタマイズ例

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

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

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

グリッドカラムブロックをカルーセル表示したカスタマイズ例

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

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

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

いろいろ応用できます

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

お客様の声

○○ ○○ 様

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

○○○ ○ 様

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

○○ ○○○ 様

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

○ ○○○ 様

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

○○ ○○ 様

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

○○○ ○○○ 様

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

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

関連記事

VK Blocks Pro の投稿リストをカルーセル表示したカスタマイズ例【完結編】 | 魚沼情報サービス

スライダーを使わず、Swiper を使ってひとつの投稿リストブロックだけでカスタマイズしてレスポンシブ対応まで実装していますので、出力されるコードがとてもシンプルで、…

投稿リストブロックの新着記事を全幅でカルーセル表示するカスタマイズ

投稿リストブロック・選択投稿リストブロックで表示した新着記事を全幅のカルーセルで表示しています。

【カスタマイズ例】スライダーで新着投稿をカルーセル表示

VK Blocks Pro のスライダーを使った、最新6件の新着投稿を表示するカルーセルのカスタマイズ例です。

VK Blocks Pro のスライダーで新着投稿をカルーセル表示するやり方

スライダーアイテムに投稿リストを入れて、投稿リストの表示件数を 1 にしたら、オフセット数 を先頭から 0, 1, 2, 3 … と増やします。

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

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

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

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

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

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

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

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

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

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

Lightning G3 Pro Unit は Lightning G3 Pro Pack というパッケージで VK Blocks Pro とセットで販売されています(単体販売はされていません)。このパッケージを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひこのパッケージをお使いになることをおすすめします。