🏠ホーム / ブログの設定 /

QooQの関連記事が正しく表示されない件について

2021/03/22

ブログの設定

X f B! R L

qooqのテンプレートを使っていて数日前から関連記事が表示されたりされなかったりしてましたが、何やらshowReactionsのタグで機能するはずのブロガーガジェットが勝手にGoogleブロガーサイドで廃止されことが原因のようです。

ブロガーの巨匠ふじやんさんが原因を突き止められて、スタジャップさんという方がコメント欄にて暫定的な処置を教えてくださっています。

暫定的ですがどうぞ。

<!-- <b:if cond='data:top.showReactions'> -->
<div id='mrp-wrapper'>
<p id='mrp-title'>関連記事</p>
<b:include data='post' name='mrp'/>
</div>
<!-- </b:if> -->

<b:if cond='data:top.showReactions'>と対応する</b:if>をとりあえずコメントアウト。

<data:top.reactionsLabel/>を「関連記事」などの文字列に置き換え。

とりあえず、これで現状を回避できるようです。

<b:if cond='data:top.showReactions'>をまず検索して、それに付随するタグをコメントアウトするだけです。そしてすぐ下にあったと思いますが、<data:top.reactionsLabel/>も検索してそこを「関連記事」という文字に書き換えるだけです。

またこのqooq作成者のブログにて、ふじやんさんが関連記事が見えなくなった件について報告してくださっています。そのうち作成者が修正してアップグレードしてくださると思います。

関連記事の表示件数を改善


まずmrpMaxで検索して、以下の追記と修正（コメントアウト）をします。

<b:includable id='mrp' var='post'>
<div id='mrp-content'/>
<script type='text/javascript'>
    mrpPosturl=&quot;<data:post.canonicalUrl/>&quot;;
</script>
<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=mrp_input&amp;max-results=11&quot;' type='text/javascript'/>
    </b:if>
</b:loop>
<script type='text/javascript'>
    // コメントアウト
    // var mrpPosturl=&quot;<data:post.canonicalUrl/>&quot;;
    var mrpMax=10;
    mrp_output();
</script>
</b:includable>

赤文字は追加部分です。これは10件表示させたければ、それプラス1の11に設定しておく仕様になっています。8件表示させるには9に設定しておきます。そしてmrpmaxには10や８といった表示させたい件数にします。

プラス1の件数に設定する箇所は、現在の記事が含まれたら違う記事を表示させるためだそうです。


次に mrp-v1.04を検索します。

//<![CDATA[

//mrp-v1.04

var relatedAry=new Array;var mrpPosturl = "";function mrp_input(e){for(var t=0;t<e.feed.entry.length;t++){var r=new Object,n=e.feed.entry[t];r.title=n.title.$t;try{r.thumbnail=n.media$thumbnail.url}catch(e){r.thumbnail="noneImage"}for(var l=0;l<n.link.length;l++)if("alternate"==n.link[l].rel){r.link=n.link[l].href;break}if(mrpPosturl==r.link){continue;}for(var i=0,m=0;m<relatedAry.length;m++)if(r.link==relatedAry[m].link){i=1;break}i||relatedAry.push(r)}}function mrp_output(e){for(var t,r,n,l,a,i=mrpMax<relatedAry.length?mrpMax:relatedAry.length,d=document.getElementById("mrp-content"),m=[],s=0;m.push(s++)<relatedAry.length;);if(m=m.sort(function(){return Math.random()-.5}),relatedAry.length<=1)(a=document.createElement("p")).textContent="関連する記事はありません。",d.appendChild(a);else for(var p=0;p<i;p++)t=relatedAry[m[p]],mrpPosturl!=t.link&&((r=document.createElement("div")).setAttribute("class","mrp-post"),"noneImage"!=t.thumbnail&&((n=document.createElement("img")).setAttribute("src",t.thumbnail),n.setAttribute("class","mrp-post-img"),r.appendChild(n)),(a=document.createElement("p")).setAttribute("class","mrp-post-title"),a.textContent=t.title,r.appendChild(a),(l=document.createElement("a")).setAttribute("href",t.link),l.setAttribute("class","mrp-post-link"),r.appendChild(l),d.appendChild(r))}//]]>

