魚沼産コシヒカリ販売 しおざわ 阿部農園 新潟県南魚沼市

弊社 (魚沼情報サービス・代表 対馬俊彦) が制作させていただいた、南魚沼市の阿部農園様のウェブサイトがリニューアル公開されました。

サイト制作にあたって特に力を入れたこと

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

米粒のライン

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

飾り枠

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

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

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

使用したテーマ

使用した主なプラグイン

弊社制作プラグイン

制作者情報

対馬 俊彦魚沼情報サービス

制作実績をご覧いただき、ありがとうございます。

私は1990年代からホームページ制作業務を行っており、現在は Lightning / Katawara およびベクトルのプラグイン VK Blocks / VK Filter Search などを用いたサイト制作を最も得意としています。

VWS フォーラムやベクトルさんのプライベートサポートプランでは解決できないような、作業工数がかかるカスタマイズでお困り・お悩みの方のお力になれます。

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積りを提示させていただきます。お気軽にご相談ください。

制作業者様、デザイナー様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

カスタマイズ事例、便利な使用方法やアイディアなどを載せたサイトもいくつか運営しています。ご参考にどうぞ。

■ Lightning G3 / G3 Pro Unit » https://lightning-g3.hp1.work/

■ Lightning G3 » https://lightning-free.hp1.work/

■ Lightning Pro + Origin II » https://lightning.uonuma-js.com/

■ Lightning Pro + Origin II » https://lightning.hp2.work/

■ Lightning Pro + Pale II » https://lightning-pale.hp1.work/

■ Lightning Pro + JPNSTYLE II » https://lightning-jpnstyle.hp1.work/

■ Lightning Pro + Variety II » https://lightning-variety.hp1.work/

■ Lightning Pro + Fort II » https://lightning-fort.hp1.work/

■ Katawara » https://katawara.hp1.work/

　

» ご相談・お問い合わせはこちらからどうぞ

最新の実績

この制作者の実績一覧

• Lightning G32024年5月24日魚沼薬剤師会 – VK Filter Search Pro のカスタマイズ例
• Lightning G32023年9月8日城内農産（カスタマイズをプラグイン化して制作に使用）
• Lightning G32022年10月17日魚沼産コシヒカリ販売 しおざわ 阿部農園 新潟県南魚沼市
• Katawara2021年4月28日魚沼きのこ

この制作者に依頼の問い合わせ