Bloggerカスタマイズ：AIと作る「使いやすさ」を追求した3つの改善ポイント

2026/01/21

日々少しずつデザインの変更などをしているブログですが、今回は大きめな変更なので3つのポイントをまとめました。

1. テキストリンクのホバー色を最適化

記事内のテキストリンクにマウスを置いた際の反応を改善しました。GOさんの記事を参考に、リンクホバー時の色を変更しました。画像リンクや目次エリア（#toc）を自動的に除外するようにカスタマイズさせていただきました。また、ブログの本文のみに適用するようにしています。

設定方法（CSS）

/* --- 記事本文：テキストリンクのみホバー色を変更 --- */
/* 目次(#toc)と画像リンク(:has(img))を除外して適用 */
.post-body a:not(#toc a):not(:has(img)):hover {
  color: #fd7130 !important; /* アクセントカラー。お好みの色に！ */
}

2. 応援エリアの刷新：デザイン統合と囲みの追加

今回の大きな変更点の一つが、記事末尾の「応援・シェアエリア」のリニューアルです。これまでバラバラに配置されていたバナーやボタンを、一つの専用ユニットとして統合し、囲み枠を追加しました。

オレンジ色の枠線で囲み、記事の最後であることが視覚的にパッと伝わるようになり、ブログ全体の質感を高めています。

設定方法（CSS）

/* --- 応援エリア全体の囲い --- */
.vote-section-container {
  margin: 60px auto; 
  padding: 25px 15px;
  max-width: 500px;
  /* 変数を使用。未設定の場合は第2引数の色コードが適用されます */
  border: var(--brand, #fd7130) solid 1.5px;
  border-radius: 12px;
  background-color: var(--light-bg, #fafafa);
  color: var(--color, #333);
  box-sizing: border-box;
  text-align: center; 
}

/* メッセージ文章 */
.vote-msg {
  font-weight: bold;
  margin: 0 0 20px 0;
  display: block;
  text-align: center;
}

/* ランキングバナー（上ボタン） */
.ranking-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ranking-links img {
  height: 45px;
  width: auto;
  border-radius: 6px; 
  transition: transform 0.2s ease;
}

/* バナーホバー時のアニメーション */
.ranking-links a:hover img {
  transform: translateY(-5px);
}

テンプレートへの組み込み（HTML）

Bloggerテンプレート内の postShareButtons 部分を以下のように構成しています。リンク先をご自身のものに書き換えるだけで簡単に導入可能です。

<b:includable id='postShareButtons' var='post'>
<div class='vote-section-container'>

  <div class='ranking-links'>
  <!-- 1. ここに、各サービスから取得したボタンのコードを配置 -->
  </div>

  <!-- 2. メッセージエリア：文言は自由に変更してください -->
  <p class='vote-msg'>この記事が役に立ったら、応援・シェアをお願いします！</p>
    
  <!-- 3. SNSシェアボタンエリア：お使いのシェアコードをここに -->
  <div class='sns-share-buttons'>
    <!-- ここにシェアボタンのタグを挿入 -->
  </div>

</div>
</b:includable>

3. 画像の「拡大表示」と「リンク」の判別機能

画像をタップすると、別のページで画像が開いてしまいスムーズな閲覧を妨げていたので、タップで拡大表示をするように変更しました。バナーなどのリンクはタップでリンクが開きます。

ふじろじっくさんの投稿されている内容に、ただの画像はその場でふわっと拡大表示し、リンクが設定されている画像はそのままリンク先を開くという挙動の追加と、右下のラベル表示で見分けがつくようにする機能を追加しました。

リンク先が画像であれば拡大表示、そうでなければリンク先を開くようになっています。

拡大表示

リンクを開く

設定方法（JavaScript）

/* </body>直前に挿入。*/
<b:if cond='data:view.isSingleItem'>
<script src='//cdn.jsdelivr.net/npm/smooth-zoom@latest/dist/zoom.min.js'/>
<script>
//<![CDATA[
(function() {
  const items = document.querySelectorAll('.separator, .tr-caption-container tr td');
  items.forEach((item) => {
    const a = item.querySelector('a');
    let label = "";
    let target = null;

    if (a) {
      const href = a.getAttribute('href') || "";
      const isImg = /\.(jpg|jpeg|png|gif|webp|bmp)(\?.*)?$/i.test(href) || href.includes("blogger.googleusercontent.com");
      const img = a.querySelector('img');

      if (isImg && img) {
        img.classList.add("zoomable");
        item.removeChild(a); // 拡大表示を優先
        item.appendChild(img);
        target = img;
        label = "［ タップで拡大表示 ］";
      } else if (img) {
        target = a;
        label = "［ リンクを開く ］";
      }
    } else {
      const loneImg = item.querySelector('img');
      if (loneImg) {
        loneImg.classList.add("zoomable");
        target = loneImg;
        label = "［ タップで拡大表示 ］";
      }
    }
    
    if (label && target) {
      const wrap = document.createElement('div');
      wrap.className = 'img-label-wrapper';
      target.parentNode.insertBefore(wrap, target);
      wrap.appendChild(target);
      const span = document.createElement('span');
      span.className = 'img-action-label';
      span.innerText = label;
      wrap.appendChild(span);
    }
  });

  Zoom(".zoomable");

  // 高画質版(s0-rw)に置換
  document.querySelectorAll('.img-label-wrapper img').forEach(img => {
    img.src = img.src.replace(/\/[swh]\d+.*?\//, "/s0-rw/").replace(/=[swh]\d+.*/, "=s0-rw");
  });
})();
//]]>
</script>
</b:if>