_

Bloggerに関するカスタマイズ・テンプレート・TIPSを紹介しています。

2026/03/01

Blogger『Materiapollo Blogger Theme』カスタマイズ更新履歴

event_note3月 01, 2026 editBy まつゆう forumNo comments

これまでに『Materiapollo Blogger Theme』を採用している当ブログが行ったカスタマイズ履歴をまとめています。

Header

メタデータのカスタマイズ

参考サイト : ふじろじっく｜【Blogger】head内のメタデータをカスタマイズ

  • SEO用メタタグの整理
    • <meta name="description"> に記事概要を明記
    • <meta name="keywords"> を必要最小限に整理
    • <title> を記事ごとに最適化
  • SNSシェア用タグ（OG / Twitterカード）の追加
    • Open Graph タグ：og:title, og:description, og:image, og:url
    • Twitterカード：twitter:card, twitter:title, twitter:description, twitter:image
  • 整理・最適化
    • メンテナンス性向上、SEO・SNS表示の安定化のため、冗長・重複タグを削除、head 内を整理
目的
検索エンジンとSNS表示の最適化、重複タグの整理による品質向上

Googleフォントの読み込み

参考記事 : Blogger TIPS｜BloggerでGoogleフォントを使用するためのガイド

ブログタイトルの箇所のみGoogleフォントを使っています。

Font Awesomeの読み込み

参考記事 : Blogger TIPS｜BloggerでCDNを経由してFont Awesomeを使う方法

見出し構造のカスタム

Bloggerの標準仕様では「ブログタイトル」が全ページで <H1> に固定されており、個別記事のタイトルが <H2> に格下げされてしまうSEO上の弱点があるため。

解決方法 : テンプレートのXMLを編集し、条件分岐タグ（b:if）を用いて、記事ページでは「記事タイトル」を <H1> に、一覧ページでは <H2> に動的に切り替える処理を実装。 


<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<h1 class='post-title entry-title'><data:post.title/></h1>
<b:else/>
<h2 class='post-title entry-title'><data:post.title/></h2>
</b:if>

このコードだけではすべての見出しに反映されなかったため該当箇所を探しながら修正。

[ 記事ページ ]

<div>ブログタイトル</div>
<H1>記事タイトル</H1>
        <H2>本文内見出し</H2>

[ 一覧ページ ]

<div>ブログタイトル</div>
<H2>記事タイトル</H2>

目的
SEO上のH1構造の是正

Materialize や jQuery を CDN から読み込む

上で紹介されているようにxmlに記述されているCSS・JavaScriptを外部から読み込むように設定。

追加したCSSをGithubから読み込む

カスタマイズで追加するCSSをGithubにCSSファイルとして作成し、外部から読み込むようにしました。

グローバルメニューのカスタマイズ

Materiapollo Blogger Themeのグローバルメニューはレイアウト画面からの追加・修正などができないためHTML編集画面から直接設定する必要がある。 

    <ul class='side-nav' id='slide-out'>
      <li><a href='https://blogger.matsusanjpn.com/search/label/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?&amp;max-results=7'>カスタマイズ</a></li>
      <li><a href='https://blogger.matsusanjpn.com/search/label/TIPS?&amp;max-results=7'>Blogger TIPS</a></li>
      <li><a href='https://blogger.matsusanjpn.com/search/label/TOOL?&amp;max-results=7'>Blogger TOOL</a></li>
      <li class='no-padding'>
        <ul class='collapsible collapsible-accordion'>
          <li>
            <a class='collapsible-header'>テンプレート<i class='material-icons'>arrow_drop_down</i></a>
            <div class='collapsible-body'>
              <ul>
                <li><a href='https://blogger.matsusanjpn.com/search/label/%E3%83%86%E3%83%BC%E3%83%9E%20%3A%20%E5%9B%BD%E5%86%85?amp;max-results=7'>国内</a></li>
                <li><a href='https://blogger.matsusanjpn.com/search/label/%E3%83%86%E3%83%BC%E3%83%9E%20%3A%20%E6%B5%B7%E5%A4%96?amp;max-results=7'>海外</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>

    <ul class='right hide-on-med-and-down'>
      <li><a href='https://blogger.matsusanjpn.com/search/label/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?&amp;max-results=7'>カスタマイズ</a></li>
      <li><a href='https://blogger.matsusanjpn.com/search/label/TIPS?&amp;max-results=7'><i class='fa-solid fa-marker' style='font-size:13px; margin:0 5px 0 0;'/>Blogger TIPS</a></li>
      <li><a href='https://blogger.matsusanjpn.com/search/label/TOOL?&amp;max-results=7'><i class='fa-solid fa-screwdriver-wrench' style='font-size:13px; margin:0 5px 0 0;'/>Blogger TOOL</a></li>
      <li><a class='dropdown-button' data-activates='dropdown1' href='#!'><i class='fa-brands fa-blogger-b' style='font-size:13px; margin:0 5px 0 0;'/>テンプレート<i class='material-icons'>arrow_drop_down</i></a></li>
      <ul class='dropdown-content' id='dropdown1'>
        <li><a href='https://blogger.matsusanjpn.com/search/label/%E3%83%86%E3%83%BC%E3%83%9E%20%3A%20%E5%9B%BD%E5%86%85?amp;max-results=7'>国内</a></li>
        <li><a href='https://blogger.matsusanjpn.com/search/label/%E3%83%86%E3%83%BC%E3%83%9E%20%3A%20%E6%B5%B7%E5%A4%96?amp;max-results=7'>海外</a></li>
      </ul>
    </ul>