赤文字の箇所は追加です。

注意点

※注意点があります。このコードにするとカテゴリの数が一つでなおかつそのカテゴリの記事が最低でも3つなければ関連記事に一つも表示されないとバグが生じています。

それで、カテゴリを増やすとこの問題は解決できるようです。それでカテゴリを増やしたときに解決されるように、もう一つ修正しなければいけない問題があります。

すべてのカテゴリ（ラベル）を表示

<b:includable id='mrp' var='post'>を検索してその下のタグをコメントアウトか削除しておいてください。<b:if cond='data:label.isLast == &quot;true&quot;'> と </b:if>のセットが二箇所？あったような気がしますが、いずれも何度か検索かけて削除しておいてください。

関連記事の装飾


/* 関連記事 */ の所(#mrp-wrapper から .mrp-post-link まで)のコードを丸ごと以下のコードと入れ替えるようです。

/* 関連記事 */
#mrp-wrapper {
    margin-top: 2em;
}
#mrp-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
}
#mrp-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#mrp-post-title {
    padding: .5em;
}
.mrp-post:hover {
    box-shadow: 5px 5px 5px 3px #aaa;
}
.mrp-post {
    position: relative;
    flex-basis: 49%;
    height: 90px;
    overflow: hidden;
    margin: 0 0 10px;
    background: #fff;
    box-shadow: 3px 3px 5px -2px #aaa;
    border-radius: 3px;
    transition: .2s;
}
.mrp-post-img {
    float: left;
    width: 40%;
    height: 90px;
    padding-right: .5em;
    object-fit: cover;
}
@media ( max-width : 600px ) {
    .mrp-post {
        flex-basis: 100%;
        margin: 10px 0;
        height: 90px;
    }
}
.mrp-post-title {
    font-size: 90%;
}
.mrp-post-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
@media (max-width: 279px){.mrp-post-title { clear: left; }}

好みで変えるといいと思います。私はボックスの影やホバー時の動作などは、宗教的なサイトで文章が多いのにミスマッチと感じ消しておきました。.mrp-post-imgも幅を100pxにして、トップページ一覧の画像の幅と同じくらいにしておきました。好みで書き換えられるといいです。

自分がしたカスタマイズは、display:flex; をmrp postを指定して、文字が左の画像に回り込むのを防いでました。height90pxは削除してタイトルが長くてもきちんと表示されるようにしました。 

画像がぼやけを解消 

mrp-v1.04を検索して次の赤文字部分を追加します。2022/02/04 追記: コードを新 URL に対応させました。新旧いずれの画像でもボヤけが解消されます。

n.media$thumbnail.url の後ろに .replace(/\/s[0-9]+(-c)?/, "/s300").replace(/\=s[0-9]+(-c)?/, "=s300") を挿入します。

