このパターンではテーマ「Lightning ( G3 / theme.json )」「X-T9」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。

このパターンではプラグイン「VK Blocks」を使用しています。

画像素材について

パターンで使用している画像をそのまま使いたい場合は下記画像をダウンロードして差し替えてください。

設定のコツ

  • 辺久井農園について
    ずらしたベージュの背景はグループブロックの背景のグラデーションで調整しています
    グループブロックのなかにカラムブロックを設置し、農園のリードと写真を置いています
    モバイル時に画像を上に表示するために、[カラムの方向] を逆 にしています

    背景のグラデーションについて詳細は、下の動画を参照してください
  • 辺久井農園の歴史
    上記の応用です
    グループブロックに背景画像を設定し、そさらに白いグラーデーション背景のグループブロックを重ねることで、画像の右が切れたように見えます
    グループブロックのなかにカラムブロックを設置し、右カラムに画像が正方形になるように配置しています
    左カラムは空ですので、モバイル時には無視されます
  • 辺久井農園4つのこだわり
    グループブロックの [グリッド] を使っています
    丸い画像は、画像ブロックのスタイルで [正円] 選ぶことで表示できます
  • アクセス
    交通案内図はカラムブロックを使っています
    「名古屋駅」など駅名を角丸のグループで囲んでいます
    グループの上下余白と、駅名テキストの行の高さ調整することで高さを合わせ、バランスよく表示します
    電車やバスのマークはアイコンブロックです

関連するパターン

簡単シンプルタグいらず

すぐにサイト状況を表示する
便利なプラグイン