阿部農園

弊社が制作させていただいた、南魚沼市の阿部農園様のウェブサイトがリニューアル公開されました。

サイト制作 (カスタマイズ) にあたって特に力を入れたこと

上記のことを中心に、制作させていただいたサイトのカスタマイズ内容について具体的に説明いたします。

投稿リストブロックをカスタマイズ

まず、トップページの新着情報のカスタマイズについてです。

パソコン画面では、以下のように中央にある記事だけ 拡大 ＋ ドロップシャドウ で目立たせる、なんとなくカバーフロー(coverflow)チック😅なデザインで新着情報をカルーセル表示しています。

ちなみに…本物の coverflow エフェクトを使った新着情報表示をご希望の場合は こちらのページ に実装しているようにカスタマイズすることも可能です。

スマホ画面では、以下のように前後の記事をチラ見せするデザインでカルーセル表示しています。

カルーセル表示しているブロックは VK Blocks Pro の 投稿リスト です。

複数のスライダーブロックと非表示設定（画面サイズごとの出し分け）による実装ではなく、スライダーブロックを使わずにひとつの投稿リストブロックだけでカスタマイズしてレスポンシブ対応まで実装していますので、出力されるコード (ブロック構成) がシンプルでメンテナンス性が向上しています。

メディアとテキストブロックをカスタイマイズ

今回使用したデザインスキン VEKUAN に合わせて、縦書き文字を画像に重ねたブロックをトップページに配置しました。

この部分は WordPress コアの メディアとテキストブロック をカスタマイズしてありますので、文言の変更と画像の差し替えは以下のようにブロックエディターでかんたんに行えるようになっています。

カードブロックをカスタマイズ

トップページに置いた、マウスホバーエフェクト付きの以下の4つの画像リンクは VK Blocks Pro のカードブロックをカスタマイズしてあります。

カードブロックですから、もちろん、以下のようにブロックエディターで文言の変更、画像の差し替え、リンク先の変更をかんたんに行うことができます。

グリッドカラムブロックをカスタマイズ

農園のご案内ページ に農作業風景の画像を以下のようにカルーセル表示しています。

この部分は VK Blocks Pro の グリッドカラムブロック をカスタマイズしてありますので、ここもまた、以下のようにブロックエディターで画像(グリッドカラムアイテム)の追加や順番の入れ替え、リンク先の設定など容易に行うことができます。

スライダー専用のプラグインを使うよりも直感的でわかりやすいので、今後制作する他のサイトでも横スクロールするバナーの設置などで大活躍しそうです。

カバーブロック ＋ グリッドカラムブロック

以下の部分は、カバーブロックに入れたグリッドカラムブロックを使って商品画像をレイアウトして、オンラインショップの商品詳細ページにリンクしてありますが、ここはコードによるカスタマイズは特にしていません。ノーコードであっという間にこういうものが作れるって（しかもレスポンシブ対応までバッチリ）、ブロックエディターで便利になったなぁ～って感じます。

シェアボタン (ソーシャルボタン) をカスタマイズ

VK All in One Expansion Unit のシェアボタンをシンプル・コンパクトにカスタマイズしました。

ブロックパターンを用意させていただきました

今後コンテンツの追加作業を苦労なく楽しんで続けていただけるように、ブロックパターンを用意させていただきました。

米粒のライン

見出しの下に米粒のラインをあしらったブロックパターンです。

飾り枠

グループブロックをカスタマイズしたブロックパターンです。

VEKUAN のブロックパターンも大活躍でした

阿部農園様と最初の打ち合わせで VEKUAN のデモサイト「琶句庵」を見ていただいたのですが、すぐに気に入っていただいて、VEKUAN をベースに制作することが決まりました。VEKUAN のブロックパターンにも大変お世話になりました。

使用したテーマ

使用した主なプラグイン

弊社制作プラグイン