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

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

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

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

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

スクロールしたときに3つのボタンを画面の右端に縦書きで配置します。

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

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

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

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

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

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

メニューの位置に 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; が効かない(期待通りの動きをしてくれない)ようです。

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

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

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

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

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

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

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

前の記事

ページヘッダーを全幅でなく固定幅にする方法

ここにアイキャッチ画像を表示しないようにフィルターフックで設定してあります。

次の記事

Lighting Pro でスクロール時のグローバルナビにヘッダーロゴ画像を表示させるやり方

ここにアイキャッチ画像を表示しないようにフィルターフックで設定してあります。