上がハンバーガーメニュー、下がグローバルメニューとなっている。ここではURLの末尾に max-results=7' を付与した形で記述しています。

一覧ページ

トップページにアピールエリアを追加

時間をかけた記事を読者に読んでもらいたいことからトップページのみに記事のアイキャッチ+タイトルを記載したガジェットエリアを新設。

<b:widget cond='data:view.isHomepage' id='HTML8' locked='false' title='トップページ専用' type='HTML' version='1'>
</b:widget>

トップページのみに表示する条件式

    <b:if cond='data:view.isHomepage'>
      <div class='widget-content'>
        <data:content/>
      </div>
    </b:if>

このエリア内には

<div class='tpd-random-wrapper' style="margin: 0PX 0 20px;">
    <div id='tpd-random-box' style='display:none;'>
        <!-- A  -->
        <!-- B  -->
        <!-- C  -->
        <!-- D  -->
   </div>
</div>

という4つの要素が入っており、スクリプトによってランダムで1要素を選び、表示させている。今回使った<!--  A--> ～ <!-- C --> にはCSSの[まだ未公開記事]、<!--  D --> には [まだ未公開記事] がパッケージされている。

利用しているコードは以下の通り


<script>
(function() {
const box = document.getElementById('tpd-random-box');
if (box) {
const units = Array.from(box.children);
const winnerIdx = Math.floor(Math.random() * units.length);
box.style.display = 'block';
units.forEach((u, i) => { if (i !== winnerIdx) u.remove(); });
}
</script>

ページネーション

今回こだわったのは「記事一覧」「検索結果一覧」「ラベル一覧」「ハッシュタグ一覧」「アーカイブ一覧」ですべて「7」件の表示、かつ正しくページネーションが表示され、動作している状態。こちらはとにかく大変で、修正に修正を重ねた。

実装当初から難航を極めた。実装過程での不具合例としては

  • 2ページ目の表示件数が一件足りない
  • ページネーションがない
  • 表示件数と設定件数が合わない

どこかを直せば別の箇所で不具合が発生するというループに囚われてしまった。なんとか完成したのはこれを書いているほんの数分前の出来事である。

目的
全一覧ページで表示件数を統一しUXを安定させる

日付表示の変更

参考サイト : A FAN OF WRX STI｜【Blogger】テーマ［Materiapollo］の紹介とカスタマイズ方法
こちらで紹介されているスクリプトで投稿日時のフォーマットの変更を行った。

ランダムポストの設置

一覧ページのみに表示されるランダムポストの設置
関連記事 : Blogger TIPS｜ないなら作ったらいいじゃない？Bloggerで簡単調整ランダムポスト表示

自作のスクリプト利用して、サムネイルが横幅フル表示されるタイプのランダムポストを設置しました。このフルサイズタイプはトップページを含む記事以外のページで表示されるように条件式で分岐させています。

個別ページ

404ページ

Codepenで拾ったコードをコンバートして404ページに適用しました。

各種ページ作成

About Me (自己紹介) 、プライバシーポリシー、Contactページ、サイトマップを作成しました

Contactページ

関連記事 : Blogger TIPS｜Bloggerにコンタクトフォームを設置する

サイトマップ

参考サイト : ふじろじっく｜【F-light】カスタム サイトマップ & 最新コメント ウィジェット

記事ページ

パンくずリストの構造化データ［Schema.org］へ対応

参考サイト : A FAN OF WRX STI｜【Blogger】テーマ［Materiapollo］の紹介とカスタマイズ方法

上記の方法で構造化データへの対応は完了するが、そのままだとパンくずリストの表示が縦にならんでしまうので横並びになるようにCSSで調整しました。 


.breadcrumbs.card ul
{
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}

日付フォーマットを修正

一覧ページで紹介しているスクリプトだと当ブログの表示は「dd yyyy mm」表記になっていたのでこれを修正しました。 


<script>
//<![CDATA[
(function() {
  const fixArticleDateOnly = () => {
    // 記事ページ特有の「2月 27, 2026」という形式を探す
    document.querySelectorAll('.thetime').forEach(el => {
      const txt = el.textContent;
      
      // 「〇月 〇, 〇」という形式が含まれているかチェック
      if (txt.includes('月') && txt.includes(',')) {
        const m = txt.match(/(\d+)月\s+(\d+),\s+(\d+)/);
        if (m) {
          const yyyy = m[3];
          const mm = m[1].padStart(2, '0');
          const dd = m[2].padStart(2, '0');
          const newDate = `${yyyy}/${mm}/${dd}`;

          // アイコン(iタグ)があればそれを活かし、テキストだけ置換
          const icon = el.querySelector('i');
          if (icon) {
            el.innerHTML = icon.outerHTML + newDate;
          } else {
            el.textContent = newDate;
          }
        }
      }
    });
  };

  // ページの読み込み完了時と、念のため少し遅らせて実行
  window.addEventListener('load', fixArticleDateOnly);
  setTimeout(fixArticleDateOnly, 1000);
})();
//]]>
</script>

読了メーターの設置

AIに提案された「今ページをどの程度読んでいるのか」を表示する機能。ブログ上部にプログレスバーでどの程度進んでいるのかを確認することができます。 


<div id='reading-progress-container'>
  <div id='reading-progress-bar'></div>
</div>

<style>
/* 読了メーターのスタイル */
#reading-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 10000;
  pointer-events: none;
}
#reading-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #2196F3, #00BCD4);
  transition: width 0.1s ease-out;
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
}
</style>

