WordPressにはスライダーを設置できるプラグインはたくさんあります。ですが、海外製で日本語化されていないために使い方がよく分からなかったり、機能面で物足りなさを感じたり、逆に機能が多すぎてかえって不便に感じたり…していませんか？
そこで今回は、VK Blocksのスライダーブロックをご紹介します！以下のようなお悩みをお持ちの方はぜひお試しください。
- 国産のスライダープラグインを探している
- ブロックで簡単に設置できるスライダーってないかな
- 自由度の高いスライダーを探しているけれど見つけられない
VK Blocksのスライダーブロックとは？
VK Blocksは、ブロックエディタに便利なブロックを追加できるプラグインです。
WordPressテーマ「Lightning」の推奨プラグインのため、Lightningと一緒に利用されるケースが多いですが、VK Blocksは他テーマでも利用できます。
VK Blocksには無料版と有料のPro版があります。無料版はWordPress公式ディレクトリに登録されているので、WordPressの管理画面よりインストールして利用できます。
VK Blocksを有効化すると、ブロック一覧にたくさんの便利なブロックが追加されます。スライダーブロックはその中のひとつです。
スライダーブロックはもともとPro版でのみ利用できましたが、VK Blocks 1.47.0以降から無料版でも利用できるようになりました！
VK Blocksについてより詳しくは以下よりご確認ください。
スライダーブロックの特長
VK Blocksのスライダーブロックの主な特長は以下です。
- ページ内の好きなところにブロックで簡単にスライダーを設置できる
- トップページだけでなく複数のページに利用できる
- ナビゲーションやページネーションの有無を選べる
- スライダーの速度・静止時間を選べる
- 画面サイズに応じて背景画像と高さをそれぞれ指定できる
- 様々なブロックを配置できるのでレイアウトは自由自在
スライダーブロックの使い方
スライダーブロックの設定項目ついては以下のページにまとめていますので、ぜひご覧ください。
それでは、実際にスライダーを作る手順をご紹介します。
画像だけのスライダーを作ってみよう
まずは画像だけのスライダーを作ってみましょう。スライダーの幅はデフォルトの「標準」です。
スライダーブロックを挿入する
スライダーブロックを挿入します。
スライダーブロックの構造
スライダーブロックを挿入すると、以下のように親と子のブロックが設置されます。
- スライダー：親ブロック（スライドをまとめるためのブロック）
- スライダーアイテム：子ブロック（1枚目のスライドを作るためのブロック）
スライドの枚数を増やすには子ブロックのスライダーアイテムを追加します。
スライダーアイテムを追加する
「スライダーアイテムを追加」をクリックして必要な数のスライダーアイテムを追加します。
スライダーアイテムを追加する時のポイント
スライダーアイテムをひとつ追加後、「スライダーを選択」をクリックして親ブロックに戻ることで、「スライダーアイテムを追加」が表示される仕組みです。
スライダーの高さを設定する
スライダーの高さを設定します。この後で背景画像を設置するので、ある程度高さがあった方が確認しやすいためです。
後でデバイス毎の高さを確認しながら調整する場合は、この段階では適当に設定してOKです。
スライダーアイテムを選択する
破線部分が子ブロックのスライダーアイテムです。破線内をクリックしてスライダーアイテムを選択します。
背景画像を設定する
スライダーアイテムには背景画像を設定できます。
以下のように背景画像を設定します。
- 透過設定：画像を表示したい場合は0に設定（デフォルトは0.5）
- 背景画像サイズ：カバーに変更
- 「画像を選択」から背景画像を設定
他のスライダーアイテムも同様に背景画像を設定してください。
スライダーの表示を確認する
表示を確認してみましょう。
スライダーを調整する
親ブロックのスライダーにて、デバイス毎の高さ、スライドの静止時間や切り替え時間など、必要に応じて調整してください。
Lightning トップページに全幅のスライダーを設置してみよう
次に、Lightning デモサイト のトップページにあるような全幅のスライダーを作ってみましょう。
Lightning トップページスライドショーは、スライドアイテムは3枚まで、内容は決められたものしか設定できませんが、スライダーブロックなら自由に作成できるメリットがあります。
トップページスライドショーを非表示
トップページのスライドショーを非表示にします。
【外観】>【カスタマイズ】> Lightning トップページスライドショー
- 表示設定：スライドを非表示にする
レイアウトは1カラム / 上下の余白を無しにする
トップページに指定している固定ページの編集画面を開きます。
トップページのレイアウトはデフォルトで1カラムになっています。もし2カラムに変更している場合は1カラムにしてください。
また、固定ページ本文欄の上部と下部には適度な余白が付くようになっていますが、この余白を無しにします。
- Lightning デザイン設定
- 余白設定：サイトコンテントの上下余白を無しにする
- レイアウト設定設定：共通設定または1カラム
スライダーブロックを挿入し全幅に設定する
スライダーブロックを挿入し「全幅」に設定します。
エフェクトはフェードに変更 / 表示時間と切り替え時間を調整
スライダー設定のエフェクトは「フェード」に変更します。
表示時間と切り替え時間をそれぞれ調整してください。
スライダーアイテムに背景画像を設定する
1枚目のスライドを作成します。スライダーアイテムに切り替えます。
背景画像を設置し、背景色と透過設定については適宜設定してください。
スライダーアイテムにブロックを追加する
スライダーアイテム内に以下のブロックを追加し、それぞれお好みで編集してください。
- レスポンシブスペーサー
- 見出し
- 段落
- VK ボタン ※WordPress標準のボタンでもOK
- レスポンシブスペーサー
スライダーアイテムを複製して編集する
2枚目のスライドを作成します。
同じブロックを組み合わせたスライドを増やす時は、スライダーアイテムを複製すると便利です。
複製後、適宜編集してください。
スライダーの表示を確認する
スライダーの表示を確認してみましょう。
モバイルで表示すると背景画像の見せたい部分が切れてしまうときは、モバイル用の画像を用意し、背景画像（モバイル）に設定するとよいでしょう。
パターンを利用する方法もあります
VKパターンライブラリにLightningトップページスライドショーのようなデザインのスライダーを公開しています。このパターンを利用するなら、上記STEP3以降の手順は不要です。STEP1・2の作業後、VKパターンライブラリから該当パターンをコピペし、適宜編集すればOKです。画像は必ず差し替えてください。
画像を複数枚表示してカルーセルにしてみよう
最後に、画像を複数枚表示してカルーセルにしてみましょう。3枚の画像を一度に表示し、1枚ずつスライドしていきます。
方法としては2つあります。
1つめは、スライダーアイテムの背景画像として画像を設定する方法です。以下のように画像と画像の間に隙間はなく、ピタッとくっついた状態となります。
2つめは、スライダーアイテム内に画像ブロックを設置する方法です。以下のように画像と画像の間に隙間ができます。各スライダーアイテム内に余白があるためです。
この記事では、2つめの画像ブロックを設置する方法で解説します。
スライダーブロックを挿入して全幅にする
スライダーブロックを挿入し「全幅」に設定します。
スライダーアイテムを追加する
「スライダーアイテムを追加」をクリックして必要な数のスライダーアイテムを追加します。
スライダーアイテムに画像ブロックを追加する
スライダーアイテムに切り替えます。
各スライダーアイテムに画像ブロックを追加し、それぞれ画像を設定してください。
画像の配置は中央揃えに設定します。
複数の表示設定で枚数を指定する
親ブロックのスライダーに切り替えて、複数の表示設定で枚数を指定します。
- 1度に表示する画像の枚数：3
- 1度の動作で動かす枚数：1
スライダーの表示を確認する
スライダーの表示を確認してみましょう。
ナビゲーションの表示位置は、親ブロックのスライダーの高さで調整しています。ページネーションを非表示にしてもよいでしょう。
以上、WordPressにスライドショーを設置できるVK Blocksのスライダーブロックの使い方をご紹介しました。ブロックを組み合わせることでほかにも幅広い使い方ができますので、いろいろお試しください。
なお、以下の記事では、スライダーの実例をたっぷり紹介しています！ぜひご覧ください。
こちらの記事もよかったらご覧くださいね。
この記事を書いた人
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。