こちらを参考にさせていただきました。ありがとうございます♪
このカスタマイズをすると、記事を更新した時に、自動で最終更新日が表示されるので便利です。
最終更新日が表示されると、記事の鮮度が一目で分かるので、ブログを読む人にも親切ですね。
参考元の最終更新日を表示するカスタマイズに加え、表示させる場所を標準の左から右へ移動させるカスタマイズも行いました。
ぜひ、やってみてくださいね。
Blogger「QooQ」＊日付表示
これが「QooQ」の日付表示（標準）です。
|
このように、初回の投稿日が左端に表示されています。
※標準では、表示が（2020年02月28日土曜日）となっていますので、日付の表示方法を変更する場合は、こちらをどうぞ。→日付の表示方法を変更する
この日付表示を次のようにカスタマイズしてみました。
わたしがおこなったカスタマイズは、次の通りです。
＊記事の最終更新日を表示する
＊左端にあった日付表示を右端へ移動する
それでは、実際にやってみます。
Blogger「QooQ」最終更新日を表示する方法
まずバックアップをしてから、テーマのHTML編集画面を開きます。
やり方が分からない方はこちらをどうぞ♪→テーマのHTML編集をする
サーチ窓を開き、<data:post.dateHeader/> の場所を探します。
<data:post.dateHeader/>と、その後ろにある </p> の間に、次のコードを追加します。
サーチ窓を開き、<data:post.dateHeader/> の場所を探します。
<data:post.dateHeader/>と、その後ろにある </p> の間に、次のコードを追加します。
<i aria-hidden='true' class='fas fa-history' 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>
<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>
まだ Font Awesome を導入していない場合は、次のコードを </body> の直前に追加します。
<link href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'
rel='stylesheet' type='text/css'/>
これで、次のように更新日が表示されるようになっていると思います。
|
| 更新日が表示されました |
更新日の前にあるマークは、上記コードの赤字部分で変更できます。
上記コードでは、fas fa-history となっていますが、これを fas fa-redo-alt に変えると次のマークになります。
Font Awesomeのページから、お好みのマークを見つけて変えてみてくださいね。
Blogger「QooQ」更新日を右へ移動する
次に、更新日の表示位置を左から右へ移動して、ついでに文字を少し大きくしてみます。
テーマのHTML編集画面を開いて、#single-header-date の場所を探します。
|
| 赤枠で囲んだコードを変更・追加します |
わたしは文字サイズをもう少し大きくしたかったので、font-size: 85% に変更しました。
そして、右寄せのコード text-align:right; を追加しました。
すると、こんな感じになりました。
いかがでしょうか・・・？
Blogger「QooQ」最終更新日を表示する方法まとめ
いろいろカスタマイズしているうちに、日付とラベルの位置は、左がいいのか右がいいのか、正直ちょっとよく分からなくなってきました。。。どちらにするかは、お好みで♪
どなたかのご参考になれば、うれしいです(*^-^*)
こちらもおすすめ♪
Follow @moca_simple
2 件のコメント:
mocaさん
奇麗なブログをお作りですね…感心します。
Bloggerをお使いの方は、日本では多くありませんので、どうしてWordPressを使わずに…と思ってしまいます。
mocaさんは、何故Bloggerなのかを説明なさってますので、その部分では納得できますが…
他にも有名なブログサービスがありますが、村のような感じがして、私は気乗りしませんでした…ちょっと、言い過ぎかな(^-^;
まあ、特別に吟味して比較したわけではありませんが、私はBloggerとWordPress.comの両方にお世話になっています。
初めの頃は、BloggerとWordPressへの投稿内容を区別するつもりだったんですが、そんなことも長く続かずに、結局は、両方に同じ内容の投稿をしています。
勿論、Blogger１本でとも考えたのですが、中国人の友人たちは、基本的には、GoogleのBloggerにアクセスできませんので、WordPressも残すことにしたわけです…何れ、止めるつもりですが…
WordPressは他を圧倒するかのような人気を誇ってますが、近年は利益追求型に変わってきているように思います。
ですから、無料のWordPressは、許容保存量も含めて、かなり手前に限界があります…ある方は、許容量オーバーのために、１～２年前に掲載した写真の全てを削除しています…う～ん、勿体ないと思うのですが、ご本人は、それ程には気になさっていないようですね。
私も、BloggerのテーマにQooQを使わせて頂いています。
その前は、Simplify2を利用していました…気に入っていたのですが…
私が弄り過ぎた所為か、HPに掲載せる投稿ごとの抜粋で、時々、長文になり過ぎる投稿が出てくるようになったのです。
そんな調整は簡単に出来ると思ってトライしてみたのですが、私の力量では出来なかったのです(-_-;)…後で、ページの区切りを入れると良いというコメントも見つけましたが…な～んか、変ですよね。
諦めて代わりのテーマを探していて、QooQに出会ったというわけです。
今回は、QooQのアップデートがないかをチェックしようとしていて、へぇー珍しいという感じで、mocaさんのブログに出会えたという次第です(^^♪
まあ、ある方もBloggerを利用するブログは「孤独」（いや、「孤高」という表現だったかも）だと仰ってましたからね(^-^;
でも、Bloggerの方は、面白いことに、時々、日本よりも海外からのアクセスが圧倒的に多い日がありますよね。
Simple10さん
コメントありがとうございます。
わたしのブログを見つけていただいて、とてもうれしいです♪
QooQはシンプルでとても使いやすいテーマですよね。
カスタマイズ次第でいろんな雰囲気に変えられるので、使っていて楽しいです。
日本では使っている人が圧倒的に少ない印象のBloggerですが、わたしにはそれが魅力なのかもしれません。人混みよりも、人の少ない静かな場所を好む傾向にあるといいますか・・・。情報も少ないので、それを開拓する楽しみのようなものもある気がしています
(*^-^*)
Bloggerを通じて海外の方とも交流ができればステキなのですが、わたしの英語力だと難しそうです。
コメントを投稿