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

August 27, 2023April 17, 2024

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」で検索し、「今すぐインストール」→「有効化」します。

STEP

Pro版の紹介

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

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

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

設置場所

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

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

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

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

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

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をコピーしました！