Bloggerの時刻のフォーマット／投稿の年月日と曜日の並び替えのカスタマイズ

Bloggerの投稿の日付の時刻のフォーマットはデフォルトで七種類が用意されているけれどもHTML編集のカスタマイズで年月日と曜日を並び替えて他のスタイルでも表示できる。

公開日の年月日と曜日を並び替えるソースコード
タイムゾーンなしの公開日の時刻のフォーマット
更新日の年月日と曜日を並び替えるソースコード
旧テーマの更新日のJavaScriptでのカスタマイズ
タイムゾーンなしの更新日の時刻のフォーマット
新テーマのテンプレートへの記載の仕方
公開日の時刻のフォーマットの場合
更新日の時刻のフォーマットの場合
旧テーマのテンプレートへの記載の仕方
公開日の時刻のフォーマットの場合
更新日の時刻のフォーマットの場合

公開日の年月日と曜日を並び替えるソースコード粉雪の野原

Powdery snowfield by cocoparisienne / Pixabay

<data:post.date.year/>年 <data:post.date.month/>月 <data:post.date.day/>日 <b:with var='nod' value='data:post.date.dayOfWeek - 1'> <b:with var='dow' value='["月", "火", "水", "木", "金", "土", "日"]'> (<b:eval expr='data:dow[nod]'/>曜日) </b:with> </b:with>表示例：2018年 1月 1日 (日曜日)※年月日と曜日のそれぞれのマークアップを改行しなければ個々に隙間は付かない。Bloggerの年月日と曜日を個別に出力する独自タグを使うと一つずつ並び替えてブログに表示するカスタマイズが可能になる。

data:post.date.year

年（西暦）

data:post.date.month

月

data:post.date.day

日

data:post.date.dayOfWeek

曜日（順番）

参考サイト

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

どれも数字だから年月日はdataで直ぐに表示して構わないけれども曜日はそのままでは表示できない。しかし1から7までの数字が月曜日から日曜日までに対応しているので、文字列の配列処理で参照する値として使って曜日に変換しながら個々に出力している。カスタマイズでは独自タグの年月日の三つのdataと七つの曜日のdataを纏めた外側のwith（もう一つのwithとevalを含む）を動かしてブログに表示する年月日と曜日を並び替えたり、独自タグ以外の文字のところはデザインも変えられる。曜日が不要ならば<b:with var='nod' value='data:post.date.dayOfWeek - 1'>中略</b:with>を削除する。日付そのものの値はタイムゾーンが加味されていて設定の言語と設定のフォーマットのタイムゾーンが反映している。新テーマのContempoとSohoとEmporioとNotableと旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行のどちらのバージョンでも構わないと思う。時刻のフォーマットの年月日と曜日の個別のdateタグは新テーマで初めて追加されたらしい。元々、旧テーマの公開日は「post.date」ではなくて「post.timestamp」から取らなくてはならない。試しに合わせると使えないけど、ところが新テーマ用で記載すると反対に大丈夫なんだ。旧テーマでも時刻のフォーマットの年月日と曜日の個別のdateタグにかぎっては「post.date」の出力が得られる。タイムゾーンなしの公開日の時刻のフォーマットContempoなどの新テーマにかぎって別の仕方で、タイムゾーンなしの協定世界時（UTC）の時刻のフォーマットのカスタマイズも可能になっている。<b:eval expr='format (data:post.date, "EEEE, M月 dd, YYYY")'/>表示例：日曜日, 1月 01, 2018半角二重引用符（""）の中身は諸々の変項を使いながら自由にデザインが取れる。

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

M：月（1など）

dd：二桁の日（01など）

YYYY：四桁の年（2018など）

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

参考サイト

Format personnalisé de la date [format]

