【Blogger×JetTheme】ログの回遊率アップ！関連記事を「Yahoo!ニュース風」のカード形式にして一括管理する方法
【Blogger×JetTheme】ログの回遊率アップ！関連記事を「Yahoo!ニュース風」のカード形式にして一括管理する方法
Yahoo!ニュース風の記事一覧みたいに、関連記事一覧をBloggerでやりたい
こんなお悩みにお答えします。
今回は、Blogger×JetThemeで作成するブログの関連記事一覧「Yahoo!ニュース風」を分かりやすく紹介します。
記事ごとに関連記事のリンクを貼るのではなくて、一括で管理できるようにしました。
現状はというと、記事のところに、その関連記事のリンクを１つずつ記事に貼り付けていました。
リンク先の記事名を変えたときに、それぞれの記事のリンクを１つずつ修正をしないといけなくて、大掛かりな作業となってる状況でした。
今回、関連記事の総まとめ（記事一覧）を１つ用意して、そのリンクをそれぞれの記事に貼り付けることで、総まとめのところを修正したら、自動で関連記事もすべて入れ替わることをしたいと思います。
備忘録として残しておきます。
［Google広告]
方法 / HTML /
ポイント：
投稿ではなく、ページで作成します。（固定ページにします。）
<div id="rel-cooking">
<div class="my-related-card">
<a href="記事URL">ここに記事のURLを入れる
<img src="画像のURL" />ここに画像のURLを入れる
<div class="my-related-text">
<p class="my-related-title">ここに記事のタイトルを入れる</p>
<p class="my-related-site">日付やブログ名など</p>
</div>
</a>
</div>
</div>方法 / 画像の入れ方 /
ポイント：
画像サイズは、記事に合わせていろいろ試してください。
ポイント：
今回は、「小」 ・「中央」を選びます。
コピーする箇所は、https:// ～ .pngです。
例：https://blogger.googleusercontent.com/img/bbbbb/151.pngです。
ポイント：
たくさんある文字の中から、 src というのを探してください。
<img src="https://blogger.googleusercontent.com/img/bbbbb/151.png" alt="Tool Icon">です。
方法 / CSS /
【テーマ】→【カスタマイズ】→【バックアップ】
Yahoo風のレイアウトにするための専用デザインコードです。
/* 関連記事カード全体のスタイル */
.my-related-card a {
display: flex;
align-items: center;
text-decoration: none;
color: #333;
padding: 10px 0;
border-bottom: 1px solid #eee;
gap: 12px;
}
/* 画像のサイズと形 */
.my-related-card img {
width: 100px; /* 画像の幅 */
height: 70px; /* 画像の高さ */
object-fit: cover; /* 縦横比を維持して切り抜き */
border-radius: 4px;
}
/* テキスト部分の調整 */
.my-related-text {
flex: 1;
}
.my-related-title {
font-size: 14px;
font-weight: bold;
margin: 0 0 5px 0;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 2行目以降を...で隠す */
overflow: hidden;
}
.my-related-site {
font-size: 11px;
color: #888;
margin: 0;
}＊参考：スクショ画面 - こんな感じで貼り付け
以下をコピペします。
管理ページのURLを正しくいれてください のところに、作成した管理用ページのURL（例："/p/related.html"）に書き換えます。
<script type='text/javascript'>//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
// ページ内のすべての「my-related-links」クラスを探す
var placeholders = document.querySelectorAll(".my-related-links");
if (placeholders.length === 0) return;
var sourceUrl = "/p/your-page-url.html"; // 管理ページのURLを正しく入れてください
fetch(sourceUrl)
.then(response => response.text())
.then(data => {
var parser = new DOMParser();
var doc = parser.parseFromString(data, 'text/html');
// 見つかったすべての目印に対して処理を繰り返す
placeholders.forEach(function(placeholder) {
var category = placeholder.getAttribute("data-category");
var content = doc.getElementById('rel-' + category);
if (content) {
placeholder.innerHTML = content.innerHTML;
} else {
placeholder.innerHTML = "関連記事が見つかりません";
}
});
})
.catch(err => console.error('読み込み失敗:', err));
});//]]></script>＊参考：スクショ画面 - こんな感じで貼り付け
まとめ
ブログは「書く」だけでなく「整える」ことも大事。自動化できる部分は機械に任せて、自分は新しい記事を書くことに集中できる環境を作ることが大切です。
もし、うまく表示できないときは、
Gemini で確認すれば大丈夫です。
CSSコードなどをコピペして、Geminiにうまく表示されません。と、メッセージを入力したら、色々アドバイスしてくれます。
公式サイト ＞＞ Gemini
最後まで読んでいただきありがとうございました。
はつごかんでした。
関連記事はこちら
［Google広告]
Menu
