WordPress（Cocoon）で簡単にフローティングSNSボタンを追加する方法

1. 1️⃣ 設置イメージ
1.1. 画像イメージ
2. 2️⃣ HTMLの追加方法
2.1.1. ① HTMLの設置場所
3. 3️⃣ CSSの追加方法
4. 4️⃣ コード使用上のポイント
5. 5️⃣ デモ動画・スクショ
6. まとめ

こんにちは、今回はWordPressの人気テーマCocoonで右下に固定表示されるフローティングSNSボタンを簡単に設置する方法をご紹介します。

私自身、サーバー管理やサイト運営を行う中で、「SNSボタンを手軽に設置したい」というニーズが多くあります。
同じように「SNSボタンを簡単に表示したい」という方がいれば、この記事のコードを活用してください。

1️⃣ 設置イメージ

今回のコードで設置できるボタンは以下です：

Instagram
LINE
YouTube
Facebook

ボタンは丸型のオレンジ色で、ホバーすると少し明るくなる仕様です。
スマホ表示にも対応しており、スクロールしても常に右下に表示されます。

画像イメージ

※実際のブログでは右下に固定表示されます。

2️⃣ HTMLの追加方法

Cocoonテーマでは、投稿や固定ページのカスタムHTMLブロックにHTMLを貼ります。
CSSとHTMLを使った設置方法

① HTMLの設置場所

Cocoonの場合、**テーマの編集画面で「フッター用コード」や「ウィジェット」**に設置するのが簡単です。

方法B: ウィジェット → カスタムHTMLウィジェット
「フロントページ」「全ページ」など表示したい場所のサイドバーやフッターに置けます。

方法A: Cocoon設定 → アクセス解析・ヘッダー・フッター → フッター用コード
ここにHTMLを直接貼ると、全ページの下部に挿入されます。

<!-- フローティングSNSボタン -->
<div class="floating-sns">
  <a href="https://www.instagram.com/YourSite/" target="_blank" class="sns-icon instagram" aria-label="Instagram"></a>
  <a href="https://lin.ee/YourSite/" target="_blank" class="sns-icon line" aria-label="LINE"></a>
  <a href="https://www.youtube.com/YourSite/" target="_blank" class="sns-icon youtube" aria-label="YouTube"></a>
  <a href="https://www.facebook.com/YourSite/" target="_blank" class="sns-icon facebook" aria-label="Facebook"></a>
</div>

SNSリンクはご自身のアカウントに置き換えてください。

3️⃣ CSSの追加方法

Cocoonでは 「Cocoon設定 → 追加CSS」 に貼るのが推奨です。
に以下のCSSを貼ると安全に反映されます。

/* フローティングSNSボタン全体 */
.floating-sns {
  position: fixed !important;
  right: 20px !important;
  bottom: 90px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999999 !important;
  pointer-events: auto !important;
}

/* 各SNSボタン */
.sns-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff7b00 !important;
  text-decoration: none !important;
  transition: background-color 0.3s, transform 0.2s;
  pointer-events: auto !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

/* ホバー時 */
.sns-icon:hover {
  background-color: #ff9a33 !important;
  transform: translateY(-2px);
}

/* 各SNSアイコン */
.instagram {
  background-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg');
}
.line {
  background-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/line.svg');
}
.youtube {
  background-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg');
}
.facebook {
  background-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg');
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .floating-sns {
    right: 10px !important;
    bottom: 90px !important;
  }
  .sns-icon {
    width: 45px;
    height: 45px;
    background-size: 60%;
  }
}

4️⃣ コード使用上のポイント

HTMLはカスタムHTMLブロックに貼る
CSSは追加CSSに貼る
SNSリンクや色・サイズは自由にカスタマイズ可能
スクロールしても右下に常に表示されます

5️⃣ デモ動画・スクショ

デスクトップで表示すると右下に縦に並ぶ
スマホ表示でもボタンサイズが少し小さくなり操作しやすい

まとめ

CocoonテーマでフローティングSNSボタンを設置するのはとても簡単です。
HTMLとCSSを分けて追加すれば、テーマやプラグインによる干渉も最小限にできます。

必要な方は、ぜひご自身のブログで活用してみてください。

💡 補足

将来的にSNSを追加する場合は、HTMLに<a>タグを増やし、CSSでアイコンを指定するだけで簡単に対応可能です。

カテゴリー: 新着情報