ヘッダー上部のお問い合わせボタンを増やして、スクロール時に画面の右端に配置する方法

Lighnting Pro はヘッダー上部にお問い合わせボタンを配置する機能がありますが、このボタンを増やすカスタマイズのやり方を紹介します。

今回は以下のように、ヘッダー上部に参加申込み・資料請求・お問い合わせの3つのボタンを配置します。

さらに、スクロールしたときにこの3つのボタンを画面の右端に縦書きで以下のように配置します。

カスタマイズ手順は以下の通りです。

手順 1. ヘッダー上部のお問い合わせボタンを削除する

Lightning ヘッダー上部設定でお問い合わせボタンの入力欄をすべて空にします。

せっかくあるのに使わないのはもったいない気がしますが、これを使わない方が楽にできます。

手順 2. Header Top Navigation メニューを作る

メニューの位置に Header Top Navigation を指定して以下のようにメニューを作成します。

この時点ではシンプルなテキストベースのメニューです。

次に、CSS を追加してスタイルとスクロール時の動きをカスタマイズしましょう。

手順 3. CSS を追加

以下の CSS を追加します。

.headerTop ul {
    margin-top: 0px;
}

.headerTop ul>li {
    line-height: 1.4em;
    margin-right: 1.0em;
    margin-bottom: 0;
}

.headerTop ul>li>a {
    border-radius: 0 0 .25rem .25rem;
    font-size: 14px;
    padding: .375rem .75rem;
    line-height: 1.5;
}

.headerTop ul>li>a:hover {
    text-decoration: none;
}

.headerTop ul>li:nth-child(1)>a {
    background-color: #00abec;
    border: solid 1px #0091c3;
}

.headerTop ul>li:nth-child(1)>a:hover {
    background-color: #0091c3;
    border-color: #00abec;
}

.headerTop ul>li:nth-child(2)>a {
    background-color: #6ebd30;
    border: solid 1px #64ad2c;
}

.headerTop ul>li:nth-child(2)>a:hover {
    background-color: #64ad2c;
    border-color: #6ebd30;
}

.headerTop ul>li:nth-child(3)>a {
    background-color: #2e6da4;
    border: solid 1px #337ab7;
}

.headerTop ul>li:nth-child(3)>a:hover {
    background-color: #337ab7;
    border-color: #2e6da4;
}

.nav li a {
    color: #fff;
}

.header_scrolled nav.menu-header-top-navigation-container {
    position: fixed;
    left: calc(100% - 39px);
    top: 15vh;
    transition: top 1.0s ease-out;
}

.header_scrolled .headerTop ul {
    flex-direction: column;
}

.header_scrolled .headerTop ul>li {
    margin-right: 0;
    margin-bottom: 1.0em;
}

.header_scrolled .headerTop ul>li>a {
    writing-mode: vertical-rl;
    letter-spacing: 1px;
    border-radius: .25rem 0 0 .25rem;
    padding: 0.5rem .5rem;
}

.header_scrolled .headerTop ul>li>a i {
    margin: .4em 0;
}

left: calc(100% – 39px); の部分について

この行はシンプルに right: 0; としたいところですが、そうすると Firefox だときっちり右端に配置されません。
Firefox は親要素がオーバーフローしていると right: 0; が効かない(期待通りの動きをしてくれない)ようです。

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

魚沼情報サービスへのお問い合わせ

サイト運営者プロフィール

対馬俊彦魚沼情報サービス代表

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 によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

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

ご相談・お問い合わせはお気軽にどうぞ