ホームページ制作事例「阿部農園」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

米粒のライン

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

飾り枠

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

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

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

使用したテーマ

使用した主なプラグイン

弊社制作プラグイン

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス (新潟県南魚沼市)

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

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

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

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

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

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

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

最新の投稿

この著者の記事一覧

• WordPress2024年11月24日ベクトルの公式テクニカルパートナーになりました🎉
• WordPress2024年11月24日観光案内のホームページのデモサイトを追加しました
• WordPress2024年11月5日スターターパックのモバイルナビのボタンが日本語表記に対応しました
• WordPress2024年10月28日スマホでちょうど画面幅いっぱいになるようにフォントサイズを自動調整する