VK Blocks のスライダーでスライドショーを作るやり方【カバーブロック】
↑ のスライダーはスライダーアイテムにカバーブロックを入れてあります。
スライドの高さを指定する方法
スライダーブロックで高さの指定をしない(指定してあればリセットする)。
カバーブロックの カバー画像の最小の高さ で指定する。 ※このページのスライダーでは 40vw の指定になっています。
カバーブロックを使うメリット
- 1. 焦点ピッカーを使って人物の顔が画面の外に隠れないようにできる。
これはすばらしい機能です。→ 焦点ピッカーの使い方はこちら - 2. 全画面表示のスライドショーを作ることができる。
カバーブロックの高さ指定を 100vh にするだけでかんたんです。→ 全画面表示にしたスライドショーはこちら - 3. PC・タブレット・モバイルの画像を別々に用意する必要がない。
PC 用の画像だけ用意すれば、WordPress が画面幅ごとに最適な画像を作って表示してくれるので楽ができます。 - 4. 画像に文字を重ねるのがかんたん
- 5. 画像に色を被せるのがかんたん
カバーブロックを使うデメリット
- 1. PC・タブレット・モバイルでスライダーの高さを別々に指定できない
焦点ピッカーのメリットを生かすためにはスライダーの高さを指定しないことが必要です。その結果、パソコンでもスマホでもスライダーの高さが同じようになってしまいます。(スマホでは高くなり過ぎるかも...) ※カバーブロックの高さを vw または vh で指定すればある程度は対応可能です。
こんな使い方に向く
- 人物をメインに配置したいスライドショー