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

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

阿部農園ウェブサイト

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

HTML コードを扱わずに、可能な限りすべてのコンテンツ編集作業をお客様ご自身がビジュアルエディター(ブロックエディター)で行えること

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

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

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

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

パソコン画面の新着情報カルーセル表示

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

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

スマホ画面の新着情報カルーセル表示

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

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

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

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

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

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

文言の変更と画像の差し替えはブロックエディターでかんたんに行えるようになっています。

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

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

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

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

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

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

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

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

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

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

VK Blocks Pro の グリッドカラムブロック をカスタマイズしてありますので、ブロックエディターで容易に編集できます。

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

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

グリッドカラムブロックを使って商品画像をレイアウト

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

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

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

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

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

米粒のライン

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

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

飾り枠

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

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

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

阿部農園様と最初の打ち合わせで 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
弊社制作プラグイン

制作者情報

対馬 俊彦
対馬 俊彦魚沼情報サービス
制作実績をご覧いただき、ありがとうございます。

私は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/

 

» ご相談・お問い合わせはこちらからどうぞ
この制作者に依頼の問い合わせ