【QooQ】関連記事ウィジェットのカスタマイズ

2023/09/0633
アイキャッチ

QooQ テーマにデフォルトで組み込まれている関連記事ウィジェットのデザインと機能に関するカスタマイズを紹介します。

2022/05/31 追記: 現在当ブログの関連記事は、IB-Note さんのウィジェットを使用しています。

CONTENTS

デザインカスタマイズ編

中々いい感じのデザインが2種類できましたので、お好みの方をお試しください。

テーマ編集は必ず予めバックアップを取ってから行って下さい。
圧縮コードは位置がわかりにくいため、スクリプトコードの挿入位置を間違えないようご注意ください。

各デザインのCSSコード

※代替画像(No Image)の設定方法については、後半の「機能編」で解説します。

デザイン①: カードタイプ

通常版 QooQ のトップページのタイルと同じ様なデザインです。

画面幅に応じて3列→2列に変化し、スマホ表示時はリストレイアウトになります。

カードタイプ

/* 関連記事 */ の所(#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-content::after {
display: block;
content: "";
width: 32%;
}
#mrp-content p {
margin: auto;
padding: .5em;
}
.mrp-post:hover {
box-shadow: 5px 5px 5px 3px #aaa;
}
.mrp-post {
position: relative;
flex-basis: 32%;
overflow: hidden;
margin: 10px 0;
background: #fff;
box-shadow: 3px 3px 5px -2px #aaa;
border-radius: 3px;
transition: .2s;
}
.mrp-post-img {
display: block;
width: 100%;
height: 120px;
object-fit: cover;
margin: 0;
}
@media ( max-width : 1240px ) {
.mrp-post {
flex-basis: 49%;
}
}
@media ( max-width : 600px ) {
.mrp-post {
flex-basis: 100%;
margin: 0 0 10px;
height: 90px;
}
.mrp-post-img {
float: left;
width: 40%;
height: 90px;
padding-right: .5em;
object-fit: cover;
}
}
.mrp-post-title {
font-size: 90%;
max-height: 4.5em;
}
.mrp-post-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

デザイン②: リストタイプ

スマホ表示では横1列になります。

リストタイプ
/* 関連記事 */
#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%;
}

2021/12/24 追記: デザイン③ 超シンプルタイプ

意外と需要あるかもしれない?という訳で、サムネ画像や装飾なしのシンプルなリストデザインも用意してみました。

シンプルタイプ
/* 関連記事 */
#mrp-wrapper {
margin-top: 2em;
}
#mrp-title {
font-weight: bold;
}
.mrp-post {
position: relative;
padding: .1em 1em;
margin: .5em;
}
.mrp-post-img {
display: none;
}
.mrp-post-title {
margin-top: .5em;
font-size: 80%;
font-weight: bold;
color: $(font.link);
}
.mrp-post-title::before {
background-color: $(font.color);
border-radius: 50%;
content: "";
height: .3em;
width: .3em;
position: absolute;
top: 1.1em;
left: .5em;
}
.mrp-post-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

仕上げの作業

サムネ画像をボヤけず綺麗に表示させるために、スクリプトの一部に手を加えます。

関連記事スクリプトの場所は //mrp-v で検索すれば見つかります。

2022/03/16 追記: コードを新 URL に対応させました。新旧いずれの画像でもボヤけが解消されます。
参照記事: アイキャッチ画像をWebPに一括変換する方法 | IB-Note