//<![CDATA[
//mrp-v1.04
var relatedAry=new Array;function mrp_input(e){for(var t=0;t<e.feed.entry.length;t++){var r=new Object,n=e.feed.entry[t];r.title=n.title.$t;try{r.thumbnail=n.media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s300").replace(/\=s[0-9]+(-c)?/, "=s300")}catch(e){r.thumbnail="nonImage"}for(var l=0;l<n.link.length;l++)if("alternate"==n.link[l].rel){r.link=n.link[l].href;break}for(var i=0,m=0;m<relatedAry.length;m++)if(r.link==relatedAry[m].link){i=1;break}i||relatedAry.push(r)}}function mrp_output(e){for(var t,r,n,l,a,i=mrpMax<relatedAry.length?mrpMax:relatedAry.length,d=document.getElementById("mrp-content"),m=[],s=0;m.push(s++)<relatedAry.length;);if(m=m.sort(function(){return Math.random()-.5}),relatedAry.length<=1)(a=document.createElement("p")).textContent="関連する記事はありません。",d.appendChild(a);else for(var p=0;p<i;p++)t=relatedAry[m[p]],mrpPosturl!=t.link&&((r=document.createElement("div")).setAttribute("class","mrp-post"),"noneImage"!=t.thumbnail&&((n=document.createElement("img")).setAttribute("src",t.thumbnail),n.setAttribute("class","mrp-post-img"),r.appendChild(n)),(a=document.createElement("p")).setAttribute("class","mrp-post-title"),a.textContent=t.title,r.appendChild(a),(l=document.createElement("a")).setAttribute("href",t.link),l.setAttribute("class","mrp-post-link"),r.appendChild(l),d.appendChild(r))}
//]]>

2026年版の関連記事装備

<b:includable id='mrp' var='post'>
  <div id='mrp-content'/>
  <script type='text/javascript'>
      /* 記事の重複を防ぐためのURL取得 */
      mrpPosturl = &quot;<data:post.canonicalUrl/>&quot;;
  </script>
  <b:loop values='data:post.labels' var='label'>
      /* すべてのラベルから最新11件ずつデータを叩く（精度向上） */
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=mrp_input&amp;max-results=11&quot;' type='text/javascript'/>
  </b:loop>
  <script type='text/javascript'>
      var mrpMax = 10; /* 表示したい件数 */
      mrp_output();
  </script>
</b:includable>

👆に入れ替えましょう。      /* すべてのラベルから最新11件ずつデータを叩く（精度向上） */だけ消しときましょう。そして、上のやつも検索して👇に入れ替えましょう。

//<![CDATA[
// mrp-v2026-update
var relatedAry = new Array;
var mrpPosturl = mrpPosturl || ""; // 二重定義防止

function mrp_input(e) {
    if (!e.feed.entry) return;
    for (var t = 0; t < e.feed.entry.length; t++) {
        var r = new Object,
            n = e.feed.entry[t];
        r.title = n.title.$t;
        try {
            // 画像ボヤけ解消：サイズを300pxに、形式を最適化
            r.thumbnail = n.media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s300").replace(/\=s[0-9]+(-c)?/, "=s300");
        } catch (e) {
            r.thumbnail = "noneImage"
        }
        for (var l = 0; l < n.link.length; l++) {
            if ("alternate" == n.link[l].rel) {
                r.link = n.link[l].href;
                break
            }
        }
        // 今見ている記事本人はリストに入れない
        if (mrpPosturl == r.link) continue;
        
        // 重複チェック
        for (var i = 0, m = 0; m < relatedAry.length; m++) {
            if (r.link == relatedAry[m].link) {
                i = 1;
                break
            }
        }
        i || relatedAry.push(r)
    }
}

function mrp_output() {
    var d = document.getElementById("mrp-content");
    if (!d) return;
    
    // ランダムに並び替え
    relatedAry.sort(function() { return Math.random() - .5 });
    
    var i = mrpMax < relatedAry.length ? mrpMax : relatedAry.length;
    if (relatedAry.length <= 0) {
        var a = document.createElement("p");
        a.textContent = "関連する記事はありません。";
        d.appendChild(a);
    } else {
        for (var p = 0; p < i; p++) {
            var t = relatedAry[p];
            var r = document.createElement("div");
            r.setAttribute("class", "mrp-post");
            
            if ("noneImage" != t.thumbnail) {
                var n = document.createElement("img");
                n.setAttribute("src", t.thumbnail);
                n.setAttribute("class", "mrp-post-img");
                n.setAttribute("loading", "lazy"); // 2026年仕様：遅延読み込み追加
                r.appendChild(n);
            }
            
            var a = document.createElement("p");
            a.setAttribute("class", "mrp-post-title");
            a.textContent = t.title;
            r.appendChild(a);
            
            var l = document.createElement("a");
            l.setAttribute("href", t.link);
            l.setAttribute("class", "mrp-post-link");
            r.appendChild(l);
            d.appendChild(r);
        }
    }
}
//]]>

プロフィール

Jと申します。皆さんご自身で参考程度にされてください。 googleに2026年8月29日の時点でindexにしましたが、検索エンジンに暫くヒットはしないかと思います。コメントを各自個人情報に留意されながら書き込みください。グーグルアカウントにログインした状態で書きこむと自分で後々削除できるので推奨します。そうでない場合に削除したいと感じられた際に言って下されば仰せの通りに致します👍

最新コメント

読み込み中...

10記事毎ログ

読み込み中...

QooQ