ホーム / カスタマイズ /

コピペでかんたんQooQカスタマイズ！最終更新日を表示する

2019年7月9日

カスタマイズ

t f B! P L

お久しぶりー！！！

ほんとにかなーりひさしぶりですねー笑

実はbloggerのカスタマイズしつくした感があっちゃったりなかったり笑（はやすぎですね…。cssしかろくにカスタマイズできとらんし。まだまだですっ！）

この間このbloggerテンプレート「QooQ」を作成くださったラムネグさんのサイトをあらためてのぞかせてもらったんですが（新しい更新きてるかなーなんて思ったりして）、するとなんかコメント欄で「最終更新日を表示したい！」と書かれている方々が多いのに気づきました。

そうかー、そういうカスタマイズがあったかー！ということでこれこそQooQのカスタマイズをしょぼしょぼながらやっているこのブログにいいのでは…？

などと、よそ様からブログの記事アイデアをいただきつつですねぇ～、ちょっとカスタマイズ魂にひがついたというかですかねぇ～（やってることはこれまたよそ様で紹介されてた最終更新日を出すコードを大幅に参考にさせていただいております笑）

とにかく！！bloggerテンプレート「QooQ」で最終更新日を出すカスタマイズ、やってみました。

QooQで最終更新日を表示する

おまたせっ！

けっこう長時間ソースコードとにらめっこしましたよ笑

ぇぇ～結果はですね～。はい、どどんっ！と。このコードをコピペするだけ！


<p id='single-header-date'><data:post.dateHeader/><span id='single-header-update'></span></p>
<script>
var pub_date =new Date("<data:post.timestampISO8601/>");
var up_date  =new Date("<data:post.lastUpdatedISO8601/>");
</script>
<script>
//<![CDATA[
var pub_y = pub_date.getFullYear();
var pub_m = ("0"+(pub_date.getMonth()+1)).slice(-2);
var pub_d = ("0"+pub_date.getDate()).slice(-2);

var up_y = up_date.getFullYear();
var up_m = ("0"+(up_date.getMonth()+1)).slice(-2);
var up_d = ("0"+up_date.getDate()).slice(-2);
 
if(pub_y == up_y && pub_m == up_m && pub_d == up_d){
}else{
    var up_text ="　更新：" + up_y + "年" + up_m + "月" + up_d + "日";
    document.getElementById("single-header-update").innerHTML = up_text;
}
//]]>
</script>

コピペする位置

バックアップ必須っ！バックアップゼッタイっ！バックアップ大事っ！

QooQのソースコードをHTMLの編集から表示して、「single-header-date」で検索してでてきた行（2か所出てくるけど、青っぽくない方）を消して、上のをまるまるコピペでいっちょできあがりぃ。

この一行を消すっ！
<p id='single-header-date'><data:post.dateHeader/></p>

参考にさせていただいた方たち

かくいうわたしもいろんなbloggerカスタマイズの諸先輩方のブログを読んで…、その…
、コピペしたんです笑


おふたがたともよみやすい記事をありがとうございます。

けっきょくQooQでもほとんどおんなじjavascriptで動いて、最終更新日を入れるためのIDを作ってやるだけでいけました。

カスタマイズよりも…

カスタマイズもたいへんでしたが、それとおなじくらいソースコードをブログにのせるときにはみだしちゃうのをなくすのもタイヘンでした…笑

innerHTMLとDateというjavascriptも覚えられたし、レベルアップしたよっ！

おわり

QooQ