テーマLightningのスライダー比較【テーマ標準版 vs VKスライダー】
ワードプレスのテーマLightningには、テーマ本体にデフォルトでスライダー設定機能があります。
しかし有料版のVK Blocks Proには、便利なVKスライダーがあります。無料版テーマのスライダーとVKスライダーはどのような違いがあるのか気になる方が多いんじゃないでしょうか。
本記事は元々無料版スライダーvs有料版スライダーの比較として執筆しましたが、有料版でのみ使用可能だったVKスライダーが、2022年12月7日より無料版VK Blocksでも使えるようになりました。
したがって、単純にテーマデフォルトのスライダー vs VKスライダーの比較、ということでお読みください。
しかし・・・ベクトルさんは気前がいいですね。
テーマLightningデフォルトのスライダーとVK Blocks のVKスライダーの違い。
- 機能面の違いを整理
- 出来上がるスライダー事例
スライダーの違いをぜひ実感してみてください。
スライダーの機能面の違い
機能面の違いを表にまとめてみました。
デフォルトスライダー | VKスライダー | |
---|---|---|
操作の特徴 | テーマカスタマイザーの中で 画像や設置を入力 | ブロックエディターの中でVKスライダーブロックを挿入し各スライダー内に任意のブロックを設置する |
表示可能場所 | トップページの1stビューのみ | VKスライダーブロックを設置できる場所(任意の固定ページ、投稿、ウィジェットエリア) |
スライダー幅 | 全幅のみ | 標準/全幅 |
スライダー 高さ | (設定なし) | PC、タブレット、モバイル毎に設定可 |
スライド枚数 | 最大3枚 | 制限なし |
スライド時間 | ・スライド静止時間 ・スライド切り替え間隔 | ・スライド静止時間 ・スライド切り替え間隔 |
スライド効果 | slide/fade/overflow/flip | slide/fade |
繰り返しON/OFF | 繰り返しのみ | ON/OFF可能 |
自動再生ON/OFF | 自動再生のみ | ON/OFF可能 |
スワイプ時に 自動再生を停止 | (設定なし) | ON/OFF可能 |
ページネーションの種類 | 標準のみ | 標準/非表示/スライドの枚数 |
ナビゲーションの位置 | 中央のみ | 中央/非表示/モバイルでは下部に表示 |
複数の表示設定 | 表示は1枚ずつのみ | 任意の枚数を同時に表示可 (1度の動作で動かす枚数の指定も可能) |
デバイス毎の 非表示設定 | (設定なし) | デバイス毎の非表示設定が可能 (xs、sm、md、lg、xl、xxl) |
各スライド 設定項目 | ・スライドタイトル ・スライドテキスト ・ボタンのテキストとリンク先URL ・タイトル、テキスト、ボタンの位置(左/中央/右) ・スライド上の文字色 ・文字に影をつけるか否か ・スライド画像:PC用、モバイル用別々に可能 ・スライド画像の代替テキスト ・スライド画像にオーバーレイする色と透過率 | 各スライドには任意のブロックを使用するため、自由に設定が可能 |
VKスライダーのメリット
上の表を見ればメリットは一目瞭然なので代表的なところだけをあげます。
表現の自由度
デフォルトスライダーでは各スライド設定項目があらかじめ決まっているのに対し、VKスライダーの場合は任意のブロックを各スライドとして使用するので、表現できる自由度が飛躍的に高いのです。
デフォルトスライダーで表示できるのは画像とその上にタイトルとテキストおよびボタンを1つずつ配置したものですが、同じものはカバーブロックを使えば可能です。設置できるテキスト(段落)やボタンの数にも制限はありません。
VKスライダーのスライドとしてさまざまなブロックを使用することで、デフォルトスライダーでは表現できないものが作成可能です。本記事で後述のスライダー事例で実感してもらえるかと思います。
設置場所の自由度
デフォルトスライダーはトップページの1stビューでしか表示できませんが、VKスライダーはブロックを設置できるところであればどこでも表示できます。トップページはもちろん、投稿記事内や固定ページ・ウィジェットエリアの任意の場所に可能です。
VKスライダーのデメリット
このようにVKスライダーには大きなメリットがありますが、ブロックエディターの操作に慣れていない場合使いこなすのが難しいのが難点です。一部CSSによるカスタマイズが必要な場合もあります。
例えばカバーブロックを使うことができなければ、デフォルトと同様のスライダーは作れません。また『文字に影をつける』という効果はデフォルトの段落ブロックにはないので、CSSを使う必要があります。
したがって、全幅画像3枚のスライドで十分だから手軽にスライダーをトップページに設置したい、という人はデフォルトのスライダーを使ったほうがよいでしょう。
スライダー事例
デモサイトに4種類のスライダーを準備しました。デフォルトのスライダー1つとVKスライダー3種です。
各スライダーの動きは下記それぞれのYouTube動画からも確認できます。
テーマLightningのデフォルトスライダー
全幅モードの画像をFade Inで切り替えをしています。黒のオーバーレイを透過率50%で被せて、白テキストを読みやすくしました。
VKスライダー事例1:メディアとテキストブロックとの組み合わせ
VKスライダーの各スライドアイテムとして、メディアとテキストブロックを使用しました。テキスト部を画像に少し被せるようにCSSで調整してあります。
上の写真では画像がテキストが左、画像が右配置となっていますが、実際のスライダーでは左右配置を交互にスライドさせています。
VKスライダー事例2:背景画像の中にスライダーを設置
全幅の背景画像(VKアウターブロックを使用)の中にカラムブロックで2列のカラムを挿入し、左カラムにテキストとボタン、右カラムにVKスライダーを配置してあります。
VKスライダー事例3:カルーセル風スライダー
VKスライダーで同時に3枚のスライド表示設定としてカルーセル風にしました。各スライドにはカバーブロックで画像上に黒のオーバーレイとテキストを重ねています。
モバイルでもカバー画像の縦横比をキープするためにCSSによる調整を加えてあります。
まとめ
VKスライダーを使えば、本当にさまざまなスライダーを表示することができるのが実感して頂けたでしょうか。
表現の自由度が高いので、いろいろなスライダーを作成してみたくなります。
有料プラグインVK Blocks Proであれば、このほかにも便利なブロックが満載です。VK Blocks ProとLightning有料拡張プラグインLightning G3 Pro UnitがセットになったVektor Passportがおすすめです。
Lightning Pro Unitについての詳細な機能や使い方はこちらの記事をご覧ください。