VK パターンライブラリ に新しいブロックパターン「流れるような3つの特徴」が追加されました。
カラムブロックの枠線とネガティブマージンを使って、流れるようなレイアウトを作ってあります。
こういうアイディアに「なるほど～、そういうこともできるのか～」と刺激を受けて、いつもブロックの組み合わせの参考にさせていただいています。
この流れるようなレイアウトに動きを加えて、さらに流れるかんじを出してみました。
ネガティブマージンを真似して矢印アイコンの位置を調整して、CSS のアニメーションを使って動かしています。
1
いますぐ
ご相談ください
企画から制作、公開までを効率化して最短納期で対応します。
テンプレート化とモジュール設計で工数とコストを抑えつつ、動作確認や品質管理を徹底。リリース直前のチェックや公開後の軽微修正までワンストップで対応するため、オープンやキャンペーンに間に合わせたい案件に最適です。
2
成果を
大切にします
訪問者の行動を起点にしたUX設計と導線の最適化で、問い合わせや予約など具体的な成果につなげます。SEO対策、コンテンツ設計、A/Bテスト、アクセス解析を組み合わせて仮説検証を繰り返し、KPI達成に向けた改善施策を継続的に行います。
3
安心のサポート
をご用意
公開後も安心して任せられる保守・運用サービスを提供します。CMS操作研修、定期バックアップ、セキュリティ更新、コンテンツ追加、広告運用支援まで幅広く対応。月次レポートで効果を見える化し、数値に基づく提案で長期的な成果創出を支えます。
どうやって動きを加えたかというと…
図のようにブロックを追加して、以下の CSS を書いています。
arrows-right / arrows-left は横並びブロックに設定した 追加 CSS クラス です。
.arrows-right i {
transition: all .3s ease;
animation: arrow_move_right 2.0s ease-in-out infinite, arrow_show_hide 2.0s ease-out infinite;
}
.arrows-left i {
transition: all .3s ease;
animation: arrow_move_left 2.0s ease-in-out infinite, arrow_show_hide 2.0s ease-out infinite;
}
@keyframes arrow_move_right {
0%{padding-right: 1.0em; padding-left: 0;}
100%{padding-right: 0; padding-left: 1.0em;}
}
@keyframes arrow_move_left {
0%{padding-left: 1.0em; padding-right: 0;}
100%{padding-left: 0; padding-right: 1.0em;}
}
@keyframes arrow_show_hide{
0%{opacity:0}
50%{opacity:1;}
80%{opacity:0.9;}
100%{opacity:0;}
}
投稿者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら…という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress2026年3月2日WordPress のギャラリーブロックをカスタマイズした例
VK Blocks2026年2月20日VK Blocks のアイコンブロックで作った祝メダル獲得メッセージ
X-T92026年1月27日スクロール時に一部のブロックを固定(追従)するノーコードの実装例
X-T92026年1月13日アーカイブページをアコーディオン仕様にカスタマイズした例
