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




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

追記:2017年10月23日

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

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


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

コードをコピペする

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

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;

でも大丈夫でした。


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

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



NHkで紹介されました。

0 件のコメント :

コメントを書く