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

空を見るのが好きな、アラフォーシングルマザーの子育て雑記ブログです。

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

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

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」用に黒枠に白い文字になっています。

変更後はこちら🔻

ブログの最終更新日を表示できるようにしたカスタマイズのイラスト
黒枠をはずして、文字を青に変えました。

コードだとこちら(変更前)🔻
※つばささんの記事より上から9行目まで引用

.lastmod {
color: #f0f0f0;
background-color: #111;
padding: 5px 6px;
text-decoration: none;
font-size: 90%;
display: inline;
margin-left: 10px;
}

 
コードだとこちら(変更後)🔻
/* 最終更新日を自動で入れる */
.lastmod {
color: #2792c3;
padding: 5px 6px;
text-decoration: none;
font-size: 90%;
display: inline;
margin-left: 10px;
}

カラーコードの変更と「background-color: #111;」を消しただけです。

よーーく見ると、青い文字が、投稿日時と最終更新日とで、色が違います(汗)
すみません、色のコードが突き止められませんでした(涙)

パッと見て、たぶんわからないと思うので、まあ・・・いいかな・・・
ズボラな性格がバレバレです。

記事を投稿した時点では、投稿日と最終更新日は同じ日付が表示されます。

最後に

今回もブログの先輩方に助けていただいて、無事に最終更新日を、表示できるようになりました。
本当にありがとうございます。

それなのに、過去記事のリライト・・・なかなか進まないですね。
ホントに子どもの夏休みのせいだけなのか、私に怠け癖がついたのか・・・
毎日更新していた6月が、どうやっていたのか思い出せない😱😱😱

でも全国の夏休み中のお子さんをお持ちの、お父さん、お母さん、あともうちょっとです。
残り10日をきりました!!

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

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

追記

早速追記です(汗)

素人なので、関係しているかわからないのですが、デザインCSSに追加する際、一番最後にコードを追加したときは、表示されませんでした。

カスタマイズで、たくさん入っているCSSファイルの、上の方に追加すると表示されました。

たとえば、私のCSSファイルには

1、タイトル画像調整
2、ブログタイトル下のスペース調整
3、ページトップへ戻るボタン
4、グローバルメニュー
5、トグルメニュー
6、一覧表からはてなスターを非表示
7、フォントの大きさ
8、画像を上からトリミング



19、ブログの幅を固定・モバイル用


といった具合に、いろいろ入っているのですが、この場合だと、最後の20番目にコードをいれても、表示されませんでした。

今回は、5番目のトグルメニューの下に、最終更新日を表示するコードを入れたら、正しく表示されました。

今回の他でも、複雑なコード(私からすると長いコード)は、最後に追加してもうまく表示されない事は、何度かありました。

CSSファイルの上の方に入れると、希望通りに表示されることが多かったです。

私は素人なので、これが関係しているかは、わからないですが、こういった事もあったので追記することにしました。

どなたかのお役に立てれば嬉しいです。

 

広告