n.media$thumbnail.url の後ろに
.replace(/\/s[0-9]+-.*\//, "/s300/").replace(/=s[0-9]+-.*$/, "=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]+-.*\//, "/s300/").replace(/=s[0-9]+-.*$/, "=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))}
//]]>

機能カスタマイズ編

気になる仕様を改善したり、オプション機能を追加します。

表示件数問題の改善

QooQの関連記事ウィジェットは、仕様上設定件数よりも1件少なく表示されてしまうことがあるのですが、こちらの「テキストエディタを作るブログ」さんで改善方法について解説されています。

詳しくはこちらの記事を御覧ください。

ファビコンテキストエディタを作るブログ
サムネイル
【QooQ】関連記事の表示件数を変更する方法【カスタマイズ】
前回、 関連記事を中央寄せ にしたのですが、 関連記事の表示件数が 5 件になったり 6 件になったりしました。 そこで、関連記事の表示件数を変更する方法を調べてみました。 関連記事の表示件数の変更方法 QooQテンプレートの下記値(mrpMax)で変更可能でした。...
https://tzeditor.blogspot.com/2019/12/qooq-kanrenkijisu.html

すべてのラベルを関連記事の表示対象にする

複数のラベルが付いている記事の場合、デフォルトでは最後のラベルに該当する記事のみが関連記事の表示対象になっていますが、すべてのラベルを対象にするように変更するには…

検索で <b:includable id='mrp' var='post'> を探し、その数行下の

<b:if cond='data:label.isLast == &quot;true&quot;'> と </b:if> を削除します。

コード

代替画像の表示方法

スクリプトの r.thumbnail="nonImage" の部分を r.thumbnail="代替画像URL" に置き換えるだけです。

//<![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}catch(e){r.thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXR9QkxRwLIjXhLiYOj5aFHAUWAePYHRWxVpYYF27vmzrN6ysSdQP58uT9BRnGIb_Y3z9J_xKYcwvK0sEshtehjx0TE6Wo3Wt0LhxTfunT6rZVjYOzNRLMAULlcDTLQjzOpiXgvUEQog/s300/noimage.png"}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))}
//]]>

参考記事:

ファビコンすたすた式
サムネイル
[QooQ] 関連記事に代替画像を表示させる
記事に画像がない場合デフォルトではなにも表示されません。なので代替画像を表示できるようにしました
https://sutasutashiki.blogspot.com/2020/08/QooQ-Show-Related-post-Alternative-image.html

マウスホバー時にタイトルツールチップを表示

このカスタマイズはあまりニーズはないかもしれませんが…先述のカスタマイズデザインはタイトル表示エリアの高さが固定されているため、長いタイトルだと見切れてしまう場合があるのですが、ツールチップでは全文表示されるので、長いタイトルが多いブログでは一応メリットはあると思います(^^;

補足: タイトルを付けることにより Lighthouseでのテストで「Links do not have a discernible name(リンクには識別可能な名前がありません)」という指摘を回避することも出来ます。
※ title の代わりに aria-label にするという手もあり→ l.setAttribute("aria-label",t.title),

スクリプトに以下の赤文字部分を追記することで表示させることができます。

//<![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}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}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"),l.setAttribute("title",t.title),r.appendChild(l),d.appendChild(r))}
//]]>

loading="lazy" 属性を付与

以前、画像の遅延読み込みによるスコアアップの記事を書きましたが、QooQ の関連記事サムネイル画像に loading="lazy" 属性を追加する方法がわかりました。

関連記事の JavaScript に 以下の赤文字部分のコードを追加します。

height と width の数値は表示サイズへの影響はありません。(CSSでのサイズ指定が優先される)

//<![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}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}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"),n.setAttribute("height","200"),n.setAttribute("width","300"),n.setAttribute("loading","lazy"),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))}
//]]>

上記の機能カスタマイズ(表示件数改善を除く)を全部乗せしたコード

手っ取り早く全部入れたいという方はこちらをコピペしてくださいw(^^;

//<![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]+-.*\//, "/s300/").replace(/=s[0-9]+-.*$/, "=s300")}catch(e){r.thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXR9QkxRwLIjXhLiYOj5aFHAUWAePYHRWxVpYYF27vmzrN6ysSdQP58uT9BRnGIb_Y3z9J_xKYcwvK0sEshtehjx0TE6Wo3Wt0LhxTfunT6rZVjYOzNRLMAULlcDTLQjzOpiXgvUEQog/s300/noimage.png"}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"),n.setAttribute("height","200"),n.setAttribute("width","300"),n.setAttribute("loading","lazy"),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"),l.setAttribute("title",t.title),r.appendChild(l),d.appendChild(r))}
//]]>

2021/01/23 追記: 投稿日を表示させる

こちらの Itching Ears by kamokamo さんのブログの関連記事に投稿日や更新日が表示されてるのを見てやってみたくなり、ページソースのコードを参考に試行錯誤してみたところ、表示方法がわかりましたので、手順を紹介したいと思います。当ブログでは投稿日のみ表示させます。

ファビコンItching Ears by kamokamo
サムネイル
Itching Ears by kamokamo
Sound information for your itching ears in this clamorous world.
https://itchingears-kamokamo.blogspot.com/

スクリプトにコードを追加

スクリプトコードに赤文字の部分(2ヶ所)を追加します。

//<![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;r.title=n.title.$t;r.date=n.published.$t.substr(0,10).replace(/-/g, "/");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}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),(b=document.createElement("div")).setAttribute("class","mrp-post-date"),b.textContent=t.date,r.appendChild(b),(l=document.createElement("a")).setAttribute("href",t.link),l.setAttribute("class","mrp-post-link"),r.appendChild(l),d.appendChild(r))}
//]]>

CSS の追加

先に紹介したカードタイプ、リストタイプ、それぞれのCSSコードに追加します。
長い記事タイトルでも投稿日に被らないようにしてあります。
独自にカスタマイズされている方で表示が崩れる場合は適宜微調整してください。

カードタイプ投稿日付き
リストタイプ投稿日付き

追加コード (カード/リスト共通)

.mrp-post-title {
height: 4.5em;
padding-bottom: 1em;
overflow: hidden;
}
.mrp-post-date {
position: absolute;
bottom: 0;
right: 5px;
font-size: .8em;
}

関連記事消滅に関する情報

数日前から QooQ の関連記事が突然表示されなくなって、原因がわからず困っているユーザーさんが多数いるのではないかと思います。
この関連記事消滅の原因ですが、QooQ の関連記事ウィジェットのコードは Blogger の(あまり使われていない)リアクションウィジェットの中身と入れ替えて実装されているのですが、そのリアクションウィジェットが2021年3月で廃止されてしまったことにより巻き込まれてしまったためのようです。
そのことに関してQooQ作者のラムネグさんに報告した所、早速応急処置の方法の記事をアップされました。

ファビコンラムネグ
サムネイル
【blogger】QooQ関連記事でない、の応急処置方法
bloggerQooQの関連記事でない問題の応急処置
https://blog.dododori.com/create/program/blogger-temp/

こちらの記事の手順通りにやれば関連記事が復活するはずですのでお試しくださいませ。

尚、今回の不具合に関して、当記事のコメント欄にも他のユーザー様から頂いた情報や暫定的な対処法などが集まっていますのでよろしければ御覧ください。

2021/04/13 追記: 関連記事対応済みの ver.1.30 がリリースされていました

ファビコンラムネグ
サムネイル
QooQリリースノートと初期設定方法!【ゼッタイ読んでね】
blogger日本語テンプレート「QooQ」の初期設定方法とリリースノートです。QooQを利用するのならまず一読してくださいね!
https://blog.dododori.com/create/program/qooq-releasenote/#jump-9

旧バージョンとの差分のみ変更したい方はこちらをご参照ください。

ファビコンDiffchecker
サムネイル
QooQ 1.29 → 1.30
QooQ 1.29 → 1.30 差分チェック
https://www.diffchecker.com/jp/EsLefNhu