【無料プラグイン】VK Blocks スライダーブロックの使い方を徹底解説（基本編）

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

スライダーブロックの特長

VK Blocksのスライダーブロックの主な特長は以下です。

• ページ内の好きなところにブロックで簡単にスライダーを設置できる
• トップページだけでなく複数のページに利用できる
• ナビゲーションやページネーションの有無を選べる
• スライダーの速度・静止時間を選べる
• 画面サイズに応じて背景画像と高さをそれぞれ指定できる
• 様々なブロックを配置できるのでレイアウトは自由自在

スライダーブロックの使い方

スライダーブロックの設定項目ついては以下のページにまとめていますので、ぜひご覧ください。

https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/block-slider/

それでは、実際にスライダーを作る手順をご紹介します。

画像だけのスライダーを作ってみよう

まずは画像だけのスライダーを作ってみましょう。スライダーの幅はデフォルトの「標準」です。

Lightning トップページに全幅のスライダーを設置してみよう

次に、Lightning デモサイト のトップページにあるような全幅のスライダーを作ってみましょう。

Lightning トップページスライドショーは、スライドアイテムは3枚まで、内容は決められたものしか設定できませんが、スライダーブロックなら自由に作成できるメリットがあります。

画像を複数枚表示してカルーセルにしてみよう

最後に、画像を複数枚表示してカルーセルにしてみましょう。3枚の画像を一度に表示し、1枚ずつスライドしていきます。

方法としては2つあります。

1つめは、スライダーアイテムの背景画像として画像を設定する方法です。以下のように画像と画像の間に隙間はなく、ピタッとくっついた状態となります。

2つめは、スライダーアイテム内に画像ブロックを設置する方法です。以下のように画像と画像の間に隙間ができます。各スライダーアイテム内に余白があるためです。

この記事では、2つめの画像ブロックを設置する方法で解説します。

以上、WordPressにスライドショーを設置できるVK Blocksのスライダーブロックの使い方をご紹介しました。ブロックを組み合わせることでほかにも幅広い使い方ができますので、いろいろお試しください。

なお、以下の記事では、スライダーの実例をたっぷり紹介しています！ぜひご覧ください。

VK Blocks スライダーブロックのパターン9選（実例編）

こちらの記事もよかったらご覧くださいね。

【無料で使える】WordPressプラグイン VK Blocks のスライダーを紹介