タブ切り替えを使った賃貸物件紹介ページのカスタマイズ例

カテゴリー: WordPress、カスタマイズ

タグ: CSS jQuery タブ切り替え

近々、賃貸物件を掲載するサイトを制作することになっていて、ご依頼いただいたお客様に提案するために賃貸物件紹介ページのデザイン案を作ってみました。

コンテンツを見やすいように、「物件概要」「ギャラリー」「間取り図」「所在地地図」をタブで切り替えて表示するようにしました。

スマホではタブを4つ並べるのが難しいため、所在地地図のタブを表示せずに、地図が物件概要のタブの中に含まれます。

このデザイン案は、Lightning G3 無料版を使って制作する前提で、独自に実装したタブ切り替えを使用しています。

物件概要
ギャラリー
間取り図
所在地地図

物件名	カーサ北里
所在地	南魚沼市黒土118
アクセス	上越新幹線浦佐駅から4.7km 関越自動車道大和スマートIC から3.7km
間取り	2DK (8畳DK　8畳洋室　6畳洋室　バス　トイレ　ベランダ)
占有面積	55.28㎡
建築年月	令和6年10月新築
家賃	65,000円/月
管理費	2,500円/月
駐車場	5,500円/月 (お使いになる方のみ)
敷金	65,000円
礼金	0円
仲介料	65,000円
火災保険	19,800円(2年間)
備考	家具・家電付

所在地地図

電車

上越新幹線浦佐駅から4.7km

自動車

関越自動車道大和スマートIC から3.7km

電車

上越新幹線浦佐駅から4.7km

自動車

関越自動車道大和スマートIC から3.7km

WordPress のカスタマイズをお手伝いします

ベクトル公式テクニカルパートナーがあなたをオンラインでサポート

Zoom で画面共有して、Q&Aでサポートいたします。
わからないところや疑問点をどんどん質問してください。すぐその場で解決をお手伝いします。

アクションフック / フィルターフック / PHP / jQuery / CSS のカスタマイズのご依頼も承ります。
自分では思い通りにできないのでプロの力を借りたい方、ぜひご利用ください。

ご相談・お仕事のご依頼はこちらのお問い合わせフォームからお願いいたします。

--- この部分について ---
投稿の最後にカテゴリーごとに異なるコンテンツを出し分けるカスタマイズを行っています。
いまご覧になっているこの部分はカテゴリー WordPress の投稿に表示されています。

例えば、部署や施設が投稿のカテゴリーになっていて、投稿の最後に担当部署の連絡先や施設の紹介を載せたいというご要望にこのカスタマイズでお応えできます。

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

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

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

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

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

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

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

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

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく