ホーム / Bloggerでスクロールに追従する「動くサブタイトル」を設置する方法 /

Bloggerでスクロールに追従する「動くサブタイトル」を設置する方法

私のブログはBloggerで作ったホームページ「P-LIFE.NET」内にあるため、ブログを表示してもウェブサイトのタイトルである「P-LIFE.NET」が目立ってしまい、ブログタイトル「P-BLOGGER」を目立たせることができていませんでした。

そこでホームページのタイトルはそのまま維持して、サブタイトルがスクロールについてくるようにして、サブタイトルである「P-BLOGGER」を目立たせてみることにしました。

ブログ本来のタイトルを H1、追従するサブタイトルを H2 にすることで、SEOの階層構造を崩さずに目立たせることができます。

やり方

ステップ1：CSSを追加する

Bloggerの管理画面 ＞「テーマ」＞「HTMLの編集」を開き、<style> タグ内や ]]></b:skin> の直前に以下のCSSコードをコピー＆ペーストします。

CSS
/* ==========================================
  追従サブタイトルのデザインと設定
========================================== */
.sticky-subtitle {
  position: -webkit-sticky;
  position: sticky;
  top: 0; /* 画面の一番上に固定 */
  z-index: 999; /* 最前面に配置 */
  background-color: #ffffff; /* 背景色（スクロール時に文字が透けないよう指定） */
  padding: 15px 20px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 少し影をつけて浮き上がらせる */
}
/* サブタイトル（H2）のスタイル */
.sticky-subtitle h2 {
  font-size: 24px; /* 文字サイズはお好みで調整 */
  font-weight: bold;
  color: #333333;
  margin: 0;
}
/* H2内リンクのデザイン調整 */
.sticky-subtitle h2 a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.sticky-subtitle h2 a:hover {
  opacity: 0.8;
}
/* スマホ表示では追従を解除してスッキリさせる場合 */
@media screen and (max-width: 990px) {
  .sticky-subtitle {
    position: static;
  }
}

ステップ2：HTMLを追加する

次に、テンプレート内のヘッダー付近や、サブタイトルを表示させたい場所に以下のHTMLコードを貼り付けます。

HTML
<!-- 追従サブタイトル（H2版） -->
<div class='sticky-subtitle'>
  <h2><a href="https://あなたのブログのURL">ここに表示させたいサブタイトルやキャッチコピーを入れる</a></h2>
</div>

応用編：特定のページだけに表示させる方法

「すべてのページではなく、特定のページやホームページだけにこのサブタイトルを出したい！」という場合

例えばホームページ画面では表示させず、ブログ画面だけ表示させたいなどという場合、

Bloggerの条件分岐タグ（<b:if>）で囲むことで表示をコントロールできます。

特定のURLでのみ表示させたい場合のコード例：

HTML（条件分岐）
<b:if cond='data:blog.url == &quot;https://あなたのブログのURL/p/index.html&quot;'>
  <div class='sticky-subtitle'>
    <h2><a href="https://あなたのブログのURL">トップページ専用のサブタイトル</a></h2>
  </div>
</b:if>

まとめ

CSSの position: sticky; を活用することで、プラグインを使わなくても簡単に動くサブタイトルを実装することができます。自作のナビゲーションバーなどを使っている場合は、top の数値を調整することで綺麗に共存させることも可能です。

ぜひ、ご自身のブログのデザインに合わせてカスタマイズしてみてください！

QooQ