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

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

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

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