Bloggerテーマ「QooQ(クーク)」に更新日を表示する方法

更新日: 公開日:

t f B! P L


Bloggerテーマの「QooQ(クーク)」に、更新日の表示を追加します。


ブログ記事の更新日付を表示することで、いつごろの情報なのか、メンテナンスされている記事なのかを、読んでくれる人に伝えることができます。


できれば検索エンジンにも正しい更新日付を伝えて、検索結果に表示してもらえるように表記方法にも注意して変更していきます。


Bloggerに更新日を追加

変更内容

デフォルトでは、公開日のみが表示されています。


Bloggerに更新日を追加



今回の変更で、ブログ記事を更新していない場合、公開日のみをマーク付きで表示します。


Bloggerに更新日を追加



ブログ記事を更新している場合は、更新日公開日をマーク付きで表示します。


Bloggerに更新日を追加

変更方法

テーマのテンプレート

テーマのHTMLを開いて、カスタマイズします。


念のためバックアップをとってからHTMLの編集を行ってください。


Bloggerのメニューの [テーマ] > 右上のその他アイコンをクリックします。


Blogger テーマ その他アイコン


表示されたメニューの [HTMLを編集] をクリックします。


Blogger HTMLを編集


マークを表示する

更新日・公開日の左側のマークを表示するために、Font Awesome というWebアイコンフォントを使えるようにします。

表示されたテーマのHTMLの</head>の前に、次のコードを追加します。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>

更新日・公開日をカスタマイズ

次に、テーマのHTMLの中の

<p id='single-header-date'><data:post.dateHeader/></p>

という記述を検索して、次のコードに変更します。

<!-- 更新日 公開日 表示 -->
<!-- <p id='single-header-date'><data:post.dateHeader/></p> -->
<p id='single-header-date'>
<span id='dateModified' style='margin-right:1em;'><i class='fas fa-sync-alt'></i> 更新日:
<time expr:datetime='data:post.lastUpdatedISO8601' itemprop='dateModified'>
<script>document.currentScript.insertAdjacentHTML(&#39;beforebegin&#39;,&quot;<data:post.lastUpdatedISO8601/>&quot;.substr(0,10).replaceAll(&#39;-&#39;, &#39;/&#39;));</script>
</time></span>
<span><i class='far fa-clock'></i> 公開日&#65306;<time expr:datetime='data:post.timestampISO8601' itemprop='datePublished'>
<script>document.currentScript.insertAdjacentHTML(&#39;beforebegin&#39;,&quot;<data:post.timestampISO8601/>&quot;.substr(0,10).replaceAll(&#39;-&#39;, &#39;/&#39;));</script>
</time></span>
<script>if(&quot;<data:post.lastUpdatedISO8601/>&quot;.substr(0,10) == &quot;<data:post.timestampISO8601/>&quot;.substr(0,10)){document.getElementById('dateModified').style.display="none";}</script>
</p>               


保存ボタンをクリックして保存します。


Blogger HTML保存

変更内容の説明

上のコードの中で行っている変更について説明します。

マークを表示する

次のコードで、更新日と公開日の左側にマークを表示します。


 <i class='fas fa-sync-alt'></i> 更新日マーク
 <i class='far fa-clock'></i> 公開日マーク


他のマークを使いたい場合は、Font Awesomeのアイコン一覧から好みのマークを選択して、表示されたコードをコピペします(薄い字で表示されているマークは有料です)。

<time>タグ

記事の更新日や公開日を検索エンジンに伝えるために、コンピューターが理解できる<time>タグを使用します。


更新日

<time expr:datetime='data:post.lastUpdatedISO8601' itemprop='dateModified'>表示する日時</time>


公開日

<time expr:datetime='data:post.timestampISO8601' itemprop='datepublished'>表示する日時</time>


expr: は、指定した項目の内容を属性値を設定するBloggerの制御タグです。


datetime属性には、次のようなISO 8601 形式の日付を指定します。


 更新日:lastUpdatedISO8601 例:2021-01-06T07:25:54Z
 公開日:timestampISO8601例:2020-06-18T21:30:00+09:00

「T」は、日付と時刻の区切り文字です。


時刻以降は、タイムゾーンを表しています。

「Z」は、協定世界時(UTC)であることを示します。

「+09:00」は、協定世界時(UTC)より9時間進んでいる日本時間であることを示しています。


datetime属性を指定すると、表示する文字の形式を自由に表記することができます。

<time datetime="2021-01-06">1月6日</time>


itemprop属性は、検索エンジンにそのアイテムの意味を伝えます。

更新日: itemprop='dateModified'

公開日: itemprop='datepublished'

日付の形式を変更

そのあとのJavaScriptの部分で、表示する日時を「yyyy/MM/dd」の形に変更しています。


更新日の場合、lastUpdatedISO8601(2021-01-06T07:25:54Z)の0文字目から10文字取得し、全ての'-'を'/'に変更して、「2021/01/06」という形に変更します。


document.write()は、非推奨ということで、document.currentScript.insertAdjacentHTML()で、表示する日付のHTMLを追加しています。


新しいテーマの場合、<data:post.lastUpdated.iso8601/>、<data:post.lastUpdated.year/>といったタグを使用して、JavaScriptなしで書式を変更できるようです。

更新していなければ更新日を非表示に

同じ日付の更新日と公開日が並ばないように、更新日と公開日が同じ日付の場合は、display="none" で、更新日を非表示にしています。

参考にさせていただいたサイト

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

まとめ

更新日のみを表示するか、公開日と更新日の両方を表示するか、表示の順番は? など、いろいろ迷いながらの作業でした。


できれば、検索結果に更新日を表示してほしいのですが、その辺は検索エンジン側のアルゴリズムによるそうなので、コントロールすることはできないそうです。


それでも、できるだけ検索エンジンにも、人にもやさしいブログ記事を目標にカスタマイズしていきたいと思います。


今後、この変更の影響をみて、またこの記事も更新していきたいと思います。



このブログを検索

カテゴリ

プロフィール


こんにちは!
やんちゃな兄弟 まあちゃん&うさたん のママです。

ラズベリーパイを使った簡単な電子工作やプログラミングに挑戦しています。

よかったら、詳しいプロフィールも見てください。

QooQ