※レイアウトバージョン3、ガジェットバージョン2の、公式のテーマかそれに近い書き方をしている Blogger テーマに対応しています。バージョンの確認は、「テーマ」→「HTMLの編集」で HTML 要素に「b:defaultwidgetversion='2' b:layoutsVersion='3'」の属性があるかで判断可能です。
Blogger の投稿日時の表示形式
公式の Blogger テーマを使っていて、投稿日時の形式の自由度が低いことに気になるようになってきました。投稿日時は、通常は次のように表示されています。 |
| Blogger のテーマ「Notable」の表示例。 ここでは投稿日時は「22:39」と表示されている。 |
投稿日時の形式は Blogger の設定項目で選べるのですが、時間または日付のどちらか片方しか選べず、しかも日付は年月日の並びではなく、月日年や日月年の並びになります。
 |
| Blogger の投稿日時の表示形式を設定する場所。 [レイアウト]→[ブログの投稿]の右上の鉛筆マークから変更可能。 |
 |
| Blogger で用意されている選択肢。あんまり日本人向けではない感じ。 |
上記のように選択肢が少ないので、年月日の順に並べたいとか、日付に「日」を付けたいとか、日付と時間を同時に表示したいとか、そういう設定がありません。
そこで。
「テーマをちょっと書き換えて対応しちゃおう！」
というのが、今回の趣旨になります。これをやるとこんな感じにできたりします。
- 2018年12月24日 20時0分
- '18 12/24 20:00
- '18 12/24(Mon) 20:00
- ２０１８年１２月２４日（月） ２０時０分
- 二〇一八年一二月二四日 二〇時〇分
- 二千十八年十二月二十四日 二十時〇分
- 平成三十年師走二十四日（月曜日）二十時〇分
- 平成３０年１２月２４日（月） ２０時０分
書き換え開始！
この方法では対応しきれないテーマも存在すると思います。その場合は効果がなかったり、場合によっては表示が崩れる可能性もあります。試してみるまでわかりませんので、バックアップは重要です。１．バックアップ
うまくいかなかったときに元に戻せるように、バックアップは必ず保存しておきましょう。[テーマ]の画面の右上にある[バックアップ/復元]から[テーマをダウンロード]で、PC上のわかりやすい場所に保存してください。これで、万が一のときは[バックアップ/復元]でバックアップファイルを選択して[アップロード]すれば元に戻せるようになりました。
２．コードを書き換える
バックアップの準備ができたら書き換えを始めていきましょう。テーマの書き換えは[テーマ]→[HTMLの編集]から行います。[ウィジェットへ移動]ボタンから[Blog1]を選び、<b:widget id='Blog1' ～～ > と書かれた部分を開いてみてください。
その中に <b:includable id='postTimestamp'> というものが無ければ次のコードをまるごと </b:widget> の直前にコピーしてください。ある場合は <data:post.date /> と書かれている行を次のコードの赤字の部分（太字を含む）のように書き換えます。
（<b:includable id='postTimestamp'> はあるけど <data:post.date /> がないという場合も、おそらくどこかに日付を記述している部分があるはずなので、ある程度の知識があればご自身で場所を特定して書き換えればできると思います。ただし不安ならやめておきましょう）
<b:includable id='postTimestamp'>
<span class='byline post-timestamp'>
<data:byline.label />
<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='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<b:loop values='0 to 23' var='postdatehour'>
<b:if cond='data:datetime.iso8601 contains ((data:postdatehour < 10 ? "T0" : "T") + data:postdatehour)'>
<b:with value='data:datetime format "m"' var='postdateminute'>
<data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日 <data:postdatehour/>時<data:postdateminute/>分
</b:with>
</b:if>
</b:loop>
</time>
</a>
</b:if>
</span>
</b:includable>このコードは、投稿日時を「〇〇〇〇年〇〇月〇〇日 〇〇時〇〇分」の形で表示するためのコードです。これは Blogger Code というサイトにあるコードを元に、主に赤字の部分を自分なりに書き換えたものです。（※2018年12月27日現在、Blogger Code は閉鎖中のため該当ページの URL がわかりません）
一見複雑なコードですが、太字以外の赤字の部分は時間と分を取得するためのコードで、太字で書かれた行が形式になっています。
３．うまくいったか確かめる
[テーマをプレビュー] ボタンを押して確かめてみましょう。「〇〇〇〇年〇〇月〇〇日 〇〇時〇〇分」の形で表示されていれば成功です。保存すればブログに反映されます。これで成功しないようであれば、この方法では対応できないテーマである可能性があります。テーマのカスタマイズ知識があればどうにかなりますが、そうでなければ保存せずに閉じましょう。もし保存していた場合は最初に用意しておいたバックアップから復元してください。
さらなるカスタマイズ
上記の「〇〇〇〇年〇〇月〇〇日 〇〇時〇〇分」も自分好みの表示ではない、と感じた人もいるかもしれません。単純に記号や順番を変えたいのであれば、先程の太字の部分を見てちょこっと変えるだけで済みます。また、年を下二桁にしたいとか、月日や時分が一桁の場合に十の位に 0 を付けたいとか、曜日がほしいとか、月を睦月、如月、弥生・・・で表示したいとかもあると思います。
そういうコードになってくると少し複雑なので、カスタマイズ例をいくつか載せていこうと思います。先程のコードの赤い太字の部分を書き換えてください。
'18 12/24 20:00
年月日よりシンプルに書きたい人向け。すべて2桁で表示します。
'<b:eval expr='((data:post.date.year % 100) < 10 ? "0" : "") + (data:post.date.year % 100)'/> <b:eval expr='(data:post.date.month < 10 ? "0" : "") + data:post.date.month'/>/<b:eval expr='(data:post.date.day < 10 ? "0" : "") + data:post.date.day'/> <b:eval expr='(data:postdatehour < 10 ? "0" : "") + data:postdatehour'/>:<b:eval expr='(data:postdateminute < 10 ? "0" : "") + data:postdateminute'/>'18 12/24(Mon) 20:00
よりスタイリッシュに。上記に加えて曜日を英語で出力した例。曜日を並べて書いてある場所を書き換えていただければ、漢字等にも対応可能です。
<b:with value='["","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]' var='syuu'>
'<b:eval expr='((data:post.date.year % 100) < 10 ? "0" : "") + (data:post.date.year % 100)'/> <b:eval expr='(data:post.date.month < 10 ? "0" : "") + data:post.date.month'/>/<b:eval expr='(data:post.date.day < 10 ? "0" : "") + data:post.date.day'/>(<b:eval expr='data:syuu[data:post.date.dayOfWeek]'/>) <b:eval expr='(data:postdatehour < 10 ? "0" : "") + data:postdatehour'/>:<b:eval expr='(data:postdateminute < 10 ? "0" : "") + data:postdateminute'/>
</b:with>２０１８年１２月２４日（月） ２０：００
書類ではよくあるけどブログでは珍しい、全角数字を使った日時表記。
<b:with value='["","月","火","水","木","金","土","日"]' var='syuu'>
<b:with value='["０","１","２","３","４","５","６","７","８","９"]' var='kansuuji'>
<b:eval expr='data:kansuuji[(data:post.date.year - (data:post.date.year % 1000)) / 1000]'/><b:eval expr='data:kansuuji[((data:post.date.year - (data:post.date.year % 100)) / 100) % 10]'/><b:eval expr='data:kansuuji[((data:post.date.year - (data:post.date.year % 10)) / 10) % 10]'/><b:eval expr='data:kansuuji[data:post.date.year % 10]'/>年<b:if cond='data:post.date.month > 9'><b:eval expr='data:kansuuji[(data:post.date.month - (data:post.date.month % 10)) / 10]'/></b:if><b:eval expr='data:kansuuji[data:post.date.month % 10]'/>月<b:if cond='data:post.date.day > 9'><b:eval expr='data:kansuuji[(data:post.date.day - (data:post.date.day % 10)) / 10]'/></b:if><b:eval expr='data:kansuuji[data:post.date.day % 10]'/>日（<b:eval expr='data:syuu[data:post.date.dayOfWeek]'/>）　<b:if cond='data:postdatehour > 9'><b:eval expr='data:kansuuji[((data:postdatehour - (data:postdatehour % 10)) / 10) % 10]'/></b:if><b:eval expr='data:kansuuji[data:postdatehour % 10]'/>時<b:if cond='data:postdateminute > 9'><b:eval expr='data:kansuuji[((data:postdateminute - (data:postdateminute % 10)) / 10) % 10]'/></b:if><b:eval expr='data:kansuuji[data:postdateminute % 10]'/>分
</b:with>
</b:with>二〇一八年一二月二四日 二〇時〇分
和風ブログに似合いそうな漢数字を使った日時表記。全角数字の漢数字置き換えバージョン。
<b:with value='["〇","一","二","三","四","五","六","七","八","九"]' var='kansuuji'>
<b:eval expr='data:kansuuji[(data:post.date.year - (data:post.date.year % 1000)) / 1000]'/><b:eval expr='data:kansuuji[((data:post.date.year - (data:post.date.year % 100)) / 100) % 10]'/><b:eval expr='data:kansuuji[((data:post.date.year - (data:post.date.year % 10)) / 10) % 10]'/><b:eval expr='data:kansuuji[data:post.date.year % 10]'/>年<b:if cond='data:post.date.month > 9'><b:eval expr='data:kansuuji[(data:post.date.month - (data:post.date.month % 10)) / 10]'/></b:if><b:eval expr='data:kansuuji[data:post.date.month % 10]'/>月<b:if cond='data:post.date.day > 9'><b:eval expr='data:kansuuji[(data:post.date.day - (data:post.date.day % 10)) / 10]'/></b:if><b:eval expr='data:kansuuji[data:post.date.day % 10]'/>日　<b:if cond='data:postdatehour > 9'><b:eval expr='data:kansuuji[((data:postdatehour - (data:postdatehour % 10)) / 10) % 10]'/></b:if><b:eval expr='data:kansuuji[data:postdatehour % 10]'/>時<b:if cond='data:postdateminute > 9'><b:eval expr='data:kansuuji[((data:postdateminute - (data:postdateminute % 10)) / 10) % 10]'/></b:if><b:eval expr='data:kansuuji[data:postdateminute % 10]'/>分
</b:with>二千十八年十二月二十四日 二十時〇分
漢数字その２。漢数字に桁の表記ありバージョン。千の桁、百の桁、十の桁、一の桁でそれぞれ０～９に対応する言葉を全て列挙して、それを結合しています。列挙されている数字をすべて書き換えれば「弐阡壱拾八年壱拾弐月弐拾四日」などの表示も可能です。<b:with value='["","千","二千","三千","四千","五千","六千","七千","八千","九千"]' var='kansuujisen'>
<b:with value='["","百","二百","三百","四百","五百","六百","七百","八百","九百"]' var='kansuujihyaku'>
<b:with value='["","十","二十","三十","四十","五十","六十","七十","八十","九十"]' var='kansuujijuu'>
<b:with value='["零","一","二","三","四","五","六","七","八","九"]' var='kansuujiichi'>
<b:eval expr='data:kansuujisen[((data:post.date.year - (data:post.date.year % 1000)) / 1000) % 10]'/><b:if cond='(data:post.date.year % 1000) > 99'><b:eval expr='data:kansuujihyaku[((data:post.date.year - (data:post.date.year % 100)) / 100) % 10]'/></b:if><b:if cond='(data:post.date.year % 100) > 9'><b:eval expr='data:kansuujijuu[((data:post.date.year - (data:post.date.year % 10)) / 10) % 10]'/></b:if><b:if cond='data:post.date.year < 9 or (data:post.date.year % 10) > 0'><b:eval expr='data:kansuujiichi[data:post.date.year % 10]'/></b:if>年<b:if cond='data:post.date.month > 9'><b:eval expr='data:kansuujijuu[(data:post.date.month - (data:post.date.month % 10)) / 10]'/></b:if><b:if cond='data:post.date.month < 9 or (data:post.date.month % 10) > 0'><b:eval expr='data:kansuujiichi[data:post.date.month % 10]'/></b:if>月<b:if cond='data:post.date.day > 9'><b:eval expr='data:kansuujijuu[(data:post.date.day - (data:post.date.day % 10)) / 10]'/></b:if><b:if cond='data:post.date.day < 9 or (data:post.date.day % 10) > 0'><b:eval expr='data:kansuujiichi[data:post.date.day % 10]'/></b:if>日　<b:if cond='data:postdatehour > 9'><b:eval expr='data:kansuujijuu[((data:postdatehour - (data:postdatehour % 10)) / 10) % 10]'/></b:if><b:if cond='data:postdatehour < 9 or (data:postdatehour % 10) > 0'><b:eval expr='data:kansuujiichi[data:postdatehour % 10]'/></b:if>時<b:if cond='data:postdateminute > 9'><b:eval expr='data:kansuujijuu[((data:postdateminute - (data:postdateminute % 10)) / 10) % 10]'/></b:if><b:if cond='data:postdateminute < 9 or (data:postdateminute % 10) > 0'><b:eval expr='data:kansuujiichi[data:postdateminute % 10]'/></b:if>分
</b:with>
</b:with>
</b:with>
</b:with>平成三十年師走二十四日（月曜日） 二十時零分
元号＋和風月名＋漢数字（桁あり）＋曜日の和風フルコース。Blogger は1970年より前に投稿日時を設定できないので、「昭和」と「平成」に対応し、それと2019年5月1日から予定されている新元号を入れる場所も用意しました。ちなみに、元号がかわる日付より前か後かで年の表記が変わるようにしています。また、1年目は「元年」で表記します。新元号が発表されたら「平成の後」と書いてある部分を書き換えてください。もし元号が変わる場合、そのたびに追記が必要です。元号が始まる日付を nennhajime の「,99999999」の前に「,年(4桁)月(2桁)日(2桁)」の形で追加し、元号を genngou の「]」の前に「,"元号"」の形で追加してください。
<b:with value='["","十","二十","三十","四十","五十","六十","七十","八十","九十"]' var='kansuujijuu'>
<b:with value='["零","一","二","三","四","五","六","七","八","九"]' var='kansuujiichi'>
<b:with value='["睦月","如月","弥生","卯月","皐月","水無月","文月","葉月","長月","神無月","霜月","師走"]' var='tsuki'>
<b:with value='["","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日", "日曜日"]' var='syuu'>
<b:with value='[19261225,19890108,20190501,99999999]' var='nennhajime'>
<b:with value='["昭和","平成","平成の後"]' var='genngou'>
<b:loop index='genngouidx' values='data:genngou' var='genngou'><b:if cond='((data:post.date.year * 10000 + data:post.date.month * 100 + data:post.date.day) >= data:nennhajime[data:genngouidx]) and ((data:post.date.year * 10000 + data:post.date.month * 100 + data:post.date.day) < data:nennhajime[data:genngouidx+1])'><b:eval expr='data:genngou'/><b:with value='data:post.date.year - (data:nennhajime[data:genngouidx] - data:nennhajime[data:genngouidx] % 10000) / 10000 + 1' var='postdateyear'><b:if cond='(data:postdateyear % 100) > 9'><b:eval expr='data:kansuujijuu[((data:postdateyear - (data:postdateyear % 10)) / 10) % 10]'/></b:if><b:if cond='data:postdateyear < 9 or (data:postdateyear % 10) > 0'><b:eval expr='data:postdateyear == 1 ? "元" : data:kansuujiichi[data:postdateyear % 10]'/></b:if></b:with>年</b:if></b:loop><b:eval expr='data:tsuki[data:post.date.month - 1]'/><b:if cond='data:post.date.day > 9'><b:eval expr='data:kansuujijuu[(data:post.date.day - (data:post.date.day % 10)) / 10]'/></b:if><b:if cond='data:post.date.day < 9 or (data:post.date.day % 10) > 0'><b:eval expr='data:kansuujiichi[data:post.date.day % 10]'/></b:if>日（<b:eval expr='data:syuu[data:post.date.dayOfWeek]'/>）<b:if cond='data:postdatehour > 9'><b:eval expr='data:kansuujijuu[((data:postdatehour - (data:postdatehour % 10)) / 10) % 10]'/></b:if><b:if cond='data:postdatehour < 9 or (data:postdatehour % 10) > 0'><b:eval expr='data:kansuujiichi[data:postdatehour % 10]'/></b:if>時<b:if cond='data:postdateminute > 9'><b:eval expr='data:kansuujijuu[((data:postdateminute - (data:postdateminute % 10)) / 10) % 10]'/></b:if><b:if cond='data:postdateminute < 9 or (data:postdateminute % 10) > 0'><b:eval expr='data:kansuujiichi[data:postdateminute % 10]'/></b:if>分
</b:with>
</b:with>
</b:with>
</b:with>
</b:with>
</b:with>平成３０年１２月２４日（月） ２０：００
上記のものを全角アラビア数字を使って書き直してみました。こっちのほうが親しみが湧きますね。元号についての詳細は一つ前の説明を参照してください。
この元号表示をうまく使えば「わたし歴３１年」とか、「中学時代２年」とか「結婚歴元年」のように個性的なブログも作れるかもしれません。
<b:with value='["","月","火","水","木","金","土","日"]' var='syuu'>
<b:with value='["０","１","２","３","４","５","６","７","８","９"]' var='suuji'>
<b:with value='[19261225,19890108,20190501,99999999]' var='nennhajime'>
<b:with value='["昭和","平成","平成の後"]' var='genngou'>
<b:loop index='genngouidx' values='data:genngou' var='genngou'><b:if cond='((data:post.date.year * 10000 + data:post.date.month * 100 + data:post.date.day) >= data:nennhajime[data:genngouidx]) and ((data:post.date.year * 10000 + data:post.date.month * 100 + data:post.date.day) < data:nennhajime[data:genngouidx+1])'><b:eval expr='data:genngou'/><b:with value='data:post.date.year - (data:nennhajime[data:genngouidx] - data:nennhajime[data:genngouidx] % 10000) / 10000 + 1' var='postdateyear'><b:if cond='data:postdateyear > 9'><b:eval expr='data:suuji[((data:postdateyear - (data:postdateyear % 10)) / 10) % 10]'/></b:if><b:eval expr='data:postdateyear == 1 ? "元" : data:suuji[data:postdateyear % 10]'/></b:with></b:if></b:loop>年<b:if cond='data:post.date.month > 9'><b:eval expr='data:suuji[(data:post.date.month - (data:post.date.month % 10)) / 10]'/></b:if><b:eval expr='data:suuji[data:post.date.month % 10]'/>月<b:if cond='data:post.date.day > 9'><b:eval expr='data:suuji[(data:post.date.day - (data:post.date.day % 10)) / 10]'/></b:if><b:eval expr='data:suuji[data:post.date.day % 10]'/>日（<b:eval expr='data:syuu[data:post.date.dayOfWeek]'/>）　<b:if cond='data:postdatehour > 9'><b:eval expr='data:suuji[((data:postdatehour - (data:postdatehour % 10)) / 10) % 10]'/></b:if><b:eval expr='data:suuji[data:postdatehour % 10]'/>時<b:if cond='data:postdateminute > 9'><b:eval expr='data:suuji[((data:postdateminute - (data:postdateminute % 10)) / 10) % 10]'/></b:if><b:eval expr='data:suuji[data:postdateminute % 10]'/>分
</b:with>
</b:with>
</b:with>
</b:with>まとめ
Blogger のテーマを書き換えて投稿日時を変える方法を紹介しました。また、複雑な処理を必要とするいくつかの形式も併せて紹介しました。これらを組み合わせていけば、さらに面白い形式もできるかも知れません。
特に元号や漢数字のあたりはかなり頑張ったので、和風なブログを作る際の助けになれば嬉しいです！
それでは！
0 件のコメント :
コメントを投稿