Lightning G3 のグローバルナビの後ろに電話と問い合わせのボタンを追加して以下のようなデザインにするやり方を紹介します。

Lightning G3 のグローバルナビの後ろに電話と問い合わせのボタンを追加したデザイン

ボタンを追加しようとすると難易度が上がるので...

タイトルの通り ボタンを追加 しようとすると、アクションフックを使ったり、テーマファイルをいじったりしてカスタマイズすることになるのですが、それをやろうとするとカスタマイズの難易度が上がってしまいます。

この記事では、上記のようなデザインにするお手軽な(おそらく一番かんたんな)やり方を紹介しています。

考え方としては、グローバルナビの後ろにボタンを追加するのではなく、グローバルナビの最後の2つのスタイルを変えてボタンのように見せるようにします。

カスタマイズ手順 ① メニュー

メニューの最後の2つの項目を以下のように設定します。この例では Font Awesome のアイコンを使っています。

メニューの最後の2つの項目を設定

カスタマイズ手順 ② CSS

子テーマの style.css などに以下のコードを追加します。

@media (min-width: 992px) {
  .vk-menu-acc > li:last-child,
  .vk-menu-acc > li:nth-last-child(2) {
    margin-left: 1rem;
  }
  .vk-menu-acc > li:last-child > a,
  .vk-menu-acc > li:nth-last-child(2) > a {
    border-radius: 30px; /* 角丸にしてボタン風に */
  }
  .vk-menu-acc > li:last-child > a {
    background-color: var(--vk-color-primary);
  }
  .vk-menu-acc > li:nth-last-child(2) > a {
    background-color: var(--vk-color-custom-1);
  }
  nav .vk-menu-acc > li:last-child > a,
  nav .vk-menu-acc > li:nth-last-child(2) > a {
    color: #fff;
  }
  .global-nav-list {
    align-items: center; /* スクロール時のスタイル */
  }
}

上記のコードでは、最後のメニュー項目に キーカラー var(--vk-color-primary) を、最後から2番目のメニュー項目に カスタムカラー 1 var(--vk-color-custom-1) を設定しています。

電話やお問い合わせ以外にも使えて、かんたんにできますので、興味がある方はお試しください。

2024.7.23 追記【1】

上記のカスタマイズ例を投稿した後で気がついたのですが...

グローバルナビ(パソコン画面)に電話番号のボタンは必要ない(ボタンである必要がない)ですよね😅

そこで、以下のようなデザインにするやり方も載せてみます。

Lightning G3 のグローバルナビの後ろに電話番号と問い合わせボタンを追加したデザイン

メニューは上記のカスタマイズ例とほぼ同じで、電話番号の説明欄に以下のように受付時間を追加します。

メニューの電話番号の説明欄に受付時間を入力

CSS は以下の通りです。

@media (min-width: 992px) {
  nav .vk-menu-acc > li:last-child > a {
    border-radius: 30px; /* 角丸にしてボタン風に */
    background-color: var(--vk-color-primary);
    color: #fff;
  }
  .vk-menu-acc > li:nth-last-child(2) .global-nav-name {
    font-size: 2em;
  }
  .vk-menu-acc > li:nth-last-child(2) .global-nav-name i {
    color: var(--vk-color-custom-1);
  }
  .global-nav-list {
    align-items: center; /* スクロール時のスタイル */
  }
}

2024.7.23 追記【2】

さらにオマケで、宿泊施設のサイトを想定して、以下のように [宿泊予約] と [空室検索] ボタンを追加したデザインにするやり方も載せてみます。

宿泊施設のサイトを想定して、[宿泊予約] と [空室検索] ボタンを追加したデザイン

メニューには図のように入力します。

  • fa-xl を追加するとアイコンが大きくなります。
  • fa-shake を追加するとアイコンがぷるぷる揺れます。
[宿泊予約] と [空室検索] をメニューに追加

CSS は以下の通りです。

@media (min-width: 992px) {
  .vk-menu-acc > li:last-child,
  .vk-menu-acc > li:nth-last-child(2) {
    margin-left: 1rem;
  }
  nav .vk-menu-acc > li:last-child > a {
    border-radius: 30px;
    background-color: #fff;
    color: var(--vk-color-primary);
    border: 1px solid var(--vk-color-primary);
  }
  nav .vk-menu-acc > li:nth-last-child(2) > a {
    border-radius: 30px;
    background-color: var(--vk-color-primary);
    color: #fff;
  }
  .global-nav-list {
    align-items: center;
  }
}

2024.7.25 追記 サンプルサイトを作りました

この記事に書いたカスタマイズを使って、スキー場の宿泊施設をイメージしたサンプルサイトを作りました。
下画像をクリックするとサンプルサイトが表示されます。

この記事に書いたカスタマイズを使って、スキー場のロッジをイメージしたサンプルサイトを作りました。

投稿者プロフィール

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

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

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

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

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

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

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

Lightning テーマ使用

中小企業様、個人事業主様向け

最適なホームページ

を制作いたします

制作費用クオリティを落とさずに



価格を抑えたサイトを制作します
必要十分お問い合わせフォーム、新着情報など



必要なものが最初から揃っています
サポート1年間のサポートがついて安心
初めてでもホームページを活用できます