HTML編集で関連記事の自動表示をさせる方法

前回はガジェット追加で関連記事の自動表示をさせる方法を解説しましたが、本記事ではHTML編集での方法を解説します。

ガジェット追加版の方が簡単ですが、HTML版の方が表示が早いのでオススメです。

HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。

HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。

関連記事を自動表示するためのHTML編集

投稿ウィジット内にコードを書き加えます。

テーマによって異なりますが、Emporioの場合を解説します。

また、当ブログで実際に導入したコードも載せておきます。

Emporioの場合

HTML編集画面右上のウィジットに移動を選択します。

そこから【Blog1】を選択します。これが投稿ウィジットになります。

【Blog1】を選択してから<b:includable id='post' var='post'>で検索します。

（全体で同じコードが２つありますが、Blog1内にある方になります。）

その数行下の<div class='slide'> の </div> の上にコードを挿入してください。

当ブログの導入コード

当ブログで導入しているコードは以下になります。

長いですが、コピペすれば当ブログと同じような関連記事が作成できます。

コメントアウトで日本語の説明も加えて分かりやすくしているので、変更を加える時の参考にしてみてください。

<b:if cond='data:blog.pageType == "item"'>

const rp_current = "<data:post.url/>";

const rp_max = 3; // 表示記事数

const rp_head = "関連記事"; // タイトル

//<![CDATA[

(function(root, func) {

if (!root.RelatedPosts) {

root.RelatedPosts = func();

}

})(this, function() {

let _this = function RelatedPosts_constructor() {};

let count = 0;

let limit = 0;

let urls = [];

let titles = [];

let dates = [];

let imgs = [];

// フィード数分をカウント

_this.counter = function RelatedPosts_counter() {

limit++;

};

// 関連記事の書き込み

function RelatedPosts_write() {

// 重複処理

let dups = [];

let indexs = [];

for (let i = 0; i < urls.length; i++) {

if (dups.indexOf(urls[i]) == -1) {

dups.push(urls[i]);

indexs.push(i);

}

// ランダムインデックス生成

let idx, items = [];

let a = [...Array(indexs.length).keys()];

while (a.length > 0) {

idx = Math.floor(Math.random() * a.length);

items.push(a[idx]);

a.splice(idx, 1);

}

// 関連一覧の作成

let html;

let i = 0;

if (indexs.length > 0) {

html = '<div class="related-text">' + rp_head + '</div><div class="p-container">';

while (i < indexs.length && i < rp_max) {

html += '<a href="' + urls[indexs[items[i]]] + '"><figure class="related-img"><img alt="" width="250" height="150" src="' + imgs[indexs[items[i]]] + '"/></figure><div class="related-date">' + dates[indexs[items[i]]] + '</div><div class="related-title">' + titles[indexs[items[i]]] + '</div></a>';

i++;

}

html += '</div>';

document.getElementById("related-posts").innerHTML = html;

}

// フィードデータ追加

_this.add = function RelatedPosts_add(json) {

let m = rp_current.match(/^https?:\/\/(.+$)/);

let http = '';

let https = '';

if (m != null) {

http = 'http://' + m[1];

https = 'https://' + m[1];

}

for (let i = 0; i < json.feed.entry.length; i++) {

let entry = json.feed.entry[i];

for (let j = 0; j < entry.link.length; j++) {

if (entry.link[j].rel == 'alternate') {

if (!(http == entry.link[j].href || https == entry.link[j].href)) {

urls.push(entry.link[j].href);

titles.push(entry.title.$t);

let date = entry.published.$t.substr(0, 10).replace(/-/g, "/");

dates.push(date);

let img;

if ("media$thumbnail" in entry) {

img = entry.media$thumbnail.url;

let re1 = /\/s72-.*\//;

let re2 = /=s72-.*$/;

if (img.match(re1)) {

img = img.replace(re1, '/w250-h150-n/');

} else if (img.match(re2)) {

img = img.replace(re2, '=w250-h150-n');

} else if (img.match(/default.jpg/)) {

img = img.replace('default.jpg', 'mqdefault.jpg');

}

} else {

// NoImage画像

img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGufis0idCDqb29dBvyQCx5M5dHTE4bpc52w6WGtcdKpsQImJUUvWSFYn5k_IDsn1TjOhyfzw51TgvvabIrVAYjxasRmPjGTPdSKudZTYD6JA5DLW2rm-9fkahTfV4Cmn-GjsDaiCDnJ5/w250-h150-n-e365/noimg.jpg";

}

imgs.push(img);

}

break;

}

count++;

if (count == limit) {

RelatedPosts_write();

}

};

return _this;

});

//]]>

</script>

<b:loop values='data:post.labels' var='label'>

</b:loop>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name contains "#" or data:label.name contains "/"'>

(function() {

let encoded = "<data:label.name/>"

const keys = [/・/g, /&amp;/g, /#/g, /\//g];

const reps = ["%E3%83%BB", "&", "%23", "%2F"];

for (let i = 0; i < keys.length; i++) {

encoded = encoded.replace(keys[i], reps[i]);

}

const src = "/feeds/posts/summary/-/" + encoded + "?alt=json&max-results=10&callback=RelatedPosts.add";

const js = document.createElement("script");

js.type = "text/javascript";

js.defer = true;

js.src = src;

document.head.appendChild(js);

}());

</script>

<b:else/>

</b:if>

</b:loop>

<style>

#related-posts {

margin: 2em 0 0;

border-top: 1px dashed ; /*上線*/

border-bottom: 1px dashed ; /*下線*/

}

.related-text {

font-size: 1.2em; /*関連記事文字サイズ*/

font-weight: bold; /*関連記事太文字*/

text-align: center; /*関連記事中央寄せ*/

background: ; /*関連記事背景*/

padding: ;

margin-top: 1em;

margin-bottom: 1em;

}

.p-container {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.p-container:after {

display: block;

content: "";

width: 32%;

}

#related-posts a {

display: block;

width: 32%;

min-height: 120px; /*記事の高さ*/

box-sizing: border-box;

margin-bottom: 1.5em;

transition: all .3s ease;

}

.related-img {

display: block;

height: 120px; /*記事の画像高さ*/

margin: 0;

overflow: hidden;

}

.related-img img {

display: block;

width: 100%;

height: 100%;

object-fit: cover;

border-radius: 0;

transition: .3s

}

.related-date {

font-size: 0em; /*日付文字サイズ*/

padding: .7em 0 .2em;

opacity: .8;

}

.related-title {

font-size: 0.9em; /*記事タイトル文字サイズ*/

text-align: center; /*記事タイトル中央寄せ*/

}

#related-posts a:hover {

text-decoration: underline; /*リンク下線変化有無*/

}

#related-posts a:hover .related-img img {

transform: scale(1.1); /*ホバー画像拡大*/

}

@media screen and (max-width:300px) { /*モバイル微調整*/

#related-posts a {

width: 49%;

}

</style>

</b:if>

当ブログの導入コード解説

基本は参考ブログ様のものになります。

当ブログでは以下のような変更を加えています。

記事表示数６→３
上下に破線
関連記事や記事タイトルを中央寄せ
日付削除
画像高さ低め
スマホでいい感じに並ぶように調整

見本画像は以下の通りです。

パソコン表示

スマホ表示

当ブログはシンプルにしていますが、CSSで装飾することも出来るので色々試してみてください。

Bloggerでブロガーになろう

このブログを検索