第二回 フローティングバナーについて

お問合せボタンなどを常に画面内に表示したい!

などの問合せをいただきましたので、今回の第二回目についてはフローティングバナーについてご説明します。

カスマイズ方法

カスタマイズ方法については2パターンの方法があります。

1.全ページに反映させる方法!

コントロールパネル>設定>SEO対策>アクセス解析の設定

2.個別ページのみに反映させる方法!

右クリック>メタタグ>メタタグの登録

この上記2パターンの方法でフローティングバナーの設定が可能です。

準備するもの!

バナー画像を設置するパターンとテキストを設置するパターンの2種類についてご説明します。
バナー画像を設置する場合はPCサイズの時に表示させる画像とスマホサイズの時に表示させる2種類のバナー画像を準備下さい。

■PCサイズ用のバナー画像

■スマホサイズ用のバナー画像

1.バナー画像編

1-1.フリーパーツの作成

フローティングバナー画像を設置する為のフリーパーツを作成します。

右クリック>レイアウト>レイアウトを変える>パーツを追加
コントロールパネル>作成>デザイン>レイアウトを変える>パーツを追加

※どちらからでも可能

【パーツ】タグを押して【ソース】ボタンを押したエディター内に下記のソースを貼り付けて下さい。

▽記述例▽
------------

<div class="floating_banner">
    <a href="#">
    <img class="pc" src="" alt="PC用フローティングバナー" />
    <img class="sp" src="" alt="スマホ用フローティングバナー" />
    </a>
</div>
------------

作成したフリーパーツをレイアウトの分かりやすい所に配置してください。
※どこに配置しても問題ありません。

1-2.「アクセス解析の設定」からカスタマイズを行う方法!

コントロールパネル>設定>SEO対策>アクセス解析の設定

本来はAnalyticsの設定を行う場所ですが、それ以外のソースも反映させることが出来ます。
その他のトラッキングコードの</HEAD>タグ直前 こちらに必要なソースをコピーしてください。

「アクセル解析の設定」からカスタマイズを行った場合、「サイト公開」ボタンを押さないと反映されません!
また編集画面にログインした状態でフローティングバナー画像を確認出来ませんので、ログアウトしてご確認ください。

▽記述例▽ 
------------
<style>
.floating_banner {
    position: fixed; /* バナーの固定 */
    z-index: 99999; /* 重なりの順序*/
    bottom: 110px; /* バナーの上下の位置(下からの距離)*/
    right: 20px; /* バナーの左右の位置(右からの距離)*/
}
.pc {
    width: 200px; /* バナーの横幅 */
}
.floating_banner:hover {
    opacity: .8; /* ホバー時に透過 */
}
.sp {
    display: none; /* PCではスマホ用のバナーを非表示 */
}
@media screen and (max-width: 991px) { /* スマホ用のブレイクポイントを指定 */
    .pc {
        display: none; /* スマホ以下ではPC用のバナーを非表示 */
    }
    .sp {
        display: inline-block; /* スマホ用のバナーを表示 */
        width: 100vw; /* スマホの画面幅にバナーを表示 */
    }
    .floating_banner {
        top: unset; /* PCで指定していた上下の位置指定をリセット */
        bottom: 40px; /* バナーの上下の位置(下からの距離)*/
        right: 0;/* バナーの左右の位置(右からの距離)*/
    }
}
</style>
------------

1-3.「メタタグの登録」からカスタマイズを行う方法!

右クリック>メタタグ>メタタグの登録

このメタタグの登録から設定を行う場合は設定されたページしか反映されませんのでご注意してください。
上記の点から特定のページだけヘッダーメニューを固定したい場合などは、こちらの「メタタグの登録」から設定を行って下さい。

メタタグのエディターを開き、上部のタグの【追加タグ設定】をクリックし</HEAD>タグ直前 に先程と同じソースをコピーしてください。

1-4.フローティングバナー完成!

2.テキスト編

2-1.フリーパーツの作成

フローティングバナー画像を設置する為のフリーパーツを作成します。

右クリック>レイアウト>レイアウトを変える>パーツを追加
コントロールパネル>作成>デザイン>レイアウトを変える>パーツを追加

※どちらからでも可能

【パーツ】タグを押して【ソース】ボタンを押したエディター内に下記のソースを貼り付けて下さい。

▽記述例▽
------------
<div class="floating_banner_text">
<p class="banner_text"><a href="#">テキストを入力</a></p>
</div>
------------

作成したフリーパーツをレイアウトの分かりやすい所に配置してください。
※どこに配置しても問題ありません。

2-2.「アクセス解析の設定」からカスタマイズを行う方法!

コントロールパネル>設定>SEO対策>アクセス解析の設定

本来はAnalyticsの設定を行う場所ですが、それ以外のソースも反映させることが出来ます。
その他のトラッキングコードの</HEAD>タグ直前 こちらに必要なソースをコピーしてください。

「アクセル解析の設定」からカスタマイズを行った場合、「サイト公開」ボタンを押さないと反映されません!
また編集画面にログインした状態でフローティングバナー画像を確認出来ませんので、ログアウトしてご確認ください。

▽記述例▽ 
------------ 
<style>
.floating_banner_text {
  position: fixed;/* バナーの固定*/
  z-index: 99999;/* 重なりの順序*/
  bottom: 30px;/* バナーの上下の位置(下から距離)*/
  right: 20px; /* バナーの左右の位置(右からの距離)*/
}
[class^="banner_text"]
 { 
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  width: 200px;
  height: 60px;
  text-align: center;
  padding: 15px;
}
.banner_text:hover {
  background-color:#45731f; /* ホバー時のバナーの色 */
}
[class^="banner_text"]a:hover{
 text-decoration: none;
  color: #fff; /* バナー内の文字色 */
}
.banner_text {
    background-color: #74bf36;/* バナーの背景色 */
}
[class^="banner_text"] a {
    text-decoration: none;
    color: #fff;
}
@media screen and (max-width: 991px) { /* スマホ用のブレイクポイントを指定 */
  .floating_banner_text {
    display: inline-block; /* スマホ用のバナーを表示 */
    top: unset;
    right: 0;
    bottom: 0;
  }
  .banner_text {
    width: 100vw;
    height: 40px;
     padding: 15px;border-radius:0px;
margin:0px; 
  }    
}
</style>
------------ ※必要に応じてバナーの位置や背景色などを変更してください。

2-3.「メタタグの登録」からカスタマイズを行う方法!

右クリック>メタタグ>メタタグの登録

このメタタグの登録から設定を行う場合は設定されたページしか反映されませんのでご注意してください。
上記の点から特定のページだけヘッダーメニューを固定したい場合などは、こちらの「メタタグの登録」から設定を行って下さい。

メタタグのエディターを開き、上部のタグの【追加タグ設定】をクリックし</HEAD>タグ直前 に先程と同じソースをコピーしてください。

2-4.フローティングバナー完成!

powered by cloudline