<script type='text/javascript'>
// <![CDATA[
(function() {
  const updateProgress = () => {
    // ターゲット要素を複数候補から探す
    const content = document.querySelector('.post-body, .entry-content, .item-post-inner');
    const bar = document.getElementById('reading-progress-bar');
    if (!content || !bar) return;

    const rect = content.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const contentTop = rect.top + scrollTop;
    const contentHeight = content.offsetHeight;
    const windowHeight = window.innerHeight;

    let progress = 0;
    // 記事の開始位置を過ぎたら計算開始
    if (scrollTop > contentTop) {
      // (現在の位置 - 開始位置) / (記事の高さ - 画面の高さ)
      // 画面の高さ分を引くことで、記事の末尾が画面下に来た時に100%になる
      progress = ((scrollTop - contentTop) / (contentHeight - windowHeight)) * 100;
    }

    progress = Math.min(100, Math.max(0, progress));
    bar.style.width = progress + '%';
  };

  window.addEventListener('scroll', updateProgress, { passive: true });
  window.addEventListener('resize', updateProgress, { passive: true });
})();
// ]]>
</script>
目的
滞在時間向上・UX改善

読了時間の目安を設置

関連記事 : Blogger TIPS｜Bloggerに「この記事は◯分で読めます」と自動表示させる

こちらもAIに提案されてJavaScriptを自作し、実装したもの。
解決済み : 以前はソースコードも読了時間の対象となっていましたが、現在は除外して正確に計測しています。

各種カスタマイズ 

引用

参考サイト :  ゼロから始めるWebと創作の記録｜【CSSコピペOK】おしゃれな引用blockquoteデザイン10選

東京パフォーマンスドール（とうきょうパフォーマンスドール、略称：TPD）は、日本のガールズグループ、女性アイドルグループ。

タブメニュー

関連記事 : Blogger TIPS｜Bloggerでタブ切り替えを実装する方法

ソースコードを掲載するときに HTML・CSS / JavaScript に分けて掲載するときなどに活用。

CTAボックス 

自分で考えたレイアウトをもとにAIに作ってもらいました。

タイムライン

参考サイト : フジブロっ!｜ステップバー(タイムライン)で手順の説明をオシャレに分かりやすくするCSS

STEP
タイトル
本文
STEP
タイトル
本文

