[Blogger]Vaster2に最終更新日を設置する[ズレない]-すたすた式

Vaster2に最終更新日を設置したら、スマホで表示がずれたので対策をしました。自分の環境だけかもしれませんが、お役に立てれば。

時系列がはっきりしませんが、日付の前に「公開日」の文字や、最終更新日の文字の前にfontawesomeのリフレッシュマークを追加したことにより、1行の文字数・量が多くなり横幅が足なくなったのがズレの原因のようです。（盛り込みすぎたようです……）

iphone5 / iphone5s のサイズで発生しました。

初期状態で使用していれば参考サイトに書いてある位置で問題ありません。追記おわり

コードをコピペする

Bloggerの最終更新日設置に関しては、こちらのサイトのコードをありがたく使わせてもらいます。

こちらのサイトはありがたいことに、Vaster2の時にどこの場所にコードを設置すればいいのかが書いてあります。

スクリーンショット

はじめ、これに沿って設置したところ、PCの表示は問題ないのですが、スマホの表示が崩れてしまいました。

このスクリーンショットでいうと、19行目の </b:if> と20行目の </span> の間に挿入すれば崩れませんでした。

スクリーンショット

これでOKです。

この場所だとCSSの<span class='post-timestamp'>が効くので投稿した日付と同じ修飾になります。

<span id='last-modified'>を<span id='last-modified' style='margin-left:4px;'>などにすれば、投稿の日付と最終更新日の文字の間に空間ができますが、広げすぎるとズレてしまいます。

これは好みですが、表示を2017/08/03のようにそろえようと思います。

まずBloggerの設定==>言語と形式から日付ヘッダーフォーマットのところで（今日が2017年8月3日の場合）2017/08/03の表示にかえ、右上の設定の保存をクリック。

次に今回張り付けたコードの

"最終更新日:"+ dd_Y+"年"+dd_M+"月"+dd_D+"日";

の部分の年と月を / にかえて、日は削除します。

"最終更新日:"+ dd_Y+"/"+dd_M+"/"+dd_D+"";

または

"最終更新日:"+ dd_Y+"/"+dd_M+"/"+dd_D;

でも大丈夫でした。

以上、お役に立てれば！！

追記：２

<data:post.lastUpdatedISO8601/>をつかって更新日を取得・表示させようとするサイト（英語）を見つけました。参考までに。
Show last updated date in Blogger posts · One Transistor