Bloggerブログで記事の更新日を表示する方法

結城永人 -2018年8月16日 (木)

公式テーマの新旧で、Bloggerブログで記事の更新日を表示する方法は異なっている。

Bloggerの新テーマ

ウィジェットバージョン2／レイアウトバージョン3

Contempo
Soho
Emporio
Notable

Bloggerの旧テーマ

ウィジェットバージョン1／レイアウトバージョン2

シンプル
動的ビュー
画像ウィンドウ
Awesome Inc.
ウォーターマーク
エスィリアル
旅行

Bloggerの更新日は表示できる範囲も公式テーマの新旧で異なっていて新テーマは注目とブログと人気の投稿、旧テーマはブログの投稿のウィジェットに所定のソースコードを記載しなくてはならない。widgetタグのTypeでいうと前者はFeaturedPostとBlogとPopularPosts、後者はBlogにマークアップを行うとブログに反映する。 BloggerのContempoテーマの些細な日常で記事ページの本文のフッターに表示された最終更新の日付

BloggerのContempoテーマの些細な日常で記事ページの本文のフッターに表示された最終更新の日付

二つのテーマの更新日のマークアップ
新テーマで更新日を表示する独自タグ
旧テーマで更新日を表示する独自タグ
デフォルトの公開日と合わせたデザイン
新テーマのデザインのソースコード
旧テーマのデザインのソースコード
更新日の文字色を公開日と揃えるデザイン
個別に右寄せなどのデザインを新しく付ける
本文の下のフッターに更新日を配置する方法
新テーマの記事／追加ページの本文のフッター
旧テーマの記事の本文のフッターの更新日の次

二つのテーマの更新日のマークアップ新テーマで更新日を表示する独自タグ<data:post.lastUpdated.iso8601/>表示例：2018-01-01T14:30:54+9:00フォーマット／年月日のマークアップ<data:post.lastUpdated/>表示例：日曜日, 1月 01, 2018設定の「言語と形式」の時刻のフォーマット（公開日のスタイル）に合わせて表示されてタイムゾーンが含まれていれば同様に反映する。タイムゾーンなしのフォーマット<b:eval expr='format (data:post.lastUpdated, "EEEE, M月 dd, YYYY")'>表示例：日曜日, 1月 01, 2018半角二重引用符の中身は諸々の変項を使いながら自由にデザインが取れる。

EEEE：曜日名（日曜日など）

M：月（1など）

dd：二桁の日（01など）

YYYY：四桁の年（2018など）

他にも様々なパターンで更新日のフォーマットのデータを取れる。

参考サイト

Format personnalisé de la date [format]

タイムゾーンありのフォーマット<data:post.lastUpdated.year/>年<data:post.lastUpdated.month/>月<data:post.lastUpdated.day/>日 <b:with var='nod' value='data:post.lastUpdated.dayOfWeek - 1'> <b:with var='dow' value='["月", "火", "水", "木", "金", "土", "日"]'> (<b:eval expr='data:dow[nod]'/>曜日) </b:with> </b:with>表示例：2018年 1月 1日 (日曜日)投稿の年月日と曜日を個別に出力する独自タグを使うと更新日のタイムゾーンありのフォーマットが得られるようになる。ソースコードを改行せずに繋げると個々の隙間を詰められる。文字のところは編集可能で、年月日のそれぞれのdateタグと七種類の曜日を纏めた外側のwith（もう一つのwithとevalを含む）タグの何れかを必要な分だけ使ったり、配置も入れ換えられる。

参考サイト

Les paramètres de dates [day/month/year/dayOfWeek/dayOfYear]

旧テーマで更新日を表示する独自タグ<data:post.lastUpdatedISO8601/>表示例：2018-01-01T14:30:54Z※末尾の「Z」は協定世界時（UTC）を表し、東京などの他のタイムゾーンは含まれない。タイムゾーンありの独自タグはない。フォーマット／年月日のマークアップ（なし）フォーマットはカスタマイズできない。Bloggerの更新日のフォーマットを変える方法は新テーマでは見付かるけど、しかし旧テーマでは独自タグだけでは不可能みたいだ。どうしても他のデザインに変えたい場合には更新日のフォーマットを操作できるJavaScript（プログラム）を追加しなくてはならないと思う。

関連ページ

旧テーマの更新日のJavaScriptでのカスタマイズ

新旧テーマの何れもHTML編集かバックアップ／復元から所定のソースコードを記載するとブログに記事の更新日が表示される。デフォルトの公開日と合わせたデザインBloggerの公式テーマは公開日に表示のスタイルだけでなくて構造化データ（検索エンジンなどの機械向けの記述）も付いているので、更新日を使う場合には両方とも合わせるとデザインが纏まり易い。新テーマのデザインのソースコード<span class='byline post-timestamp'> ラベル <b:if cond='data:post.url'> <meta expr:content='data:post.url.canonical'/> <a class='timestamp-link' expr:href='data.post-url' rel='bookmark' title='permanent link'> <time class='updated' expr:datetime='data:post.lastUpdated.iso8601' expr:title='data:post.lastUpdated.iso8601'> 新テーマで更新日を表示する独自タグ </time> </a> </b:if> </span>

参考サイト

postTimestamp [GV2]

※帯文字とリンクの部分が公開日のマークアップから変更された。更新日で記事へのリンクを付けない場合にはメタ情報のmetaタグとリンクのaタグとaタグの中の「rel='bookmark'」（ブックマークリンクを示している）を外す。ラベルは任意で付けて日付の前に表示する。タイムゾーンを使わない場合は二つの「.iso8601」を削除して更新日の独自タグはタイムゾーンなしのフォーマットを使う。旧テーマのデザインのソースコード<span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> ラベル <b:if cond='data:post.url'> <meta expr:content='data:post.url.canonical' itemprop='url'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.lastUpdatedISO8601' itemprop='dateModified'>旧テーマで更新日を表示する独自タグ</abbr></a> </b:if> </b:if> </span>※帯文字とリンクの部分が公開日のマークアップから変更された。更新日で記事へのリンクを付けない場合にはメタ情報のmetaタグとリンクのaタグとaタグの中の「rel='bookmark'」（ブックマークリンクを示している）を外す。ラベルは任意で付けて日付の前に表示する。タイムゾーンを使わないデザインはソースコードに出力するための独自タグがないから取れない。注意点として更新日の文字色が公開日のデザインを引き継げないから完全に合わせるにはCSSも変更しなくてはならない。調べると通常のリンク色のパターンの「カーソルを合わせたときの色」がなくて「リンクの色」と「表示済みの色」が反転するデザインになっているので、それぞれをCSSで対応させると上手く行く。CSSを一意のclassで割り当てるHTMLの変更も必要なので、HTML編集を使ってCSSは主にskin内などに記載する。更新日の文字色を公開日と揃えるデザインHTML<a class='timestamp-link lastupdated' expr:title='data:post.lastUpdatedISO8601' itemprop='dateModified'>abbr class='updated' expr:title='data:post.lastUpdatedISO8601' itemprop='dateModified'>旧テーマで更新日を表示する独自タグ</abbr</a>CSSa:link, a.lastupdated:visited { text-decoration:none; color: $(link.color); } a:visited, a.lastupdated:link { text-decoration:none; color: $(link.visited.color); } a:hover, a.lastupdated:hover { text-decoration:underline; color: $(link.hover.color); }※帯文字の部分が追加した項目だ。リンクを使わなければ更新日の文字色だけを通常のリンク色と同じに記載すると公開日と完全に合わせられる。更新日を通常のリンクの表示済み色にするCSSabbr.lastupdated { color: $(link.visited.color); }HTMLは変更する必要がなくて更新日を入れた要素：abbr（略語タグ）のclassの「updated」が他のデザインで使われてないためだ。個別に右寄せなどのデザインを新しく付ける更新日のマークアップを公開日と揃えるとデザインが同じになる。個別に新しく付けるためには当の独自タグの表示で使用されるtimeやabbrのclassの「updated」が「published」とは違うからCSSの個別の指定先に役立つ。しかし他のデザインとの兼ね合いから何も変わらない場合もあって新テーマで右寄せなどができないんだ。解決策として更新日の独自タグと表示で使用されるaか、リンクを外すならばtimeやabbrをdivで囲いながら「update-box」（更新の箱）などのclassを一意で付けておいて「text-align:right」（右寄せ）などのCSSをかけるのが良いと思う。HTML<div class='update-box'>更新日の独自タグを含むaやtimeやabbrのソースコード</div>CSS.update-box {text-align:right;}右寄せの場合、新テーマで更新日を公開日と揃えたデザインだと右端に一文字分が開いてしまう（全体のspanのbylineのclassのデザインによる）からCSSに「margin-right:-1em」も追加して反対側に同じ分だけ詰めると右端までぴったり合わせられるようになる。注意点としてBloggerの公式テーマではブログのデザインがデバイス毎に振り分けられていて通常だとデスクトップ／パソコンだけでモバイル／スマホで反映しない場合があるから修正する必要も出て来るかも知れない。新テーマでのCSSのモバイル指定@media screen and (max-width:480px) { ソースコード }旧テーマでのCSSのモバイル指定.mobile ソースコード新テーマではメディアクエリの@media screenを使ったり、旧テーマではBloggerのモバイル用のclassの「.mobile」を先頭に付けたりすると大丈夫だ。本文の下のフッターに更新日を配置する方法ブログのどこに最終更新日を表示するか。新テーマならば注目とブログと人気の投稿、旧テーマならばブログの投稿のwidgetタグに所定の独自タグを記載すると反映するけど、一例として記事／追加ページの本文の下のラベルなどのフッターに配置する方法を取り上げてみたい。新テーマの記事／追加ページの本文のフッターContempo<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true'> 中略 <b:includable id='postFooter' var='post'> <div class='post-bottom'> <div class='post-footer float-container'> <b:include name='footerBylines'/> 新テーマのデザインのソースコード <b:include cond='data:widget.type == "Blog"' data='post' name='postFooterAuthorProfile'/> </div> 中略 </b:includable> 中略 </widget>SohoとEmporio<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true'> 中略 <b:includable id='postFooter' var='post'> <div class='post-footer'> <b:include name='footerBylines'/> 新テーマのデザインのソースコード <b:include data='post' name='postFooterAuthorProfile'/> </div> 中略 </b:includable> 中略 </widget>Notable<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true'> 中略 <b:includable id='postFooter' var='post'> <div class='post-bottom'> <div class='post-footer'>  <b:include name='footerBylines'/> 新テーマのデザインのソースコード </div> 中略 </div> </b:includable> 中略 </widget>BlogのTypeのwidgetタグの<b:include name='footerBylines'/>がラベルなどのフッターを出力しているので、その後に更新日をマークアップするとブログの記事／追加ページの本文の後のフッターにラベルなどに続いてブログに表示される。トップやアーカイブなどのインデックスページの記事の抜粋のスニペットにも表示される。最終更新日を記事ページだけに振り分けて表示する場合は新テーマのデザインのソースコードを<b:if cond='data:view.isPost'></b:if>で囲って記載しておくと大丈夫だ。または追加ページも含める場合は振り分けタグを<b:if cond='data:view.isSingleItem'></b:if>に変更する。旧テーマの本文のフッターの更新日の次ブログのインデックスと記事／追加ページの本文のフッターが対象で、注目と人気の投稿には公開日が付かないのと同様に更新日も除外される。全テーマ共通<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1'> 中略 <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <meta expr:content='data:post.url.canonical' itemprop='url'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>旧テーマのデザインのソースコード </b:if> </b:if> </span> 中略 </b:widget>旧テーマのテンプレートには本文のフッターの更新日のソースコードが二つあってデスクトップ版とモバイル版（テーマでモバイルを設定すると使用可能）に分かれている。何れもBlogのTypeのwidget内に含まれていてモバイル版が<b:includable id='mobile-post' var='post'></b:includable>で定義されている。外側がデスクトップ版のソースコードになっている。公開日の次に更新日を表示するためには必要な分だけ、多ければ二つ記載しなくてはならない。

コメント