【WordPress】フローティングバナーの設置手順解説

  • URLをコピーしました!

当ブログのコンテンツ・情報について、できる限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。情報が古くなっていることもございます。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

ウェブサイト運営者であれば、自分のウェブサイトの魅力的なデザインを作ることは必要不可欠な要素となります。中でも、フローティングバナーは多くの人々の注目を引くデザインのひとつです。

そこで、今回はプラグインを使用したフローティングバナーと、HTMLとCSSを使用したフローティングバナーを設置する方法を解説します。

WordPress環境
  • WordPressバージョン:6.5.2
  • SWELLバージョン: 2.10.0
  • PHPバージョン: 8.2.9

バージョンが異なると本記事の内容が正常に動作しない可能性があります。また、プラグインの影響や、別途記述しているPHPの影響も受ける可能性があります。

目次

フローティングバナーとは?

フローティングバナーとは、スクロールの動作に関係なく画面上に表示されたままの広告バナーのことです。ページを上下にスクロールしても同じ場所に留まります。

フローティングバナーをウェブサイトに設置することでウェブサイトの視認性を高め、広告に注目させることができます。バナーの位置が固定されているためユーザーが広告をクリックしやすく、その効果を高めることができます。

このページにはデモのサンプルフローティングバナーを表示しています。ウィンドウ幅を変えたり、スマホ画面を回転させたりすると、表示するフローティングバナーが変わるようになっています。

プラグインを使ったフローティングバナーの設置手順

おすすめは「Blog Floating Button」です。サイト全体への設置は無料で利用できます。記事別の設置などは有料のプロ版で可能です。4,980円買い切りなので買う価値はあると思います。

STEP
無料版Blog Floating Buttonのインストール

WordPressのプラグインの追加で、「Blog Floating Button」で検索し、「今すぐインストール」→「有効化」します。

無料版Blog Floating Buttonのインストール
STEP
Pro版の紹介

Pro版は、有料のライセンスキーを入手することで使用できます。

Blog Floating Button PRO版のご案内はこちらです。

プラグインを使わないフローティングバナーの設置手順

設置場所

サイト全体に設置する場合

CSSのコードは「外観」→「テーマファイルエディター」→「スタイルシート(style.css)」または、「外観」→「カスタマイズ」→「追加CSS」に記述します。

スタイルシートの場所
スタイルシートの場所
追加CSSの場所
追加CSSの場所

HTMLのコードは「外観」→「カスタマイズ」→「高度な設定」→「bodyタグ終了直前」に記述します。または、ウィジェットの任意の場所(フッター直前など)にカスタムHTMLを設置し記述してください。

高度な設定の場所
高度な設定の場所

特定の記事にのみ設置する場合

CSSのコードを記事下部の「カスタムCSS&JS」の「CSS用コード」に記述します。

CSS用コードの場所
CSS用コードの場所

HTMLのコードは記事の最後にカスタムHTMLを設置し記述してください。(ブロックの検索で「html」とすると出てくる)

カスタムHTML
カスタムHTML

画面左下に画像タイプを設置

.floating-banner {
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  margin-bottom: 0;
  right: 50%;
  left: 0;
  margin-right:650px; 
  width: auto;
}
<div class="floating-banner">
<!-- ここに表示させたい画像やリンクのHTMLを書く -->
</div>

画面左上に画像タイプを設置

.floating-banner {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 0;
  margin-top: 0;
  right: 50%;
  left: 0;
  margin-right:650px; 
  width: auto;
}
<div class="floating-banner">
<!-- ここに表示させたい画像やリンクのHTMLを書く -->
</div>

画面右下に画像タイプを設置

.floating-banner {
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  margin-bottom: 0;
  left: 50%;
  right: 0;
  margin-left:650px; 
  width: auto;
}
<div class="floating-banner">
<!-- ここに表示させたい画像やリンクのHTMLを書く -->
</div>

画面右上に画像タイプを設置

.floating-banner {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 0;
  margin-top: 0;
  left: 50%;
  right: 0;
  margin-left:650px; 
  width: auto;
}
<div class="floating-banner">
<!-- ここに表示させたい画像やリンクのHTMLを書く -->
</div>

画面上に画像タイプを設置

.floating-banner{
  display: block;
  position: fixed;
  z-index: 9999;
  right: 0;
  top: 0;
  width: auto;
}
<div class="floating-banner">
<!-- ここに表示させたい画像やリンクのHTMLを書く -->
</div>

画面下に画像タイプを設置

.floating-banner{
  display: block;
  position: fixed;
  z-index: 9999;
  right: 0;
  bottom: 0;
  width: auto;
}
<div class="floating-banner">
<!-- ここに表示させたい画像やリンクのHTMLを書く -->
</div>

画面下にボタンタイプを設置

.floating-banner{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  margin-bottom: 0;
  width: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 10px 0;
}
<div class="floating-banner">
<!-- ここにボタンやリンクのHTMLを書く -->
</div>

ある程度スクロールしてからふわっと出てくるフローティングバナー

サイトが開いた瞬間にフローティングバナーが表示されると、印象があまりよくないかもしれません。そのため、ユーザーがページをある程度スクロールした後にふわっとバナーが出現するように設定すると良いでしょう。

