ホームページ制作事例「阿部農園」
弊社が制作させていただいた、南魚沼市の阿部農園様のウェブサイトがリニューアル公開されました。
サイト制作 (カスタマイズ) にあたって特に力を入れたこと
お客様がHTML コードを扱わずに、可能な限りすべてのコンテンツ編集作業をご自身でビジュアルエディター(ブロックエディター)を使って楽に (≒楽しく) 行えること
上記のことを中心に、制作させていただいたサイトのカスタマイズ内容について具体的に説明いたします。
投稿リストブロックをカスタマイズ
まず、トップページの新着情報のカスタマイズについてです。
パソコン画面では、以下のように中央にある記事だけ 拡大 + ドロップシャドウ で目立たせる、なんとなくカバーフロー(coverflow)チック😅なデザインで新着情報をカルーセル表示しています。
![トップページの新着情報 (パソコン)](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-1.jpg)
ちなみに…本物の coverflow エフェクトを使った新着情報表示をご希望の場合は こちらのページ に実装しているようにカスタマイズすることも可能です。
スマホ画面では、以下のように前後の記事をチラ見せするデザインでカルーセル表示しています。
![トップページの新着情報 (パソコン)](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-2.jpg)
カルーセル表示しているブロックは VK Blocks Pro の 投稿リスト です。
複数のスライダーブロックと非表示設定(画面サイズごとの出し分け)による実装ではなく、スライダーブロックを使わずにひとつの投稿リストブロックだけでカスタマイズしてレスポンシブ対応まで実装していますので、出力されるコード (ブロック構成) がシンプルでメンテナンス性が向上しています。
メディアとテキストブロックをカスタイマイズ
今回使用したデザインスキン VEKUAN に合わせて、縦書き文字を画像に重ねたブロックをトップページに配置しました。
![メディアとテキストブロックをカスタイマイズ](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-3.jpg)
この部分は WordPress コアの メディアとテキストブロック をカスタマイズしてありますので、文言の変更と画像の差し替えは以下のようにブロックエディターでかんたんに行えるようになっています。
カードブロックをカスタマイズ
トップページに置いた、マウスホバーエフェクト付きの以下の4つの画像リンクは VK Blocks Pro のカードブロックをカスタマイズしてあります。
![カードブロックをカスタマイズ](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-5.jpg)
カードブロックですから、もちろん、以下のようにブロックエディターで文言の変更、画像の差し替え、リンク先の変更をかんたんに行うことができます。
![カードブロックですので、ブロックエディターで文言の変更、画像の差し替え、リンク先の変更をかんたんに行うことができます。](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-6.jpg)
グリッドカラムブロックをカスタマイズ
農園のご案内ページ に農作業風景の画像を以下のようにカルーセル表示しています。
![グリッドカラムブロックをカスタマイズ](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-11.jpg)
この部分は VK Blocks Pro の グリッドカラムブロック をカスタマイズしてありますので、ここもまた、以下のようにブロックエディターで画像(グリッドカラムアイテム)の追加や順番の入れ替え、リンク先の設定など容易に行うことができます。
スライダー専用のプラグインを使うよりも直感的でわかりやすいので、今後制作する他のサイトでも横スクロールするバナーの設置などで大活躍しそうです。
![VK Blocks Pro の グリッドカラムブロック をカスタマイズしてありますので、ブロックエディターで容易に編集できます。](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-10.jpg)
カバーブロック + グリッドカラムブロック
以下の部分は、カバーブロックに入れたグリッドカラムブロックを使って商品画像をレイアウトして、オンラインショップの商品詳細ページにリンクしてありますが、ここはコードによるカスタマイズは特にしていません。ノーコードであっという間にこういうものが作れるって(しかもレスポンシブ対応までバッチリ)、ブロックエディターで便利になったなぁ~って感じます。
![グリッドカラムブロックを使って商品画像をレイアウト](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-7.jpg)
シェアボタン (ソーシャルボタン) をカスタマイズ
VK All in One Expansion Unit のシェアボタンをシンプル・コンパクトにカスタマイズしました。
![シェアボタン (ソーシャルボタン) をカスタマイズ](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-8.png)
ブロックパターンを用意させていただきました
今後コンテンツの追加作業を苦労なく楽しんで続けていただけるように、ブロックパターンを用意させていただきました。
米粒のライン
見出しの下に米粒のラインをあしらったブロックパターンです。
![見出しの下に米粒のラインをあしらったブロックパターン](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-13.png)
飾り枠
グループブロックをカスタマイズしたブロックパターンです。
![グループブロックをカスタマイズしたブロックパターン](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-14.png)
VEKUAN のブロックパターンも大活躍でした
阿部農園様と最初の打ち合わせで VEKUAN のデモサイト「琶句庵」を見ていただいたのですが、すぐに気に入っていただいて、VEKUAN をベースに制作することが決まりました。VEKUAN のブロックパターンにも大変お世話になりました。
![VEKUAN のブロックパターンにも大変お世話になりました。](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-12.png)
使用したテーマ
- Lightning
使用した主なプラグイン
- Lightning G3 Pro Unit
- Lightning G3 VEKUAN
- VK All in One Expansion Unit
- VK Block Patterns
- VK Blocks Pro
- Contact Form 7
- Responsive Lightbox & Gallery
弊社制作プラグイン
- Page Header Switcher for Lighting G3 Pro Unit
- UJS Colored Label
- UJS Group Blocks
![弊社制作プラグイン](https://uonuma-js.com/wp-content/uploads/2022/10/abe-nouen-2022-15.png)
サイト運営者プロフィール
![対馬 俊彦](https://uonuma-js.com/wp-content/uploads/2022/09/tsushima_bg_220x220-150x150.jpg)
- 魚沼情報サービス (新潟県南魚沼市)
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
![](https://uonuma-js.com/wp-content/uploads/2024/07/cta-01.webp)
Lighting テーマ使用
WordPress サイト開設
スターターパック
- デザイン済みパーツを組み合わせることで価格と納期を大幅削減
- プロが作ったクオリティが高いホームページ
- サポート付き・ご自分でかんたんに情報発信できます