コードブロック

コードをブログに掲載できるように + コードをコピーできるボタンを実装。 CSSのボタン色のみ変更しています。

はてなスター設置

参考サイト : ふじろじっく｜【F-light】はてなスターボタンを付けてみた

いいねボタン設置

参考記事 : Blogger TIPS｜Bloggerにスプレッドシート+GAS+JavaScriptで「いいね」ボタンを実装する

こちらもAIとの共作スクリプト。同様の構成で構築された「いいね」ボタンの実装方法がネットで検索するとヒットするのだが、それとはやや異なるアプローチとなっている。

関連記事

参考サイト : 1983NOTE｜Bloggerでシンプルな関連記事を簡単に表示する方法

Bloggerの関連記事はいくつもあって、サムネイル + タイトル というものが多いのだが、レイアウトの問題やそもそもアイキャッチは必要なのか? という考えから今回はタイトルのみのシンプルなものを選定。

CSSも1983さんに掲載されているものを採用しています。

Googleアドセンス

記事の下にGoogleアドセンスが掲載されるようにHTML編集からスクリプトコードを貼付。

投稿者

毎記事の下に投稿者情報が表示されるように調整しました。

サイドバー

プロフィール

参考サイト : フジブロっ!｜はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン１０選

タイトルに「はてなブログ」とありますが、Bloggerでも問題なく利用できます。

こちらの背景欄に 


<main class="eva-main">
        <article id="eva_poster_box">
            <div id="eva_poster_title_area">
                <h1 id="eva_poster_main_title" data-title="EVANGELION">EVANGELION</h1>
            </div>
            <p id="eva_poster_sub_title">
                <span data-title="SHIN"></span> 
                <span data-title="EVANGELION"></span>
            </p>
            <img id="eva_poster_image_front" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhytOVurzYoqqY2DcItM3w9yG7kisai8_xTQyY-UXwVgBnWzevtmzSQMPDKHVHNoyF3nia5xzxZBbo6KmuEkdD1leW2PJdhNOTqQ6VziJmhmA0RmZ5YUBQAF16hDlhpLKASCn034UNs21FTAD9bfANANnaO_awOeK5Jr1r_P5lfviSSXBv99A0KI7z9vJY/s1600/d190szd-2dd1e295-122f-4dd3-bf89-b65df8f03287_transparent.png" alt="Eva Front image" />
        </article>
</main>

<style>
/* 3Dポスターヘッダーエリア */
.eva-header-wrapper {
    background: #000;
    padding: 30px 0;
    width: 100%;
}

.eva-main {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
}

@keyframes eva-rotate-anim {
    0% { transform: rotateY(-10deg) rotateX(-2deg); }
    50% { transform: rotateY(10deg) rotateX(2deg); }
    100% { transform: rotateY(-10deg) rotateX(-2deg); }
}

#eva_poster_box {
    aspect-ratio: 16 / 9;
    background: center / cover no-repeat url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVe65lmVea0AQm2Ea4xvb_DkuIKsmGKd6P-UkMpKQInOCWzd2-Ejbq33tCE7uC1Zm4yPBJkXkojSySPFDDcxcg0RY8YyasHeWvZrMfaLdxby-gBBBVNEeixLbZvbrtfGIA-or3F5FsrJS9qChbMu6GnmHuTuu63YzG_rxsKWiFE9am5SVOmYQ2aZVvTdk/s1600/EVANGERION%20%281%29.png');
    width: 90%;
    position: relative;
    animation: eva-rotate-anim 8s ease-in-out infinite;
    transform-style: preserve-3d;
    border-radius: 4px;
}

#eva_poster_title_area {
    position: absolute;
    top: 15%;
    width: 100%;
    text-align: center;
    transform: translateZ(30px);
}

#eva_poster_main_title {
    font-family: 'Agency FB Black', sans-serif !important;
    font-size: 38px !important;
    margin: 0 !important;
    line-height: 1em !important;
    background: linear-gradient(to bottom, #fff, #ccc);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display: block;
}

#eva_poster_image_front {
    position: absolute;
    bottom: -5%;
    left: 5%;
    width: 90%;
    height: auto;
    transform: translateZ(60px);
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.6));
    pointer-events: none;
}
</style>

このコードと差し替え、NERVのロゴが3Dで浮いたように見えるよう変更しました。

SNSフォローボタン

ホバーすると四角から丸に表示が変わるようなCSSを採用しました。 


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400" rel="stylesheet" />

