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

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

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

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

１．全ページに反映させる方法！

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

２．個別ページのみに反映させる方法！

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

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

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

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

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

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

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

※どちらからでも可能

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

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

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

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

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

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

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

------------

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

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

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

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

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

※どちらからでも可能

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

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

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

コントロールパネル＞設定＞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>

------------ ※必要に応じてバナーの位置や背景色などを変更してください。

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

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

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