HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
ブログ執筆がはかどる*便利なサイト&ツール
旧ブログはこちらから
日記ブログ

【Blogger】QooQ *最終更新日を表示する方法

2020/03/15

Blogger QooQ ブログ


Bloggerの日本語テンプレート「QooQ」で、最終更新日を表示するカスタマイズです。

こちらを参考にさせていただきました。ありがとうございます♪


このカスタマイズをすると、記事を更新した時に、自動で最終更新日が表示されるので便利です。

最終更新日が表示されると、記事の鮮度が一目で分かるので、ブログを読む人にも親切ですね。

参考元の最終更新日を表示するカスタマイズに加え、表示させる場所を標準の左から右へ移動させるカスタマイズも行いました。

ぜひ、やってみてくださいね。

Blogger「QooQ」*日付表示

これが「QooQ」の日付表示(標準)です。

「QooQ」の日付表示(標準)


このように、初回の投稿日が左端に表示されています。

※標準では、表示が(2020年02月28日土曜日)となっていますので、日付の表示方法を変更する場合は、こちらをどうぞ。→日付の表示方法を変更する

この日付表示を次のようにカスタマイズしてみました。

最終更新日を右に表示


わたしがおこなったカスタマイズは、次の通りです。

*記事の最終更新日を表示する
*左端にあった日付表示を右端へ移動する

それでは、実際にやってみます。

Blogger「QooQ」最終更新日を表示する方法

まずバックアップをしてから、テーマのHTML編集画面を開きます。

やり方が分からない方はこちらをどうぞ♪→テーマのHTML編集をする

サーチ窓を開き、<data:post.dateHeader/> の場所を探します。

テーマのHTML編集画面


<data:post.dateHeader/>と、その後ろにある </p> の間に、次のコードを追加します。
                         
<i aria-hidden='true' class='fas fa-history' style='margin-left:1.0em'/>
    <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:5px;'>
   <data:post.lastupdatedISO8601/><!-- 右側に表示される -->
</span>
<script>
// 投稿日
var published=new Date(&quot;<data:post.timestampISO8601/>&quot;);
// 最終更新日 
var updated =new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;);
</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 の場所を探します。

テーマのHTML編集画面
赤枠で囲んだコードを変更・追加します

わたしは文字サイズをもう少し大きくしたかったので、font-size: 85% に変更しました。

そして、右寄せのコード text-align:right;  を追加しました。

すると、こんな感じになりました。



いかがでしょうか・・・?

Blogger「QooQ」最終更新日を表示する方法まとめ

いろいろカスタマイズしているうちに、日付とラベルの位置は、左がいいのか右がいいのか、正直ちょっとよく分からなくなってきました。。。

どちらにするかは、お好みで♪
どなたかのご参考になれば、うれしいです(*^-^*)

こちらもおすすめ♪




このブログを検索


*ブログ歴4年のわたしが今までにしてきた、ブログ・Twitterの運営方法やBloggerカスタマイズについてまとめました。

*これから始める方の参考になればうれしいです。

*小3と年中の男の子たちと暮らしている専業主婦。

*家事と子育ての合間のお楽しみにブログを書いています。

*このブログは、Blogger日本語テンプレート「QooQ」(リスト版)を使用しています。

*旧カスタマイズブログ(Tokyo使用)
moca*Blogger「Tokyo」

*日記ブログ(QooQ使用)
シンプルでステキな毎日を

*はてなブログ
シンプルでステキな毎日☆


↓Twitterでブログ更新をお知らせ♪/

ツイッター

カテゴリ

QooQ