過ぎし子育ての日々はほぼ笑い話

放っておきたいのに、放っておけない。憎たらしいのに何よりも大切。他人の子のしぐさはほほ笑ましいのに、わが子はハラハラ。まだまだ子育て真っ最中。その場は怒って泣いてと激しいですが、振り返れば笑い話。心配性なアラフォーシングルマザーが子供たちと格闘する日々をつづった雑記ブログです。あと、趣味のイラストを少々。

過去記事のリライトをはじめ、最終更新日を表示できるように、カスタマイズを行いました

以前、過去記事のリライトは、過去のイラストを公開するより恥ずかしい!と言った記事を、書きました。
その記事はこちら🔻

www.hobowarai.com

 

過去記事のリライトにあたり、以前から更新日時を、表示したいと思っていました。

特に、検索で来てくださった方に向けては、ここは重要だと思います。
私も検索する時は、その記事が、いつごろ書かれたものなのか、チェックします。

という事で、今回もブログの先輩方のお力をかりて、最終更新日を表示できるように、カスタマイズしました。

でもコードが長くてね、ずっと先延ばしにしていた事なんです💦

よくよく読むと、本当に簡単で、ただの面倒くさがりなだけでした(汗)

ブログの最終更新日を表示できるようにしたカスタマイズのイラスト

 

広告

カスタマイズ前に、注意する点はAMPの設定

AMP(アンプ)は、ご存知ですか?
私は今回、初めて知りました。

ものすごく簡単に言うと、AMPとは、Accelerated Mobile Pagesの略称で、スマホ用のページの表示速度が、とても速くなる設定の事です。
はてなブログProじゃないと、設定できません。

ただ、アドセンス広告やCSSなどの設定が、AMP用に作られたものじゃないと使えなかったりするようで、ブログのデザインも大変シンプルなものになります。

スマホ用に、デザインは捨てて、とにかく速く表示させましょう』という設定です。

ちなみに私は、スマホの表示速度が速くなるのは大変魅力的ですが、いまだに踏み切れずにいます。

AMPへの変更設定は簡単ですが、変更後にわけあって戻す際は、時間がかかるような記事も読みましたので、慎重になってしまいます。

なぜここで、AMPの設定の話になったかと申しますと、最終更新日を表示する方法には、サイトマップを利用した設定方法と、AMPの機能を活かした設定方法があるようです。

今回更新履歴を表示するカスタマイズでお世話になった
つばささんの記事はこちら🔻

basanote.hatenablog.com

 

なんと、サイトマップを使った方法と、AMPを使った方法の2種類を載せてくださっています。
ありがとうございます!!

追記がありますので、実装される場合は、追記とアップデートの記事も、お読みになってから進めてください。

最終更新日を表示するカスタマイズを実装

私はAMP設定をしていないので、サイトマップを利用した方法の、カスタマイズを実装しました。

まずはJavaScriptのコードをダッシュボードから、デザイン→スパナマーク→記事の順で進み、記事上下カスタマイズの上が空いていたので追加しました。

1カ所コードに、ご自分のサイトのURL+サイトマップを入れる場所があります。

JavaScriptを追加しただけだとこういった感じです

ブログの最終更新日を表示できるようにしたカスタマイズのイラスト

 

次にCSSのコードを、外部CSSのファイルに追加します。

私は外部CSSを直リンクしてカスタマイズしていますが、通常なら、デザインCSSのボックスに追加すれば大丈夫です。

レシポンシブ対応のテーマを使っているので、実装の手順は以上の2点だけです。

スマホ用のCSSコードが必要な方や、実装してみたけど、アイコンが表示されない方は、それぞれつばささんの記事を読んでコードを追加してください。

 

大変便利な、外部CSSファイルの直リンクでお世話になった、はるなぴさんの記事はこちら🔻

www.halu7.com

広告

当ブログのテーマ「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日をきりました!!

あ、でも夏休みの自由研究のまとめがまだ終わっていなかった(涙)

本日も最後まで読んでいただき、ありがとうございました。

 

広告