東京／日本ならば九時間前の時刻のフォーマットが表示される。シンプルなどの旧テーマでは日付の「format」の操作ができないので、Bloggerの独自タグでの時刻のフォーマットはタイムゾーンありのカスタマイズだけが可能だ。更新日の年月日と曜日を並び替えるソースコード新テーマだけが対応する独自タグを持っている。<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の「post.date」が「post.lastUpdated」に変わっているだけだ。カスタマイズでの使い方は全く同じで、年月日と曜日の独自タグを動かして並び替えたり、文字のところはデザインも変えられるんだ。曜日が不要ならば<b:with var='nod' value='data:post.lastUpdated.dayOfWeek - 1'>中略</b:with>を削除する。旧テーマには更新日の時刻のフォーマットを変更する独自タグがないみたいなので――または公開日の場合のように新テーマ用のマークアップを行っても反映しない――カスタマイズが必要ならばJavaScriptなどの独自タグ以外の方法を使って普通に表示するのを書き換えるしかなさそうだ。旧テーマの更新日のJavaScriptでのカスタマイズHTML<span expr:id='data:post.id + "-updated"'><data:post.lastUpdatedISO8601/></span>JavaScriptvar dt = new Date("<data:post.lastUpdatedISO8601/>"); var year = dt.getFullYear(); var month = dt.getMonth() + 1; var date = dt.getDate(); var day = dt.getDay(); var dow = new Array("日", "月", "火", "水", "木", "金", "土"); document.getElementById("<data:post.id/>-updated").innerHTML = year + "年" + month + "月" + date + "日" + " (" + dow[day] + "曜日)";表示例：2018年1月1日 (日曜日)JavaScriptの最後のinnerHTMLメソッドが更新日のデフォルトの数字だけの表示の書き換えを行う。更新日の年月日の数字と曜日が「year」と「mouth」と「date」と「dow[day]」に対応している。そして半角二重引用符（""）のところが文字を入力できる。それそれの項目は半角プラス（+）で連結して様々なパターンで更新日を表示できるようになっている。曜日が不要ならばJavaScriptの「var day」から「"土");」までとinnerHTMLメソッドの「dow[day]」や関連する文字を削除する。タイムゾーンなしの更新日の時刻のフォーマット公開日の場合と等しく、新テーマだけが日付の出力を「format」で操作して時刻のフォーマットをカスタマイズできる。<b:eval expr='format (data:post.lastUpdated, "EEEE, M月 dd, YYYY")'/>表示内容が「date.post」から更新日の「date.lastUpdated」になっているところが異なっている。カスタマイズの方法は公開日と変わらなくて半角二重引用符（""）の中身によって様々なパターンで年月日と曜日を表示できるソースコードなんだ旧テーマは「format」が動作しないからやはり公開日と同様にタイムゾーンなしの時刻のフォーマットはカスタマイズできない。新テーマのテンプレートへの記載の仕方時刻のフォーマットはBloggerの三種類のウィジェットで動作する。

ブログの投稿ウィジェット＿Blogのtypeのwidget

注目の投稿ウィジェット＿FeaturedPostのtypeのwidget

人気の投稿ウィジェット＿PopularPostsのtypeのwidget

使用するwidgetのtypeにソースコードを記載しなければならない。公開日の時刻のフォーマットの場合デフォルトで時刻のフォーマットはサーバーから出力される状態なので、そのままだとHTML編集でカスタマイズのソースコードを記載できない。<b:include name='super.headerByline'/>時刻のフォーマットを含む独自タグを分解しなくてはならないけど、ただし他のコンテンツが入っているから全て引き出して記載するのは大変なので、一つだけ変更するならば外側から働きかけるようにするのが比較的に簡単な方法だ。<b:includable id='postTimestamp'> <span class='byline post-timestamp'> <data:byline.label/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time> </a> </b:if> </span> </b:includable>※太字の部分が日付を出力している。サーバーの独自タグの<b:include name='super.headerByline'/>&が読み込む中に時刻のフォーマットを定義付けるposttimestampのidのincludableタグが含まれているためにHTML編集に一つだけ取り出してソースコードを変更しても新しく読み込まれてテンプレートに反映してくれる。公開日の日付の表示に相当するのが<data:post.date/>なので、公開日の時刻のフォーマットのカスタマイズのソースコードと置き換える。includableタグはwidget内で、動作するので、使用するtypeの中から選んでカスタマイズを行う。Bloggerでwidget内にincludableタグを追加する場合はwidgetsettingsと他のincludableタグに囲まれないように記載するとエラーにはならない。includableタグは幾つかのソースコードを纏めた一つの定義付けのためのマークアップなので、テンプレートにはそれ自体のidが独立して他のincludeタグなどから読み取られるように配置しておかなくてはならない。新テーマの公開日はデフォルトで記事のタイトルの下に<b:include name='super.headerByline'/>で記載されるようになっているので、表示する場所を変えるならばレイアウトのブログの投稿の設定でデフォルトのスタイルを表示しないようにしてPostTimestampのincludableタグの中身を新しく表示したい場所に記載すると良いと思う。<span class='byline post-timestamp'> <data:byline.label/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>公開日の時刻のフォーマットのカスタマイズのソースコード</time> </a> </b:if> </span>includableタグは配置に関係なく、読み取られるところで反映するけど、定義付けられる内容だけを使うと記載したところで、反映してブログに表示される。記事の本文のラベルの下ならば<b:include name='figcaptionBylines'/>の直後などが挙げられる。ただしインデックスページでも表示されて記事ページの本文と抜粋（スニペット）でデザインが変わるから記事／ページだけに振り分けるとすると<b:if cond='data:view.isSingleitem'>で公開日のソースコードを全体的に囲っておけばインデックスページには表示されなくなるんだ。更新日の時刻のフォーマットの場合デフォルトで何も表示されてなくてマークアップはブログに新しく追加するのと同じだ。<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>ラベルやリンクタグのaとメタ情報のmetaは不要ならば消去して構わないし、bylineやpost-timestampのclassのspanタグを外すと公開日の文字色や余白などのデザインを引き継がなくなる。どこに配置するかは記事の本文の下のフッターかデフォルトの公開日の次が多いかも知れない新テーマの記事タイトルの下の公開日は著者と一緒にデザインされていて出力する<b:include name='super.headerByline'/>の次にコンテンツを追加してもバランスが取り辛い。なので公開日の時刻のフォーマットのソースコードを個別に取り出して後ろに更新日を追加するのが望ましい。<b:includable id='postTimestamp'> <span class='byline post-timestamp'> <data:byline.label/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time> </a> ラベル <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> </b:includable>※公開日と共有できる更新日のタグは省略している。
※太字の部分が更新日のためのソースコードで、ラベルやリンクタグのaとメタ情報のmetaは任意で使う。公開日のカスタマイズと同じで、includableタグを扱うので、記載する場所は幾つかの注意点を踏まえながらマークアップを行わないとエラーになってしまう。widget内のwidgetsettingsや他のincludableタグとは分離して記載する。更新日のデザインを公開日と一緒に変える場合には両方のソースコードが必要だし、記事のタイトルの下に隣同士にするならばpostTimestampのidのincludableを使って一つに纏めるマークアップを行うと便利だ。旧テーマの公開日の時刻のフォーマットの記載時刻のフォーマットはブログの投稿ウィジェットで動作する。デフォルトのデザインでは注目や人気の投稿ウィジェットには反映しない。旧テーマはテンプレートのソースコードがデスクトップとモバイルに分かれている。

