ヘッダーに電話番号とボタンを追加したカスタマイズ例③
この記事はアフィリエイト広告を利用しています。
Lightning 無料版でヘッダーに電話番号とボタンを追加したカスタマイズ例の第3弾です。
パソコンでの表示
- 電話番号とボタン
- グローバルナビ (2行で表示)
を横並びにレイアウトしてあり、画面幅に応じて電話番号とボタンのレイアウトが以下のように自動的に切り替わります。
![画面幅に応じて電話番号とボタンのレイアウトが自動調整されます。](https://lightning-free.hp1.work/wp-content/uploads/2023/03/add-contact-button-to-header-3-3.png)
2023.3.29 スクロール時に電話番号とボタンを表示する仕様を追加しました。見た目のバランスを考えてボタンを先頭に配置してあります。(下図参照)
![スクロール時に電話番号とボタンを表示する仕様を追加しました。](https://lightning-free.hp1.work/wp-content/uploads/2023/03/header_scrolled-contact-and-button.png)
スマホでの表示
モバイルナビの先頭に表示されます。
![スマホでの表示](https://lightning-free.hp1.work/wp-content/uploads/2023/03/add-contact-button-to-header-3-2.png)
メニューボタンのアイコンを飲食店をイメージしたデザインにしてあります。
お客様側でかんたんに変更できます
電話番号とボタンの部分はパソコン表示・スマホ表示で共通の固定ページで作ってありますので、ブロックエディターを使ってのビジュアル編集が可能です。
HTML/CSS を意識することなく、文言・書式の変更、ボタンの色やアイコン・リンク先の変更をお客様側でかんたんに行っていただけます。
例えば以下のように、キャンペーンを行う場合等にご活用いただけます。
![お客様側でかんたんに変更できます](https://lightning-free.hp1.work/wp-content/uploads/2023/03/add-contact-button-to-header-3-1.png)
2023.3.25 追記 表示する固定ページを編集する画面
編集画面は以下のようになっています。
![表示する固定ページの編集画面](https://lightning-free.hp1.work/wp-content/uploads/2023/03/add-contact-button-to-header-3-editor.png)
表示するパターンを複数登録しておいて、どれを表示するかを選べますので、かんたん・瞬時に切り替えできます。
2023.4.14 デザインを手直し
Lightning のデザインスキン Origin III では現在表示されているページ(の祖先)のメニュー項目に下ボーダーが表示される仕様になっていますが、このカスタマイズ例のようにグローバルナビを2行で表示するとこの下ボーダーが表示されない方がよいので、そのようにデザインを手直ししました。
![2023.4.14 デザインを見直し](https://lightning-free.hp1.work/wp-content/uploads/2023/04/add-contact-button-to-header-3-20230414.png)
関連記事
弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。
【参考】有料プラグイン Lightning G3 Pro Unit
有料のプラグイン Lightning G3 Pro Unit を使うと、難しいカスタマイズ(コーディング)をせずに、ヘッダーに電話番号とボタンをかんたんに追加できます。(下図参照)
![Lightning G3 Pro ヘッダー設定](https://lightning-free.hp1.work/wp-content/uploads/2023/03/lightning-g3-pro-header-contact-2.png)
「カスタマイズの手間はかけたくない」または「カスタマイズが苦手」という方は、予算が許せば Lightning G3 Pro Unit が含まれるサブスクリプション製品「Vektor Passport」の購入を検討した方がいいかもしれません。
![](https://lightning-free.hp1.work/wp-content/uploads/2022/09/tsushima_bg_220x220.jpg)
【補足】この記事のようにレイアウトすることは Lightning G3 Pro Unit の設定だけではできませんので、追加のカスタマイズ(コーディング)が必要です。
Lightning G3 Pro Unit の入手方法
Lightning G3 Pro Unit は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。
Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。
投稿者プロフィール
![対馬 俊彦](https://lightning-free.hp1.work/wp-content/uploads/2022/09/tsushima_bg_220x220-150x150.jpg)
- 魚沼情報サービス (新潟県南魚沼市)
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
![](https://lightning-free.hp1.work/wp-content/uploads/2024/07/cta-02.webp)
Lighting テーマ使用
WordPress サイト開設
スターターパック
- デザイン済みパーツを組み合わせることで価格と納期を大幅削減
- プロが作ったクオリティが高いホームページ
- サポート付き・ご自分でかんたんに情報発信できます