ビジネスサイトの構築に役立つさまざまなブロックとスタイルおよび機能を追加するブロックライブラリです。
このカテゴリーには22件の記事があります。
単独で使う場合は、「数字が大きくて見やすくていいなぁ...」と喜んで使っていたのですが、複数のスタイルを組み合わせて使ったらアンバランスに感じました。
架空のグルメイベントを想定して、登場するシェフの紹介を VK Blocks のスライダーで作ってみました。
画像ボタンのメニューがスライダーに重なるように CSS でカスタマイズして、工務店サイトをイメージして作ってみました。
VK Blocks のスライダーブロックの背景に動画を使用して、人物をクリップ加工した背景透過画像をスライダーで表示したカスタマイズ例です。
スライダー専用のプラグインよりも多用途・柔軟に使えて、使いやすくて頼りになる VK スライダー、ますます魅力的になりました。
HTML や CSS などの専門的な知識がない方でも、バナー画像の差し替えやバナーの追加・削除・順番の入れ替えなどの作業をブロックエディター画面でかんたんに行っていただけます。
さまざまなブロックを組み合わせて高度で柔軟なレイアウトやデザインを実現できるスライダーブロックをさらに無敵にするカスタマイズです。
VK Blocks の吹き出しブロックのアイコンのサイズはやや控えめなので、大きめになるようにカスタマイズしてみました。
「あ、これいいデザインだな...」と思ったスライドショーがあって、VK Blocks のスライダーブロックをカスタマイズして同じように作ってみました。
VK Blocks のスライダーブロックで作ったスライドショーにサムネイルを表示したカスタマイズ例です。
画像ボタンのメニューがスライダーに重なるように CSS でカスタマイズして、工務店サイトをイメージして作ってみました。
有料版の VK Blocks Pro を使わなくても、組み合わせのアイディア次第でここまでできるんです。
カバーブロックと組み合わせて、CSS でカスタマイズしました。
前後ボタンは画面幅が1200px以上のときだけ外側に表示するようにメディアクエリで調整してあります。
スライドショーやスライダーを全幅で表示すると、フルHDやそれ以上の大きな画面で見たときに「大き過ぎる」と感じてしまう方もいらっしゃると思います。
従来は Pro版 だけで使える機能だったスライダーブロックが 無料版 VK Blocks でも使えるようになりました。
VK ボタンと Hover.css のスタイルがバッティングしたり相性が悪かったりするので調整が必要ですが、調整してしまえば使いやすいです。
VK Blocks 1.40.* にアップデートすると、VK ボタン ブロックのアイコンとインライン文字のサイズ変更ができるようになります。
作業が楽になってきていて、これから CSS のコードを書く機会がだんだん減っていく傾向のように感じています。
VK Blocks のボタンをカスタマイズして、マウスホバー時にアイコンがアニメーション動作するようにしてみました。【続編】