【ページ】　→【新しい投稿】より、記事を作成します。

ポイント：
投稿ではなく、ページで作成します。（固定ページにします。）

<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>

　万が一のため、バックアップをとる

【テーマ】→【カスタマイズ】→【バックアップ】

【テーマ】→【カスタマイズ】→【HTMLを編集】



Yahoo風のレイアウトにするための専用デザインコードです。

Bloggerの【テーマ】→【HTMLを編集】で、]]></b:skin> という文字を探し、その直前に以下のコードを貼り付けてください。

/* 関連記事カード全体のスタイル */
.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;
}

＊参考：スクショ画面 - こんな感じで貼り付け




　</body>を探す。

以下をコピペします。

　管理ページの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