Bloggerの時刻のフォーマット/投稿の年月日と曜日の並び替えのカスタマイズ 結城永人 - 2018年9月3日 (月) 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> JavaScript var 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/>のところを編集する。 デザインは日付ヘッダーのフォーマットと同じになって次に表示される。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
コメント