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

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

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

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

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

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

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

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

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

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく