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

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 を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している 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 によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

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

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