「Blogger」関連記事をラベル連動で超簡単に表示させたい【T】
 |
ガジェット追加で関連記事を表示させるメリット
レイアウトページから「HTML/JavaScript」ガジェットを利用して関連記事を設置する方法は、テンプレートの根幹を汚さずに機能を拡張できるため、非常に安全で管理しやすいという利点があります。
一度ガジェットとして登録してしまえば、表示位置の微調整もマウスのドラッグ操作で行えるようになり、コードを直接触る機会を減らしつつ、ブログのデザイン性を高めることが可能になります。
サムネイル画像や抜粋文が含まれるリッチな表示形式は、文字だけのリンクよりも読者の視線を強く引きつけ、あなたのブログ内の他の価値ある記事へと自然に導く強力な案内板として機能します。
具体的には以下の内容に注目して導入を検討してください。
管理画面からいつでもコードの修正や機能のオンオフができるため、メンテナンス性が格段に向上する。
記事のラベル情報に基づいた動的なリスト生成により、手動でリンクを貼る手間を完全に排除できる。
画像とテキストを組み合わせたモダンなレイアウトにより、ブログ全体のプロフェッショナルな印象を強化できる。
アドバイスとして、この方法はテンプレートを問わず汎用的に利用できるため、将来的にブログのテーマを変更した際にも、同じ手順で簡単に機能を復元できる強みがあります。
レイアウト画面に貼り付ける具体的なコード内容
以下のコードを丸ごとコピーして、Blogger管理画面の「レイアウト」＞「ガジェットを追加」＞「HTML/JavaScript」のコンテンツ欄に貼り付けてください。
このコードは、スタイルシート（CSS）と制御用プログラム（JavaScript）がセットになっており、記事ページが表示されたときだけ自動で動作して、適切な関連記事を抽出しデザインを整える役割を果たします。
/* 関連記事エリア全体のスタイル */
#related-posts-container {
margin-top: 40px;
}
#related-posts-container h2 {
font-size: 1.1rem;
margin-bottom: 25px;
}
/* 各記事のコンテナ */
.related-entry {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 40px;
}
/* 記事タイトル */
.related-entry-title {
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
text-align: left;
}
/* 画像とテキストの横並びエリア */
.related-entry-inner {
display: flex;
gap: 32px;
align-items: flex-start;
}
.related-entry-thumb {
height: 88px;
padding: 0;
width: 88px;
object-fit: cover;
}
.related-entry-body {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 110px;
flex-grow: 1;
}
.related-entry-snippet {
margin: 0;
color: #666;
font-size: 16px;
line-height: 1.6;
text-align: left;
}
/* 続きを読むリンク */
.related-entry-more {
text-decoration: none;
font-size: 16px;
text-align: right;
margin-top: 10px;
font-weight: bold;
display: block;
}
</style>
<script type='text/javascript'>
//<![CDATA[
(function() {
if (window.location.href.indexOf('/20') == -1) return;
var containerHtml = '<div id="related-posts-container"><h2>関連のある投稿記事</h2><div id="related-posts-content">読み込み中...</div></div>';
var postBody = document.querySelector('.post-body');
if (postBody) {
var wrapper = document.createElement('div');
wrapper.innerHTML = containerHtml;
postBody.parentNode.insertBefore(wrapper, postBody.nextSibling);
}
window.handleRelated = function(json) {
var div = document.getElementById('related-posts-content');
var html = '<div>';
var count = 0;
var currentUrl = window.location.href.split('?')[0].split('#')[0];
if (json.feed.entry) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var title = entry.title.$t;
var url = entry.link.find(l => l.rel === 'alternate').href.split('?')[0].split('#')[0];
var thumb = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72-c', 's150-c') : 'https://placehold.jp/150x150.png?text=No+Image';
var snippet = (entry.summary ? entry.summary.$t : (entry.content ? entry.content.$t.replace(/<[^>]*>/g, "") : "")).substring(0, 100) + "...";
if (url !== currentUrl && count < 5) {
html += '<div class="related-entry">';
html += '<a href="' + url + '" class="related-entry-title">' + title + '</a>';
html += '<div class="related-entry-inner">';
html += '<a href="' + url + '" style="flex-shrink:0;"><img src="' + thumb + '" class="related-entry-thumb" alt="' + title + '"/></a>';
html += '<div class="related-entry-body">';
html += '<p class="related-entry-snippet">' + snippet + '</p>';
html += '<a href="' + url + '" class="related-entry-more">続きを読む »</a>';
html += '</div></div></div>';
count++;
}
}
}
div.innerHTML = (count > 0) ? html + '</div>' : '関連記事はありません';
};
var labelLinks = document.querySelectorAll('a[href*="/search/label/"]');
if (labelLinks.length > 0) {
var label = labelLinks[0].href.split('/label/')[1].split('?')[0];
var script = document.createElement('script');
script.src = '/feeds/posts/default/-/' + label + '?alt=json-in-script&callback=handleRelated&max-results=6';
document.body.appendChild(script);
}
})();
//]]>
</script>
作業をスムーズに進めるため、上記のコードをコピーした後は、レイアウト画面の「ガジェットを追加」から「HTML/JavaScript」を選び、コンテンツ欄にペーストして保存するだけの操作で完了します。
注意点として、一部のテーマでは記事本文のクラス名が「.post-body」ではない場合があるため、もし表示されない場合はご自身のテンプレートのHTML構造を確認し、クラス名を微調整する必要があります。
スタイルを調整してブログの雰囲気に合わせたい
標準のコードでも十分に使用できますが、デフォルトのサイズや余白を自分のブログのイメージに合わせて微調整することで、より一体感のある美しい関連記事エリアを完成させる高度な手順を説明します。
CSS（スタイルシート）の数値を少し書き換えるだけで、画像の大きさを変更したり、見出しの太さを変えたりすることができ、あなたのブログの個性を反映させた独自のレイアウトへと進化させることが可能です。
細部へのこだわりは読者への配慮となり、読み心地の良い環境を提供することで、あなたの発信するメッセージがより正確に、そして心地よく読者の心に届くようになるはずです。
作品の表現を広げるため、以下の手順で調整を行ってください。
ガジェット内の「style」タグの中にある「font-size」の数値を変更して、本文の文字の大きさに合わせる。
画像のサイズを大きくしたい場合は「.related-entry-thumb」の「height」と「width」の数値を、100pxなど好みのピクセル数に書き換える。
見出しの言葉を「あわせて読みたい」などに変更したい場合は、JavaScript内の「containerHtml」変数に含まれる「h2」タグの中身を書き換える。
編集が終わるたびにガジェットを保存し、スマートフォンでの見え方も確認しながら、最適な視覚バランスを追求して微調整を繰り返す。
アドバイスとして、余白（marginやpadding）を広めに設定しておくことで、全体的にゆとりが生まれ、モバイルユーザーにとっても非常に見やすいレイアウトになります。
回遊率の改善によるブログ成長の効果を実感したい
関連記事が自動で表示されるようになると、一つの記事で終わっていた読者の訪問が、二つ、三つと連鎖していくようになり、ブログ運営における確かな手応えを感じられるようになります。
あなたが過去に時間をかけて書いた記事が、新しい読者によって次々と発見され、再び日の目を見るようになることで、コンテンツ制作に対するモチベーションも大きく向上するはずです。
読者にとっても、検索の手間を省いて興味のある情報を芋づる式に得られる環境は非常に価値があり、あなたのブログを「また訪れたい場所」として記憶してくれるきっかけになるでしょう。
具体的には以下の内容に注目して効果を実感してください。
1回の訪問あたりのページビュー数が増加し、読者がサイト内に長く留まってくれるようになる。
過去の記事にも継続的にアクセスが流入するようになり、ブログ資産としての価値が安定する。
自動化されたシステムが記事を繋いでくれるため、あなたは次に何を書くべきかというクリエイティブな思考に集中できる。
注意点として、関連記事を表示させるには記事に必ず「ラベル」が設定されている必要があるため、過去の記事のラベル付けが漏れていないか定期的にチェックを行いましょう。
