ホームページ制作事例「阿部農園」
弊社が制作させていただいた、南魚沼市の阿部農園様のウェブサイトがリニューアル公開されました。
サイト制作 (カスタマイズ) にあたって特に力を入れたこと
お客様がHTML コードを扱わずに、可能な限りすべてのコンテンツ編集作業をご自身でビジュアルエディター（ブロックエディター）を使って楽に (≒楽しく) 行えること
上記のことを中心に、制作させていただいたサイトのカスタマイズ内容について具体的に説明いたします。
投稿リストブロックをカスタマイズ
まず、トップページの新着情報のカスタマイズについてです。
パソコン画面では、以下のように中央にある記事だけ 拡大 ＋ ドロップシャドウ で目立たせる、なんとなくカバーフロー(coverflow)チック😅なデザインで新着情報をカルーセル表示しています。
ちなみに…本物の coverflow エフェクトを使った新着情報表示をご希望の場合は こちらのページ に実装しているようにカスタマイズすることも可能です。
スマホ画面では、以下のように前後の記事をチラ見せするデザインでカルーセル表示しています。
カルーセル表示しているブロックは VK Blocks Pro の 投稿リスト です。
複数のスライダーブロックと非表示設定（画面サイズごとの出し分け）による実装ではなく、スライダーブロックを使わずにひとつの投稿リストブロックだけでカスタマイズしてレスポンシブ対応まで実装していますので、出力されるコード (ブロック構成) がシンプルでメンテナンス性が向上しています。
メディアとテキストブロックをカスタイマイズ
今回使用したデザインスキン VEKUAN に合わせて、縦書き文字を画像に重ねたブロックをトップページに配置しました。
この部分は WordPress コアの メディアとテキストブロック をカスタマイズしてありますので、文言の変更と画像の差し替えは以下のようにブロックエディターでかんたんに行えるようになっています。
カードブロックをカスタマイズ
トップページに置いた、マウスホバーエフェクト付きの以下の4つの画像リンクは VK Blocks Pro のカードブロックをカスタマイズしてあります。
カードブロックですから、もちろん、以下のようにブロックエディターで文言の変更、画像の差し替え、リンク先の変更をかんたんに行うことができます。
グリッドカラムブロックをカスタマイズ
農園のご案内ページ に農作業風景の画像を以下のようにカルーセル表示しています。
この部分は VK Blocks Pro の グリッドカラムブロック をカスタマイズしてありますので、ここもまた、以下のようにブロックエディターで画像(グリッドカラムアイテム)の追加や順番の入れ替え、リンク先の設定など容易に行うことができます。
スライダー専用のプラグインを使うよりも直感的でわかりやすいので、今後制作する他のサイトでも横スクロールするバナーの設置などで大活躍しそうです。
カバーブロック ＋ グリッドカラムブロック
以下の部分は、カバーブロックに入れたグリッドカラムブロックを使って商品画像をレイアウトして、オンラインショップの商品詳細ページにリンクしてありますが、ここはコードによるカスタマイズは特にしていません。ノーコードであっという間にこういうものが作れるって（しかもレスポンシブ対応までバッチリ）、ブロックエディターで便利になったなぁ～って感じます。
シェアボタン (ソーシャルボタン) をカスタマイズ
VK All in One Expansion Unit のシェアボタンをシンプル・コンパクトにカスタマイズしました。
ブロックパターンを用意させていただきました
今後コンテンツの追加作業を苦労なく楽しんで続けていただけるように、ブロックパターンを用意させていただきました。
米粒のライン
見出しの下に米粒のラインをあしらったブロックパターンです。
飾り枠
グループブロックをカスタマイズしたブロックパターンです。
VEKUAN のブロックパターンも大活躍でした
阿部農園様と最初の打ち合わせで VEKUAN のデモサイト「琶句庵」を見ていただいたのですが、すぐに気に入っていただいて、VEKUAN をベースに制作することが決まりました。VEKUAN のブロックパターンにも大変お世話になりました。
使用したテーマ
- 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
サイト運営者プロフィール
- 魚沼情報サービス (新潟県南魚沼市)
-
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
最新の投稿
WordPress2023.03.31横並びボタンを均等にコンテナ幅に合わせてレイアウトしたカスタマイズ例
ホームページ制作事例2023.03.24ホームページ制作事例「かじか屋本舗」
WordPress2023.02.09スライダーにアイコンメニューを重ねたカスタマイズ例 (VK Blocks Pro)
ホームページ制作事例2023.01.24ホームページ制作事例「手織りmano」
WordPress サイト制作・カスタマイズ・サポートを承ります
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、まずはお気軽にお問い合わせください。