デスクトップの記事＿postのidのincludable

モバイルの記事＿mobile-post-idのincludabln

※他にももっと細かく分けられている場合がある。テーマの「モバイル」を設定している場合にはモバイルのデザインが使われる。必要なソースコードを別々に記載しなくてはならない。公開日の時刻のフォーマットの場合記事の本文の下に公開日の時刻のフォーマットが付いている。<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>※太字の部分が日付を出力している。HTML編集で公開日の時刻のフォーマットのソースコードを見付けて<data:post.timestamp/>を公開日の時刻のフォーマットのカスタマイズのソースコードに置き換えるとマークアップは完了する。デスクトップとモバイルで、テンプレートの二ヵ所に公開日の時刻のフォーマットのソースコードが記載されている。postかmobile-postのidのincludableタグに囲まれているから必要な分だけカスタマイズを行う。更新日の時刻のフォーマットの場合Bloggerの独自タグでは更新日の時刻のフォーマットはカスタマイズできないけど、しかしソースコードにJavaScriptなどを追加すると可能なんだ。デフォルトで何も表示されてなくてマークアップはブログに新しく追加するのと同じだ。<span class='post-timestamp'> ラベル <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'>旧テーマの更新日カスタマイズのHTML</abbr> </a> </b:if> </span> <script> 旧テーマの更新日のカスタマイズのJavaScript </script>※ラベルやリンクタグのaとメタ情報のmetaは任意で使う。テンプレートのソースコードがデスクトップとモバイルに分かれているのを注意しなくてはならない。加えて公開日の文字色やリンク色などのデザインを揃える場合は更新日を表示する方法で取り上げたけれどもブログのCSSもカスタマイズしなくてはならないから手間はちょっと増える。どこに記載するかは記事の本文の下のフッターの公開日の次が配置し易いと思う。<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'>gt;<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a> ラベル <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'>旧テーマの更新日カスタマイズのHTML</abbr> </a> </b:if> </b:if> </span> <script> 旧テーマの更新日のカスタマイズのJavaScript </script>※公開日と共有できる更新日のタグは省略している。
※太字の部分が更新日のためのソースコードで、ラベルやリンクタグのaとメタ情報のmetaは任意で使う。他には記事タイトルの周りが良く使われる。旧テーマは日付ヘッダーフォーマットという時刻のフォーマットとは別の公開日がレイアウトのブログの投稿から設定できる。更新日の時刻のフォーマットを隣に置くと二つ並べるデザインが取れる。<b:if cond='data:post.dateHeader'> 中略 <data:post.dateHeader/>旧テーマの更新日カスタマイズのHTML 中略 </b:if> <script> 旧テーマの更新日のカスタマイズのJavascript </script>デスクトップとモバイルのインデックスページと記事／追加ページの三つに分かれている。ブログの投稿ウィジェットの日付ヘッダー

デスクトップ＿mainのidのincludable

モバイルのインデックスページ＿mobile-index-postのincludable

モバイルの記事ページ＿mobile-postのidのincludable

対応するincludable内の<data:post.dateHeader/>のところを編集する。デザインは日付ヘッダーのフォーマットと同じになって次に表示される。

コメント