こんにちは。カズパパ@下町（@GuyTangerine）です。
お休みの日は何をしていますか？最近のワタシはブログのカスタマイズやプラモデル作りですね～。一人でチマチマと作業しているの、とっても楽しい。
さて、ワタシはBloggerを利用しており、テーマはQooQを利用しているんですが、今日のカスタマイズは、以下の3つです。
・初期設定の投稿日だけでなく最終更新日を表示
・関連記事のサムネイルを丸から四角にする
・番号付きページナビケーションを表示
では、順番にご紹介していきますねー。
最終更新日を投稿日の右隣に表示させる方法
いろいろな方法があるらしいのですが、ワタシが採用した方法はコレにしてみました。検索したら最初にヒットしたのがコレだったのですよね（笑）
初期設定は記事の上部に投稿した日しか表示されません。
2022/04/17
上記な感じです。それを下記のように最終更新日を表示させます。
2022/04/15 最終更新日：2022/04/17
まずはHTML編集画面に行きます。「テーマ」→「カスタマイズの右隣の▼」→「HTML編集」でHTML編集画面を開きます。
以下のコードを検索します。
<p id='single-header-date'><data:post.dateHeader/></p>
このコードの<data:post.dateHeader/>と</p>の間にこれから書くコードを追記します。
<data:post.dateHeader/>！ここに追記！</p>
追記するコードはこちら。
<i aria-hidden='true' class='fa fa-refresh' style='margin-left:1.0em'/>
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:5px;'>
<data:post.lastupdatedISO8601/><!-- 右側に表示される -->
</span>
<script>
// 投稿日
var published=new Date("<data:post.timestampISO8601/>");
// 最終更新日
var updated =new Date("<data:post.lastUpdatedISO8601/>");
</script>
<script>
// <![CDATA[
// 投稿日
var pp_Y = ""+published.getFullYear();
var pp_M = ("0"+(published.getMonth()+1)).slice(-2);
var pp_D = ("0"+published.getDate()).slice(-2);
// 最終更新日
var dd_Y = ""+updated.getFullYear();
var dd_M = ("0"+(updated.getMonth()+1)).slice(-2);
var dd_D = ("0"+updated.getDate()).slice(-2);
if(dd_Y == pp_Y && dd_M == pp_M && dd_D == pp_D){
//日付が同じときは出力しない
var updated_dd =""+ dd_Y+"/"+dd_M+"/"+dd_D+"";
document.getElementById("last-modified").innerHTML = updated_dd;/*投稿日と更新日が同じでも双方表示させる---*/
}
else{
var updated_dd =""+ dd_Y+"/"+dd_M+"/"+dd_D+"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script>
このままだと、こんな感じで、年月日が表示されるだけです。
2022/04/15 2022/04/17
なので、「最終更新日」と表示させたいので、コードを少々編集します。以下のコードに一部追加です。この部分を、
var updated_dd =""+ dd_Y+"/"+dd_M+"/"+dd_D+"";
このように「最終更新日：」追加します。
var updated_dd ="最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";
これでおしまいです。参考にした記事はこちらです。
本当は投稿日の左隣に「公開日：」や「投稿日：」と表示させたいのですが、検索してもうまく出てこないので…誰か教えてください…。
関連記事のサムネイルを丸から四角に変更する
BlogeerでQooQを利用していると、ラベル（タグみたいなもの）を設定出来るので、記事本文の最後に「関連記事」が表示されます。その関連記事のサムネイルが丸なので四角に変更してみました。
「テーマ」→「カスタマイズの右隣の▼」→「HTML編集」でHTML編集画面を開きます。450～480行くらいのところに以下のコードがあります。
.mrp-post-img{
display: block;
border-radius: 50%;
width: 72px;
height: 72px;
object-fit: cover;
margin: 0 auto 0 auto;
}
この「border-radius: 50%;」は角を50％削るという意味なので、これを0%にすれば四角になります。ワタシは角が尖った四角より、角を少し丸めたいので10%にしました。
.mrp-post-img{
display: block;
border-radius: 10%;
width: 72px;
height: 72px;
object-fit: cover;
margin: 0 auto 0 auto;
}
これでおしまい。参考にした記事はこちら。
ブログ下部に番号付きページナビケーションを設置する
ブログの記事が増えてくると、ページナビゲーションを設置すると見栄えが良くなります。ブログの下に表示されるやつです。
＜ １…３ ４ ５ ６ ７…15 ＞
こんな感じの表示のやつ。今は全体の5ページ部分にいますよーって意味の。
もうお馴染みの、「テーマ」→「カスタマイズの右隣の▼」→「HTML編集」でHTML編集画面を開きます。
そして「</body>」の上に、以下のコードをコピペするだけ。かなり長いですけど、コピペだけなので簡単です。ただ一か所注意するところがあります。ソースの後に書きますね。
<!--番号ページャー-->
<b:if cond='data:view.isMultipleItems and !data:view.isArchive'>
<script>
//<![CDATA[
const postperpage=10; //設定している1ページ当たりの表示件数に合わせて下さい
const numshowpage=5; //表示ボタン数
const upPageWord="<"; //次のページアイコン
const downPageWord=">"; //前のページアイコン
const home_page="/";let nopage,jenis,nomerhal,lblname1,urlactivepage=location.href;function loophalaman(a){let e="";nomerkiri=parseInt(numshowpage/2),nomerkiri==numshowpage-nomerkiri&&(numshowpage=2*nomerkiri+1),mulai=nomerhal-nomerkiri,mulai<1&&(mulai=1),maksimal=parseInt(a/postperpage)+1,maksimal-1==a/postperpage&&(maksimal-=1),akhir=mulai+numshowpage-1,akhir>maksimal&&(akhir=maksimal),e+="<span class='showpageOf'>Page "+nomerhal+" of "+maksimal+"</span>";const s=parseInt(nomerhal)-1;for(nomerhal>1&&(e+=2==nomerhal?"page"==jenis?'<span class="showpage"><a href="'+home_page+'">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="/search/label/'+lblname1+'">'+upPageWord+"</a></span>":"page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+s+');return false">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+s+');return false">'+upPageWord+"</a></span>"),mulai>1&&(e+="page"==jenis?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+'">1</a></span>'),mulai>2&&(e+=" … "),f=mulai;f<=akhir;f++)nomerhal==f?e+='<span class="showpagePoint">'+f+"</span>":1==f?e+="page"==jenis?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+'">1</a></span>':e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+f+');return false">'+f+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+f+');return false">'+f+"</a></span>";akhir<maksimal-1&&(e+="…"),akhir<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+"</a></span>");const n=parseInt(nomerhal)+1;nomerhal<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+n+');return false">'+downPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+n+');return false">'+downPageWord+"</a></span>");const t=document.getElementsByName("pageArea"),l=document.getElementById("blog-pager");for(h=0;h<t.length;h++)t[h].innerHTML=e;t&&t.length>0&&(e=""),l&&(l.innerHTML=e)}function hitungtotaldata(a){const e=a.feed;b=parseInt(e.openSearch$totalResults.$t,10),loophalaman(b)}function halamanblogger(){const a=urlactivepage;if(-1!=a.indexOf("/search/label/")&&(lblname1=-1!=a.indexOf("?")?a.substring(a.indexOf("/search/label/")+14,a.indexOf("?")):a.substring(a.indexOf("/search/label/")+14,a.length)),-1==a.indexOf("?q=")&&-1==a.indexOf(".html"))if(-1==a.indexOf("/search/label/")){jenis="page",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1;const a=document.createElement("script");a.setAttribute("src",home_page+"feeds/posts/summary/?max-results=1&alt=json-in-script&callback=hitungtotaldata"),document.body.appendChild(a)}else{jenis="label",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1;const a=document.createElement("script");a.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?alt=json-in-script&callback=hitungtotaldata&max-results=1"),document.body.appendChild(a)}}function redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;const e=document.getElementsByTagName("head")[0];b=document.createElement("script"),b.type="text/javascript",b.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(b)}function redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;const e=document.getElementsByTagName("head")[0];b=document.createElement("script"),b.type="text/javascript",b.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(b)}function finddatepost(a){post=a.feed.entry[0];const e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);d=encodeURI(e).replace("+","%2B"),c="page"==jenis?"/search?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage:"/search/label/"+lblname1+"?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage,location.href=c}halamanblogger();
//]]>
</script>
<style>
.showpageNum a,
.showpage a,
.showpagePoint {
font-family: arial;
line-height: 1em;
padding: .5em .7em;
margin: 0 3px 5px;
border-radius: 20px;
display: inline-block;
font-weight: bold;
}
.showpageNum a,
.showpage a {
text-decoration:none;
color: #333!important;
background: #fff;
}
.showpagePoint {
color: #fff!important;
background: #6495ed;
}
.showpageNum a:hover,
.showpage a:hover {
color: #fff!important;
background: #6495ed;
}
.showpageOf {
display: none;
}
</style>
</b:if>
一か所だけ注意する点があります。「onst postperpage=10;」の数値を、「設定」 →「 投稿」 →「メインページに掲載する投稿数の上限」の数値と同じにしてください。
ワタシは16に設定しているので「onst postperpage=16;」としました。参考にした記事はこちらです。
これで、おしまい。
今日のブログカスタマイズは、この3つでおしまいにしまーす。ブログって記事を書くより、カスタマイズや設定をしているほうが楽しいですよね（笑）残りの時間は、プラモデルの塗装の準備をしなければ！
それでは、また。
にほんブログ村
日記・雑談ランキング
