以前、過去記事のリライトは、過去のイラストを公開するより恥ずかしい！と言った記事を、書きました。
その記事はこちら🔻
過去記事のリライトにあたり、以前から更新日時を、表示したいと思っていました。
特に、検索で来てくださった方に向けては、ここは重要だと思います。
私も検索する時は、その記事が、いつごろ書かれたものなのか、チェックします。
という事で、今回もブログの先輩方のお力をかりて、最終更新日を表示できるように、カスタマイズしました。
でもコードが長くてね、ずっと先延ばしにしていた事なんです💦
よくよく読むと、本当に簡単で、ただの面倒くさがりなだけでした（汗）
広告
カスタマイズ前に、注意する点はAMPの設定
AMP（アンプ）は、ご存知ですか？
私は今回、初めて知りました。
ものすごく簡単に言うと、AMPとは、Accelerated Mobile Pagesの略称で、スマホ用のページの表示速度が、とても速くなる設定の事です。
はてなブログProじゃないと、設定できません。
ただ、アドセンス広告やCSSなどの設定が、AMP用に作られたものじゃないと使えなかったりするようで、ブログのデザインも大変シンプルなものになります。
『スマホ用に、デザインは捨てて、とにかく速く表示させましょう』という設定です。
ちなみに私は、スマホの表示速度が速くなるのは大変魅力的ですが、いまだに踏み切れずにいます。
AMPへの変更設定は簡単ですが、変更後にわけあって戻す際は、時間がかかるような記事も読みましたので、慎重になってしまいます。
なぜここで、AMPの設定の話になったかと申しますと、最終更新日を表示する方法には、サイトマップを利用した設定方法と、AMPの機能を活かした設定方法があるようです。
今回更新履歴を表示するカスタマイズでお世話になった
つばささんの記事はこちら🔻
なんと、サイトマップを使った方法と、AMPを使った方法の2種類を載せてくださっています。
ありがとうございます！！
追記がありますので、実装される場合は、追記とアップデートの記事も、お読みになってから進めてください。
最終更新日を表示するカスタマイズを実装
私はAMP設定をしていないので、サイトマップを利用した方法の、カスタマイズを実装しました。
まずはJavaScriptのコードをダッシュボードから、デザイン→スパナマーク→記事の順で進み、記事上下カスタマイズの上が空いていたので追加しました。
1カ所コードに、ご自分のサイトのURL+サイトマップを入れる場所があります。
JavaScriptを追加しただけだとこういった感じです
私は外部CSSを直リンクしてカスタマイズしていますが、通常なら、デザインCSSのボックスに追加すれば大丈夫です。
レシポンシブ対応のテーマを使っているので、実装の手順は以上の2点だけです。
スマホ用のCSSコードが必要な方や、実装してみたけど、アイコンが表示されない方は、それぞれつばささんの記事を読んでコードを追加してください。
大変便利な、外部CSSファイルの直リンクでお世話になった、はるなぴさんの記事はこちら🔻
広告
当ブログのテーマ「Thumnail2」用にコードを一部変更
CSSのコードが、つばささんが使っている「Brooklyn」というテーマに合わせてあるそうなので、当ブログのテーマ「Thumnail2」に合うように一部を変更させていただきました。
変更前はこちら
「Brooklyn」用に黒枠に白い文字になっています。
変更後はこちら
黒枠をはずして、文字を青に変えました。
コードだとこちら
.lastmod {
color: #2792c3;
padding: 5px 6px;
text-decoration: none;
font-size: 90%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}
カラーコードの変更と「background-color: #111;」を消しただけです。
よーーく見ると、青い文字が、投稿日時と最終更新日とで、色が違います（汗）
すみません、色のコードが突き止められませんでした（涙）
パッと見て、たぶんわからないと思うので、まあ・・・いいかな・・・
ズボラな性格がバレバレです。
記事を投稿した時点では、投稿日と最終更新日は同じ日付が表示されます。
最後に
今回もブログの先輩方に助けていただいて、無事に最終更新日を、表示できるようになりました。
本当にありがとうございます。
それなのに、過去記事のリライト・・・なかなか進まないですね。
ホントに子どもの夏休みのせいだけなのか、私に怠け癖がついたのか・・・
毎日更新していた6月が、どうやっていたのか思い出せない😱😱😱
でも全国の夏休み中のお子さんをお持ちの、お父さん、お母さん、あともうちょっとです。
残り10日をきりました！！
あ、でも夏休みの自由研究のまとめがまだ終わっていなかった（涙）
本日も最後まで読んでいただき、ありがとうございました。
広告