ホーム / Bloggerにリンクボックスを設置する方法（6個表示／レスポンシブ対応） /

Bloggerにリンクボックスを設置する方法（6個表示／レスポンシブ対応）

Bloggerに「リンクボックス」を設置して、便利なナビゲーションやおすすめ記事への導線を作りたい方に向けて、簡単にコピペで使えるHTML＋CSSコードをご紹介します！

🔷 サンプル完成イメージ

  • パソコンでは 3列表示
  • スマホでは 2列表示 に自動で切り替え
  • おしゃれな影付きデザイン

🔷 完成イメージ（リアルタイムプレビュー）

リンク1 リンク2 リンク3 リンク4 リンク5 リンク6

💡 設置方法

  1. Blogger管理画面から 「レイアウト」＞「HTML/JavaScriptガジェットを追加」 をクリック
  2. 以下のコードをそのまま貼り付けます

💡 コードをコピーして使おう

<style>
.link-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px auto;
  max-width: 600px;
}
.link-box {
  flex: 1 1 calc(33.33% - 10px);
  background-color: #f5f5f5;
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background 0.3s;
}
.link-box:hover {
  background-color: #e0e0e0;
}
@media (max-width: 600px) {
  .link-box {
    flex: 1 1 calc(50% - 10px);
  }
}
</style>

<div class="link-boxes">
  <a class="link-box" href="URL1">リンク1</a>
  <a class="link-box" href="URL2">リンク2</a>
  <a class="link-box" href="URL3">リンク3</a>
  <a class="link-box" href="URL4">リンク4</a>
  <a class="link-box" href="URL5">リンク5</a>
  <a class="link-box" href="URL6">リンク6</a>
</div>

🛠 カスタマイズ方法

  • URL1〜URL6 をあなたのリンク先に書き換えてください。
  • リンク1〜リンク6 のテキストも自由に変更OK。
  • デザインや色を変更したい場合は、CSSの background-color, color, box-shadow などを調整してください。

🎯 使用例

  • ブログの目次
  • 人気記事の紹介
  • 外部サイトへのリンク集
  • SNSリンクなどにも応用可能！

📝 注意点

このコードは、ブログ内の 1箇所にだけ設置するのがおすすめです。同じCSSスタイルが重複しないように注意しましょう。

QooQ