QooQ テーマにデフォルトで組み込まれている関連記事ウィジェットのデザインと機能に関するカスタマイズを紹介します。
2022/05/31 追記: 現在当ブログの関連記事は、IB-Note さんのウィジェットを使用しています。
デザインカスタマイズ編
中々いい感じのデザインが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 == "true"'> と </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://1.bp.blogspot.com/-4C9tiSPXKDE/X75OMYszMTI/AAAAAAAAT8o/2W5jbkLzAmUJfv_oY6b14N0RlN7F6K53gCLcBGAsYHQ/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://1.bp.blogspot.com/-4C9tiSPXKDE/X75OMYszMTI/AAAAAAAAT8o/2W5jbkLzAmUJfv_oY6b14N0RlN7F6K53gCLcBGAsYHQ/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 kamokamoSound 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.30QooQ 1.29 → 1.30 差分チェックhttps://www.diffchecker.com/jp/EsLefNhu
コメントを投稿
別ページに移動します33 件のコメント (新着順)
やうたさん、こんばんは。
やはり D&D でエラーになってましたか。Twitterのフォロワーさんも成功率2割くらいだと言ってました(^^;
あ、Twitterといえば、フォローありがとうございます。後ほどフォロバさせて頂きますね(^^)丿
＠ふじやんさん
お返事ありがとうございます。
D&D、非推奨なのですか。ご教示いただきありがとうございます。
確かにアップロードする際に10回に1回はエラーとなっていました。
不具合なのですね笑
Bloggerの画像の小技も拝見させていただきました。
勉強になることばかりです。ありがとうございます。
また顔をのぞかせてください。
それではまた。
やうたさん、コメントありがとうございます。
こちらこそまだまだ勉強不足(特にJSに関してはほとんど解ってないという…)で、こうやって色々ご指摘、ご報告いただけるとほんとに助かります(^^)丿
ああなるほど、ドラッグ&ドロップでのアップロードでしたか。ちなみにここ最近のBloggerの仕様変更や不具合の影響もあって D&D でのアップロードはエラーになることもあるため非推奨らしいですよ(^^;
画像サイズのパラメータに関してはこんな記事も書いてますので宜しければご参考にどうぞ。
Bloggerの画像の小技
＠ふじやんさん
ご回答ありがとうございます。
やはり私の環境特有のものでしたか、、、大変すみませんでした。。。
画像は普通にD&Dして挿入していたつもりでしたが、
どうやら標準版とは異なるということがわかりました。
画像パラメータのについても勉強してみます。ありがとうございます。
今後とも勉強させてもらいます。
ありがとうございました。
やうたさん、初めまして。不具合に関するご指摘ありがとうございます。
やうたさんのブログの画像を確認したところ、Blogger標準の [数字]bp.blogspot ドメインではなく、(Googleフォトから取得された？) lh[数字].googleusercontent ドメインで、サイズのパラメータが異なる(デフォルトのs72-cではない)ため、大きいサイズに変換出来なかったと思われます。
実は元々はやうたさんが置き換えられた .replace(/\/s[0-9]+(-c)?/, "/s300") を使用していたのですが、Bloggerのサムネ画像は全て s72-c になっているので、独自の判断でコードを書き換えていました。
しかし今回のようなケースもありうるということがわかったので、全てのパラメータに対応できる元のコードに戻しておきました。
また何かお気づきの点がありましたら遠慮なくお知らせくださいね(^^)
初めまして。6月からBloggerでブログをはじめました、やうたと申します。
ふじやんさんのブログを拝見しながら、色々勉強させてもらっています。
関連記事の画質の件ですが、
『.replace("s72-c", "s300") 』でmrp-v1.04～を修正したのですが、
画質が荒いままだったため、
『.replace(/\/s[0-9]+(-c)?/, "/s300")』を追記した所うまくいきました。
環境によるものかもしれませんが、念の為コメントいたしました。
※あやまってコメントしたため、再投稿しました。すみません。
コードは勉強中で深い理解はできていません。。。
見当違いのコメントでしたら、削除頂いても結構です。
私はスマホは持っていませんが、ツールチップはスマホで表示させることは出来ないんじゃないですかね。
うちもキーワードとかアクセス対策とかそんなことは一切考えてなくて、タイトルもかなり適当に付けてますw
なるべく短く収めるということだけは心がけてますけどね。
タイトルが長いのも好きではないですが、本文が長いのも、読むのも書くのも苦手です(^^;
ありがとうございます。マウスオーバーのツールチップ表示とかも知らないですね。スマホでも指を当てたら表示されたりするのでしょうかね。
でも、オーバーした文字はまあ隠しといていいかもしれませんし、だいたい32文字くらいに収めるとオーバーすることもそもそもありません。
もともとアクセス増やすためのキーワード戦略など学んだんですが、だいたいタイトルは30文字前後までに収めないと現代人の集中力は金魚よりも低くなってるらしく（笑）長いタイトルを読むことはないそうで、だからこそ短くするべきなんですって。それで、サイトタイトルには3つくらいのキーワードを含めて、記事中にもそのキーワードを含めるようにします
わざわざありがとうございました。
>pjさん
色々試行錯誤してみたものの、少なくとも私の知識とスキルではできませんでした。
HTMLの方を人気の投稿と同じ様な構造にすれば容易にできるのかもしれませんが、それはちょっと大掛かりだし。
CSSだけで何とかできないものかとFlexboxを使ってみたりしたものの結局挫折……お役に立てず申し訳ないです。
個人的には表示しきれない長いタイトルは、マウスオーバーのツールチップ表示で補えればいいだろうということで、スクロール等を使った全文表示は考えたこともなかったです(^^;
こんにちは。関連記事のデザインでリストカード型を使用させていただいてるのですが、こちらは画像を動かさずに文字だけオーバーフローオートをかけて、文字だけ上下にスクロールできる仕様に改造できるでしょうか。
すでにテストブログでは人気投稿の記事においては、文字だけオーバーフローオートが効いてまして、見事に画像は動かず文字だけ上記に動かせます。
https://rebukechurch.blogspot.com/2021/01/blog-post_29.html
上がテストブログになりますが、三位一体ラベルの記事のみタイトルを異様に長くして動きをテストしてみています。こちらの関連記事は関連記事全体にオーバーフローとオートがかかってしまい、文字だけにかけても全く動いてくれなくなります
この動きをふじやんさんが紹介してくださった関連記事のリストカード型でも表現させたいのですが、可能でしょうか。。。もし難題で無理なら全く構いませんので、またご教授いただけますと幸いです・いつも教えてクレクレで申し訳ないですm(_ _)m
りもすきさん、コメントありがとうございます。
私も時々りもすきさんのブログをチェックさせていただいてます。
関連記事消滅の件、お役に立てたようで良かったです。
りもすきさんのようにそろそろ消えていることに気づいて慌てるユーザーさんも増えてくるでしょうし、少しでもうちの情報が伝わればいいなと思います(^^;
はじめまして。
いつもブログは拝見していてカスタマイズ情報など参考にさせていただいていましたが、初めてコメントします。
関連記事が消えた件、こちらのコメント欄に情報が集まっていてとても助かりました。
今朝関連記事が表示されていないことに気づき、カスタマイズで何かやってしまったのかと思って過去のバックアップを戻したのですが復旧せず、原因や修正方法も分からず...
ふじやんさんのブログに何か情報があるかも？！と思って駆けつけ、救われました。
いつもですが、ありがとうございます！
早速対処法記事がアップされました。
基本的にsutajpさんと同じ方法ですが、作者さんは分岐タグを削除しちゃってますね(^^;
【blogger】QooQ関連記事でない、の応急処置方法
たった今QooQ作者さんよりお返事ありました。追加コメントで「廃止された」って書いたんだけど気づいてないのかな？(^^;
https://blog.dododori.com/create/program/blogger-qooq/#comment-1494
とりあえず応急処置方法を書かれるとのことです。
ふじやんさんありがとうございます。
皆さんこんなに無償で教えてくださったりとブロガー界隈の民度の高さに驚いています笑
ふじやんさんのブログは写真がきれいなので結構確認しています。
コメント一覧確認できるのも最高ですね。
自分のブログにもふじやんさんのブログで関連記事の問題が解決されたと書いてリンクも貼っておきたいと思います。
bjさん、情報チェックが素早いですね(^^;
早速お知らせしようとbjさんのブログに行ったら関連記事が表示されてたんで面食らいましたw
スタジャップさん、ありがとうございました。
自分は素人なので何が暫定的なのかわかりませんが、教えてくださったようにすると表示されています。
ふじやんさんもいつもありがとうございます
sutajpさん、コメントありがとうございます。
なるほど、それが一番手っ取り早い対処法のようですね。
<b:if cond='data:top.showReactions'> は削除しても関連記事が表示されるのを確認しましたが、一応念の為に残しておいたほうがいいかもですね。
暫定的ですがどうぞ。
<!-- <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/>を「関連記事」などの文字列に置き換え。
bjさん、こんばんは。
うちのリアクションウィジェットが消えてなかったらおそらく原因は突き止められなかったかもしれません。
それでもひき太郎さんのように貴重な情報をいただけることもあるのでありがたいです(^^)
対応記事に関しては気長にお待ち下さい…その前にに誰かが書いてくれないかな(^^; ひき太郎さんとかw
ひき太郎さん、情報ありがとうございます。
QooQ作者さんのブログにコメントで対応をお願いするとともにBlogger Code PEの記事リンクも知らせておきました。QooQに関してはいずれアップデートされるでしょう。
ですが、既存のユーザーの対処が面倒ですよねえ…たぶんユーザー側で何かしら対処しないと関連記事が復活することはないんじゃないですかね(^^;
Bloggerさんはしれっと変更したり廃止したりって、たまにあるようですよ。それにしてもリアクションウィジェットが無くなってしまうのは個人的に残念でなりません。
こんばんは、もう把握されたのですかすごいですね。
なんか紹介してくださったブログのコードをコピペしても関連記事が装備されなかったしブロガーのバグかと思いきや違ったんですね。
改善方法の記事を楽しみにしておきます。
こんばんは^^
僕も関連記事が表示されなくなっていたので先程調べていて同じ結論に。なにやらshowReactionsが邪魔してる感じだなぁ～。そもそも何をする機能だろう？と調べてみると…廃止される機能だったみたいです。
こちらのページで三月に廃止されると書かれていました。
時間をおいたらBloggerのチームの方が対応してくれる可能性もありますがどうなのでしょうね。しかしこうやって機能が廃止されることがあるとは…。
関連記事消滅の原因わかりました。
QooQの関連記事ウィジェットのコードははBloggerのリアクションウィジェットの中身と入れ替えて実装されているのですが、そのリアクションウィジェットが不具合か、あるいは廃止されてしまったために、その煽りを食ってしまったようです。
当ブログのリアクションウィジェットも消えてしまっていたため気づくことが出来ました。
原因が分かれば対処は簡単なのでHTMLを弄って復活させることは出来ましたけど、多少難易度が高い作業で簡単には手順の説明はできませんので、またいずれ記事にまとめてみたいと思います。
あと、QooQ作者さんにも報告しといたほうがいいかもな…
ついに関連記事がすべての記事において非表示になりました。
いろいろな方のブログがそうなりつつありますので、Google側が速やかに対処してくれることを願いますね。
ふじやんさんがいつも不具合など確認して報告して最新情報を教えてくださるおかげであまりあれこれせずに安心できます。ありがとうございます
現象確認しました。
ソースコードを見るとモバイル表示時(?m=1)ではウィジェット自体が読み込まれてませんね。
当ブログでもこの記事で表示されないことがありましたがリロードしたら直ったみたいです。
https://fujilogic.blogspot.com/2021/03/optimized-meta-tags.html?m=1
うちやbjさんのブログでも同様ということで広告とかGoogleアナリティクスが原因ではなさそう。
ここ最近Bloggerが内部で何やら変更を加えているようなので、それが影響しているのかもしれません…
もうしばらく様子を見てみましょう。
こんばんは
https://www.asobeginner.com/2020/09/thumbnail.html
上記ブログのページではpcでは関連記事が表示されますが、スマホだとされません
私だけではなく共通してこういった事例が確認されるようなので、要はこちらのミスではないと思うのですが、一体どうなっているのでしょうね。
こちらのブログでも昨日の夜に確認されなかった関連記事が、朝起きるとスマホできちんと表示されたりしています。この挙動というか誤作動の原因を知ることができたら安心なのですが、一体なんでしょうね
kamokamoさん、こんばんは。
ロケットボタン、自分でもかなり気に入ってますけど、上下に動くようになってさらに愛着湧きました(^^)
記事の更新、楽しみにしてます！
月に向かうロケット、かっこいいなあと思ってました！
うちの魚のイメージは「サケの遡上」です。
参考にさせていただいた改造についての記事を書いたら、リンク貼らせていただきます！
私もkamokamoさんのブログを参考に(記事ではなくページソースを覗いて)カスタマイズしてみました。
ゆらゆら揺れる🐟が可愛いかったんで、ウチのページトップボタンの🚀もマウスホバーで上下に動くようにしてみました。
こういう遊び心のあるカスタマイズも楽しいですよね(´▽｀)
お互い、記事の更新もマイペースで楽しく続けていきましょう。
おお、もう見つけてくださっていたんですね。
最近、ようやく関連記事が表示されるくらい記事がたまり、いざ見てみるとデザインが気になったのでこちらを参考にさせていただきました。とても分かりやすくて、他でもいろいろ影響を受けています。
まだまだ初心者でいろいろ試行錯誤しているところですが、改造は楽しいですね。
記事を書くのも無理せず楽しんで続けたいと思います。
kamokamoさん、コメントありがとうございます！
実は先月、検索でたまたまkamokamoさんのブログを見つけまして、カスタマイズの参考になりそうだったので、RSSリーダーでチェックさせていただいてました(Blogger閲覧リストでも今日フォローしました)。
関連記事デザインは、この記事を参考にされてたんですね。
拙い文の記事ばかりでお恥ずかしいですが、お役に立てたのなら嬉しいです(^^)
はじめまして、kamokamoと申します。
8月からBloggerを始めたものの、テーマの改造に夢中になってしまい、ろくに記事も書いてこなかったのですが、ひと段落したので、忘れないうちに自分なりの改造をまとめつつ、もともと予定していた記事もぼちぼち書きたいと思っています。
改造するにあたって、ふじろじっくさんの記事を大いに参考にさせていただきました。ありがとうございます！特にこの関連記事デザインはかなり影響受けてます。