設置したフローティングバナーの動作仕様

この記事で表示しているフローティングバナーは以下の通りの動作をします。

パソコン画面での表示

パソコンでこの記事を表示すると、画面の右側に Lightning G3 Pro Pack のアフィリエイトバナーがフローティング表示されます。

画面の右側に Lightning G3 Pro Pack のアフィリエイトバナーがフローティング表示されます。

画面のスクロールとともにこのフローティングバナーも上に移動し始めますが、その後は画面右上に固定表示されます。

そして、フッターが見え始めるあたりで、フローティングバナーは画面の上に去っていきます。

スマホ画面での表示

スマホだとこのバナーは大き過ぎるので、画面最下部に ↓ このようにテキストベースのボタンで固定表示されます。(ぷるぷる震える Font Awesome アイコン付き)

スマホでは画面最下部にこのようにテキストベースのボタンで固定表示されます。

カスタマイズについて

この実装例では JavaScript を使わずに、CSS だけで上記の動きを実装してあります。

フローティングバナーの HTML コードを追加するためにアクションフックを使っています。

弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

関連記事

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

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

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

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

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

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

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

わからないところ、オンラインでお手伝いします

魚沼情報サービスの対馬です
こんにちは、魚沼情報サービスの対馬です。

Lightning およびベクトルのプラグイン VK Blocks、VK Filter Search の設定・カスタマイズでお困りの方のお手伝いを得意としています。

Zoom オンラインレッスン形式でサポートしてお力になります。

* 近くに頼りになるところがない
* わからないところを手伝ってもらいたい
という方はぜひご利用ください。