画像と矢印で作業の流れを紹介するレスポンシブ対応のコンテンツの作り方

ヘッドライト磨きを例にして、画像と矢印を使って作業の流れを紹介するレスポンシブ対応のコンテンツの作成手順を解説します。

このやり方は画像の数が4個までなら実用になります。テキストベースのコンテンツなら、内容にもよりますが3個までが限度だと思います。

STEP 1. カラムブロックに画像とアイコンを配置

以下のようにカラムブロックに画像と VK Blocks のアイコンを配置します。

STEP 2. アイコンの設定

アイコンを以下のように設定します。
サイズ：3rem　余白：0px　スタイル：アイコンのみ

STEP 3. カラム幅を設定

アイコンが配置されているカラムの幅を 3rem に設定します。

STEP 4. カラムブロックのブロックの間隔を設定

カラムブロックのブロックの間隔を 10px に設定します。

STEP 5. CSS

アイコンブロックの追加 CSS クラスに arrow-icon と入力して、以下の CSS を追加します。
この CSS により、PC で表示したときには矢印が右向きになります。スマホでは画像が縦に並び、矢印は下向きで表示されます。

@media (min-width: 782px) {
  .arrow-icon {
    transform: rotate(-90deg);
  }
}

アイコンの種類、色、サイズはお好みでどうぞ😊

キャプションを入れたり、ライトボックス効果を設定したりすると、さらにいいですね。

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら…という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら