ヘッダー上部のお問い合わせボタンをスクロール時に画面の右端に表示する方法

Lighnting Pro はヘッダー上部にお問い合わせボタンを配置する機能があります。

ヘッダー上部のお問い合わせボタン

この記事では、お問い合わせボタンをスクロール時に以下のように画面の右端に表示するやり方を紹介します。

お問い合わせボタンをスクロール時に画面の右端に表示

作業手順 CSS を追加

CSS に以下の行を追加します。ボタンをちょっとだけ大きめに表示して、マウスホバー時に動きを持たせてあります。

.headerTop_contactBtn {
    transition: all 1.0s ease-out;
}

.header_scrolled .headerTop_contactBtn {
    position: fixed;
    left: calc(100% - 50px);
    top: 15vh;
}

.header_scrolled .headerTop_contactBtn a {
    writing-mode: vertical-rl;
    letter-spacing: 1px;
    border-radius: .25rem 0 0 .25rem;
    padding: 0.5rem 0.75rem 0.75rem;
    transition: padding 0.5s ease;
}

.header_scrolled .headerTop_contactBtn a:hover {
    padding-right: 1.5rem;
}

.header_scrolled .headerTop .headerTop_contactBtn a.btn {
    border-radius: 0.5rem 0 0 0.5rem;
    font-size: 16px;
}

.header_scrolled .headerTop_contactBtn a i {
    margin: .4em 0;
}

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

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

関連記事

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

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

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

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

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

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

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