<div class="social-buttons-container">
  <div class="effect aeneas">
    <div class="buttons">
      <a href="TwitterのURL" class="tw" title="Twitter"><i class="fa fa-twitter"></i></a>
      <a href="フィードURL" class="rss" title="RSS"><i class="fa fa-rss"></i></a>
      <a href="YouTubeのURL" class="youtube" title="YouTube"><i class="fa fa-youtube-play"></i></a>
    </div>
  </div>
</div>

<style>
.social-buttons-container {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}

.effect {
    width: 100%;
    padding: 30px 0;
    /* 背景色をなし（透明）に設定 */
    background-color: transparent;
}

.effect h2 {
    /* 背景が白系になることを想定して文字色を暗めに変更 */
    color: #333;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0;
}

.effect .buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.effect a {
    text-decoration: none !important;
    color: #fff !important;
    /* アイコンサイズを60pxから45pxに縮小 */
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 20px;
    overflow: hidden;
    position: relative;
    transition: transform 0.4s linear, border-radius 0.4s linear;
}

.effect a i {
    transition: transform 0.4s linear;
}

/* ホバーエフェクト: 回転しながら丸くなる */
.effect a:hover {
    transform: rotate(360deg);
    border-radius: 50%;
}

.effect a:hover i {
    transform: rotate(-360deg);
}

/* ブランドカラーの設定 */
.effect a.tw { background-color: #00aced; }
.effect a.rss { background-color: #ff8c00; }
.effect a.youtube { background-color: #bb0000; }

.effect
 {
    width: 100%;
    padding: 0px 0;
    background-color: transparent;
}
</style>

最新記事

参考サイト : IB-Note｜【超軽量】Blogger用最新の投稿ウィジェット

アーカイブ

タイプは「フラット」を選択。日付フォーマットが「◯月 2026」となっているのでこれを「2026 2月」となるようにスクリプトで対応しました。 

<script>
//<![CDATA[
(function() {
  const fixArticleDateOnly = () => {
    // 記事ページ特有の「2月 27, 2026」という形式を探す
    document.querySelectorAll('.thetime').forEach(el => {
      const txt = el.textContent;
      
      // 「〇月 〇, 〇」という形式が含まれているかチェック
      if (txt.includes('月') && txt.includes(',')) {
        const m = txt.match(/(\d+)月\s+(\d+),\s+(\d+)/);
        if (m) {
          const yyyy = m[3];
          const mm = m[1].padStart(2, '0');
          const dd = m[2].padStart(2, '0');
          const newDate = `${yyyy}/${mm}/${dd}`;

          // アイコン(iタグ)があればそれを活かし、テキストだけ置換
          const icon = el.querySelector('i');
          if (icon) {
            el.innerHTML = icon.outerHTML + newDate;
          } else {
            el.textContent = newDate;
          }
        }
      }
    });
  };

  // ページの読み込み完了時と、念のため少し遅らせて実行
  window.addEventListener('load', fixArticleDateOnly);
  setTimeout(fixArticleDateOnly, 1000);
})();
//]]>
</script>

注目記事

関連記事 : Blogger TIPS｜ないなら作ったらいいじゃない？Bloggerで簡単調整ランダムポスト表示

記事ページには左側にサムネイル画像、右側にタイトルが表示されるオーソドックスなランダムポストが表示されるガジェットを配置。

こちらもAIとの共作スクリプト。

追従式目次

関連記事 : Blogger TIPS｜Bloggerのサイドバーに追従式の目次を設置する

サイドバーに目次のガジェットを固定させ、スクロールしても目次が追従。最初の頃のスクリプトではガジェットの内容がすべて描画されてから固定されていたが、それだとページを開いた直後などで固定されない場面があったため、読み込みをまたずに固定されるように調整を加えています。

著作権表示

関連記事 : Blogger TIPS｜Bloggerで著作権年を自動化するスクリプト

著作権の著作年表示をスクリプトで自動表示しています。

フッター

ハッシュタグ


本当は記事下に表示させたかったのだが、『Materiapollo』では記事下に表示させることが出来なかったので、フッター部分に表示させています。

まつゆう
アラフォーゲーマーがいろんなゲームを楽しみながらプレイしています。YouTube・Twitch・Mixerで配信中!! 東京パフォーマンスドールの狂信者。 好きすぎてドメインを取得してファンサイトを運営中。
tweet facebook Pocket B!はてブ LINE

0 comments:

コメントを投稿