ヘッダーに電話番号とボタンを追加したカスタマイズ例 - Lightning 無料版

この記事はアフィリエイト広告を利用しています。

Lightning 無料版でヘッダーに電話番号とボタンを追加したカスタマイズ例です。

電話番号とボタンの部分は固定ページで作ってあり、文言の変更、ボタンの色やリンク先の変更をお客様側でかんたんに行っていただけます。

文言の変更、ボタンの色やリンク先の変更をお客様側でかんたんに行っていただけます。

画面幅が992px未満の端末ではモバイルナビで表示するのがいいので、ヘッダーに電話番号とボタンが表示されない仕様にしてあります。

更新履歴

2023.3.12 このカスタマイズ例だとヘッダーが窮屈に感じるかもしれないので、グローバルナビをページヘッダーの下に表示した例も作ってみました。(下記関連記事 ②)

2023.3.19 電話番号・ボタンとグローバルナビを横並びにレイアウトした例を追加しました。(下記関連記事 ③)

2023.3.29 スクロール時に電話番号とボタンを表示する仕様を追加しました。見た目のバランスを考えてボタンを先頭に配置してあります。(下図参照)

スクロール時に電話番号とボタンを表示する仕様を追加しました。

2024.1.27 アイコンを変更してアニメーション動作を追加しました。(青矢印で示した箇所)

関連記事

扉が開閉するような立体的な動きのハンバーガーメニュー(メガメニュー) | Lightning G3 無料版 / VK Blocks / WordPress のカスタマイズ【デモ館②】

メニュー部分をブロックエディターでビジュアル編集する仕様にしてありますので、柔軟にかんたんにお好みのデザイン・レイアウトにすることができます。

ヘッダーに電話番号・お問い合わせボタン・検索窓・ハンバーガーメニューを追加した例

WordPress コアのナビゲーションを使ったオーバーレイメニューと組み合わせてカスタマイズしました。

ヘッダーに電話番号とボタンを追加したカスタマイズ例②

電話番号とボタンの部分は固定ページで作ってあり、文言の変更、ボタンの色やリンク先の変更をお客様側でかんたんに行っていただけます。グローバルナビをページヘッダー…

ヘッダーに電話番号とボタンを追加したカスタマイズ例③

電話番号とボタンの部分は固定ページで作ってあり、文言の変更、ボタンの色やリンク先の変更をお客様側でかんたんに行っていただけます。

ヘッダーに電話番号とボタンを追加したカスタマイズ例④

VK お問い合わせ セクション をウィジェットに配置してヘッダーに表示するやり方を採用しています。

カスタマイズ費用の目安

この記事で行っているカスタマイズをご希望される場合、まずカスタマイズのためのコード (PHP および CSS) をメールでお伝えします。

そして、お客様様の WordPress サイトの画面を Zoom で共有していただき、実際に操作しながらカスタマイズ手順を説明いたします。

概算費用は 16,500円(税込) です。

【内訳】
 カスタマイズのコード 11,000円
 Zoom サポート 5,500円 (1時間まで) *1

*1
1時間を超える場合は30分までごとに上記サポート料金の50%がかかります。このカスタマイズであれば1時間以内で対応できることがほとんどですが、お客様の WordPress サイトの状況等によっては時間が超過する場合があります。
カスタマイズされているサイトの場合、カスタマイズ済みの内容によっては作業時間が超過する場合があります。

カスタマイズの前提条件

このカスタマイズの前提条件は以下の通りです。

  • WordPress テーマ Lightning を G3 モード・theme.json 有効 で使用している。
  • Lightning G3 Pro Unit をインストールしてある場合は Lightning ヘッダー 設定を以下のように指定してください。
     ヘッダーレイアウト:ナビゲーション回り込み
     グローバルナビスクロール時のレイアウト:固定 ナビ中央揃え
  • プラグイン VK Blocks または VK Blocks Pro がインストールされている。
  • VK Blocks 設定で [分割読み込みを有効にする] をオフにしてください。

不明点等ございましたら、お問い合わせください。

弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

ノーコードでヘッダーに電話番号とボタンを追加する方法

上記の例では PHP や CSS のコードを記述してカスタマイズしていますが、有料のプラグイン Lightning G3 Pro Unit を使うと、難しいカスタマイズ(コーディング)をせずに、ヘッダーに電話番号とボタンをかんたんに追加できます。(下図参照)

Lightning G3 Pro ヘッダー設定

「カスタマイズの手間はかけたくない」または「カスタマイズが苦手」という方は、予算が許せば Lightning G3 Pro Unit が含まれるサブスクリプション製品「Vektor Passport」の購入を検討した方がいいかもしれません。

Lightning G3 Pro Unit の入手方法

Lightning G3 Pro Unit 有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間3年)
Vektor Passport(ライセンス期間5年)

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

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

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

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

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

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

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

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り(無料)を提示させていただきます。