ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

テーマLightningのスライダー比較【無料版vs有料VKスライダー】

ワードプレスのテーマLightningには、無料テーマでもデフォルトでスライダー設定機能があります。

しかし有料版のVK Blocks Proには、便利なVKスライダーがあります。無料版テーマのスライダーとVKスライダーはどのような違いがあるのか気になる方が多いんじゃないでしょうか。

この記事でわかること

テーマLightningデフォルトのスライダーとVK Blocks ProのVKスライダーの違い。

  • 機能面の違いを整理
  • 出来上がるスライダー事例

スライダーの違いをぜひ実感してみてください。

スライダーの機能面の違い

機能面の違いを表にまとめてみました。

デフォルトスライダーVKスライダー
操作の特徴テーマカスタマイザーの中で
画像や設置を入力
ブロックエディターの中でVKスライダーブロックを挿入し各スライダー内に任意のブロックを設置する
表示可能場所トップページの1stビューのみVKスライダーブロックを設置できる場所(任意の固定ページ、投稿、ウィジェットエリア)
スライダー幅全幅のみ標準/全幅
スライダー
高さ
(設定なし)PC、タブレット、モバイル毎に設定可
スライド枚数最大3枚制限なし
スライド時間・スライド静止時間
・スライド切り替え間隔
・スライド静止時間
・スライド切り替え間隔
スライド効果slide/fade/overflow/flipslide/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スライダーでメディアとテキストブロック使用

VKスライダーの各スライドアイテムとして、メディアとテキストブロックを使用しました。テキスト部を画像に少し被せるようにCSSで調整してあります。

上の写真では画像がテキストが左、画像が右配置となっていますが、実際のスライダーでは左右配置を交互にスライドさせています。

VKスライダー事例2:背景画像の中にスライダーを設置

VKスライダーで背景画像の中にスライド設置

全幅の背景画像(VKアウターブロックを使用)の中にカラムブロックで2列のカラムを挿入し、左カラムにテキストとボタン、右カラムにVKスライダーを配置してあります。

VKスライダー事例3:カルーセル風スライダー

VKスライダーでカルーセル風

VKスライダーで同時に3枚のスライド表示設定としてカルーセル風にしました。各スライドにはカバーブロックで画像上に黒のオーバーレイとテキストを重ねています。

モバイルでもカバー画像の縦横比をキープするためにCSSによる調整を加えてあります。

まとめ

VKスライダーを使えば、本当にさまざまなスライダーを表示することができるのが実感して頂けたでしょうか。

表現の自由度が高いので、いろいろなスライダーを作成してみたくなります。

VKスライダーは有料プラグインVK Blocks Proに同梱されていますが、Lightning G3 Pro UnitとセットとなるLightning Pro Packがおすすめです。

Lightning G3 Pro Pack(アップデート期間1年)
Lightning G3 Pro Pack(アップデート期間3年)
Vektor WordPress Solutions

Lightning Pro Unitについての詳細な機能や使い方はこちらの記事をご覧ください。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる