【Cocoon】ブラウザ端に追従する固定バナーを設置

2025年2月8日2025年2月17日

ブラウザ右端にある「お問合せバナー」などスクロールしても追従するフローティングバナー設置方法です。

パターンで「お問合せバナー」作成

新規パターン追加

上部管理メニュー＞パターン一覧＞新規パターンを追加＞任意の名前を付けてパターン作成

お問合せバナー作成

ブロック＞ボタンでボタンを作成
テキスト文字とリンク先のURLを入力

フォントアイコン「Font Awesome 5」のメールアイコンも追加で下記の内容で作成

[html]<i class="far fa-envelope"></i>[/html]お問合せ

Note

ボタンの色や文字はCSSで調整するのでディフォルトのままで大丈夫です。

バナーに任意のCSSクラス名を追加

作成したバナーの高度な設定＞追加CSSクラスに任意のCSS名（今回は ”floating-banner”）を追加

Note

追加CSSクラスには「 .floating-banner 」の最初の「 . 」を付けずに「floating-banner」のみを追加

ウィジェットに「お問合せバナー」ショートコード追加

上部管理メニュー＞パターン一覧＞ショートコードを確認

外観＞ウィジェット＞固定ページ本文下＞カスタムHTMLを設置して確認したショートコードを追加

Note

サイドバーが表示されるページだとバナーが邪魔になるので、今回は1カラムの固定ページに追加
CSSで位置調整するので固定ページ本文下以外でも大丈夫です。

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加

/* フローティングバナー */
.floating-banner {
  position: fixed;
  top: 50%; /* 縦位置 */
  right: 20px; /* 右端からの位置 */
  transform: translateY(-50%);
  z-index: 20;
}
.floating-banner a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  color: #fff; /* 文字色 */
  font-size: 16px; /* 文字サイズ */
  font-weight: 700; /* 文字太さ */
  background-color: #197A80; /* 背景色 */
  letter-spacing: 0.1em; /* 文字間隔 */
  padding: 1.2em 0.7em; /* 上下左右余白 */
  border-radius: 10px 0 0 10px; /* 角丸 */
  transition: opacity 0.25s;
}
.floating-banner a:hover {
  opacity: 0.7;
}
.floating-banner i::before {
  padding-bottom:3px; /* フォントアイコンの余白調整 */
}

@media screen and (max-width: 600px) {
  .floating-banner {
    display: none; /* スマホで非表示 */
  }
}

Note

5行目 “right” を “0px” にすると右側に文字が隙間なしで付いてしまうため適宜調整して下さい。
32行目 “display” でスマホ非表示設定にしてますが、必要に応じて表示を切り替えて下さい。

以上で、追従（フローティング）バナー設置の完了です。