この実装にはJavaScriptを使用しなければなりませんが、SWELLにはこの機能を持っているので流用することができます。

SWELLの場合

SWELLの場合はHTMLのクラスに「p-fixBtnWrap」を指定するだけです。(SWELLのバージョンアップにより使用できなくなる可能性があるので、ご注意ください)

<div class="floating-banner p-fixBtnWrap">
<!-- ここに表示させたい画像やリンクのHTMLを書く -->
</div>

SWELL以外の場合

SWELL以外のテーマでも同様のクラスが用意されているかもしれません。もし用意されていなければ、下記コードをお試しください。

記事個別に実装する場合は、記事の最下部にカスタムHTMLを設置し記述してください。サイト全体に一括適応はウィジェットのフッター付近にカスタムHTMLを挿入し、記述してください。

私は運営しているサイト全てでSWELLを使っているので、このコードを実用しておりません。もちろんテストサイトで動作確認していますが、 なにか不具合があったらコメントまでお願いいたします。

<!-- HTMLでバナーをマークアップ -->
<div id="floating-banner" style="display: none; position: fixed; bottom: 10px; right: 10px;">
    <!--ここに表示させたい画像やリンクのHTMLを書く -->
</div>

<!-- jQueryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var banner = $('#floating-banner');

    // 画面の半分の位置でバナーを表示(適宜調整してください)
    if (scroll >= $(window).height() / 2) {
        banner.fadeIn();
    } else {
        banner.fadeOut();
    }
});
</script>

サンプルフローティングバナーのコード

画面幅によって表示するフローティングバナーを変えています。ウィンドウ幅を変えたり、スマホ画面を回転させたりすると、表示するフローティングバナーが変わるようになっています。

.floating-banner, .floating-banner-middle, .floating-banner-mobile {
  display: none;
}

/*ウィンドウ幅1600px以上のフローティングバナー*/
@media (min-width: 1600px){
  .floating-banner {
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    margin-bottom: 0;
    right: 50%;
    margin-right: 650px;
    width: auto;
  }	
}

/*ウィンドウ幅600px~1600px以上のフローティングバナー*/
@media (min-width:600px) and (max-width: 1600px){
  .floating-banner-middle {
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    margin-bottom: 0;
    width: 100%;
    right: 0;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 10px 0;
    }
}	

/*ウィンドウ幅600px以下(モバイル用)フローティングバナー*/
@media (max-width: 600px){
	.floating-banner-mobile {
		display: block;
		position: fixed;
		z-index: 9999;
		right: 0;
		top: 0;
	  width: auto;
		height: 0;
	}	
}
<!-- ウィンドウ幅1807px以上のフローティングバナー -->
<div class="floating-banner p-fixBtnWrap">
<a href="https://wplabo.net/floating-banner/">
<img src="https://wplabo.net/wp-content/uploads/2023/08/sample-floating-banner.jpg" alt="サンプルフローティングバナー"/>
</a>
</div>

<!-- ウィンドウ幅600px以上1807px以下のフローティングバナー -->
<div class="floating-banner-middle p-fixBtnWrap">
<div class="swell-block-button red_ is-style-btn_normal">
<a href="https://wplabo.net/floating-banner/" class="swell-block-button__link">
<span>サンプルフローティングバナー</span>
</a>
</div>
</div>

<!-- ウィンドウ幅600px以下(モバイル用)フローティングバナー -->
<div class="floating-banner-mobile p-fixBtnWrap">
<a href="https://wplabo.net/floating-banner/">
<img src="https://wplabo.net/wp-content/uploads/2023/08/sample-floating-banner-mobile.jpg" alt="サンプルフローティングバナー"/>
</a>
</div>
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • 「サンプルフローティングバナーのコード」をSWELLを使用しているブログにコピペしたのですが、うまく挙動しなかったのでコメントさせていただきました。

    【コピペした際の挙動】
    ・ファーストビューでは表示されていない(解説通り)
    ・スクロールしたら表示されるが、すべての画像が一度に表示される
    ・画像やボタンがすべて画面右下寄せで表示される

    【疑問点】
    「p-fixBtnWrap」のクラスは「トップへ戻る」に使用されているものなので、そもそも右下寄せに表示されてしまうのかなと思ったのですがいかがでしょうか?

    【使用環境】
    ・OS:mac
    ・ブラウザ:safari

    • 貴重なご意見ありがとうございます。
      Chrome/Edge/FireFox/Opera/Vivaldi/Braveで動作確認してみたんですけど、Safariはできないんですよね。(Windowsしか持ってないので)
      で、レンダリングエンジンがFireFoxはGecko、それ以外はBlinkなのでWebKitで確認ができないんです。
      また、改めてサンプルコードをそのままコピペしてテストサイト(Chrome)で動かしてみたところ、正常に動作しました。

      ちなみに、このページに置いてあるサンプルフローティングバナーの挙動もおかしいですか?そうだとしたらWebKit特有のプロパティを設定しなければならないかもしれません。

      問題の切り分けのため、Safari以外のブラウザ(ChromeやFireFox)での挙動を確認して頂けますか?

コメントを投稿しませんか?

コメントは管理人の承認後、表示されます。

目次