はてなブログのテーマ「ZENO-TEAL」で更新日を表示する方法

f:id:mameco98:20190327011208p:plain



Google検索などでブログに行きついた際、「ム…このブログは2年前に書かれたものかぁ」と思うと、なんとなく、古いなぁと感じますよね。

でも本当はリライトしていて、更新日は昨日!なんてことも。

もし更新日を自動で出せていたら、来てくださった方に「これは最新の情報だから安心してくださいよ~」とお伝え出来たのに…。

 実はわたしもちょこちょこリライトしていて、更新日を出したかったのでさっそくトライ。

今の時代、検索して他サイト様の素晴らしいコードをコピペすれば一発~!なんて、かるーく見ていました。結果、3時間くらい格闘することに…。

はてなブログの神テーマ「ZENO-TEAL」をご使用の方はぜひご覧くださいっ!

 

はてなブログの神テーマ「ZENO-TEAL」

このブログでも使用させていただいてます、超かっこいいテーマ。トップページがカード型になっていて今っぽくてオシャレ!

わたしがはてなブログproにしたのも、このZENO-TEALテーマを使いたかったからであります。

 

 

ロゴが2つ表示されちゃう

JSとかCSSとかヨクワカラナイわたくしですので、他サイト様にて更新日を表示するコードをコピペしました。

そうすると、あれれっ!?ロゴが2つ出る!?

 

f:id:mameco98:20190327010639p:plain

 

ええ~~なんで!?!? ここから格闘が始まったのであります。

テーマのCSSに組んであるっぽい

chromeのデベロッパーツール(「F12」キー押下で出てきます)で要素を確認すると、そもそもテーマ自体に「記事投稿日の前に時計マークを表示する」というCSSが組まれていそうでした。

なので、

  1. この時計マークを活かす
  2. 時計マークをカレンダーマークに変更する

のどちらかの方法で、ロゴを1つにします。

 

このコードを入れよう

共通

 設定>詳細設定>検索エンジン最適化>headに要素を追加 に以下のコードをコピペします。

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->

次に、デザイン>記事>記事下 にコードをコピペします。

私はつばさノート様のコードを拝借しました。

更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください | つばさのーと

設定>詳細設定>AMP にチェックを入れている方はAMP版、それ以外の方はサイトマップ版をコピペされると良いと思います。

 

CSS

以下のCSSを、デザイン>カスタマイズ>CSS にコピペしてください。

時計アイコンを使う場合

/*↓----更新日時表示----↓*/

.lastmod {
 background-color: transparent; 
 padding: 5px 0px;
 text-decoration: none;
 font-size: 15px;
 display: inline;
 margin-left: 0px;
 font-family: 'Montserrat', sans-serif; color: #888888;
}

.lastmod::before {
 margin-right: 5px;
 margin-left: 10px;
 padding-left: 3px;
 font-family: "Font Awesome 5 Free"; font-weight: bold;
 content: '\f01e';
}

.entry-date  a{
 background-color: transparent;
 padding: 5px 0px 5px 6px;
 text-decoration: none;
 font-size: 15px;
 display: inline;
}

 /*↑----更新日時表示----↑*/

 

カレンダーアイコンを使う場合

/*↓----更新日時表示----↓*/

.lastmod {
 background-color: transparent;
 padding: 5px 0px;
 text-decoration: none;
 font-size: 15px;
 display: inline;
 margin-left: 0px;
 font-family: 'Montserrat', sans-serif; color: #888888;
}

.lastmod::before {
 margin-right: 5px;
 margin-left: 10px;
 padding-left: 3px;
 font-family: "Font Awesome 5 Free";
 font-weight: bold;
 content: '\f01e';
}

.entry-date  a{
 background-color: transparent;
 padding: 5px 0px 5px 6px;
 text-decoration: none;
 font-size: 15px;
 display: inline;
}

.entry-date:before {
 font-family: "Font Awesome 5 Free";
 content: '\f073';
}    

/*↑----更新日時表示----↑*/

こちらのCSSを入れてもらうと…

f:id:mameco98:20190328221848p:plain

できましたーっ!

 

参考サイト様

こちらのサイト様を拝見してJS、CSSの設定をしました。本当にどうもありがとうございました。

にほんブログ村 子育てブログ ワーキングマザー育児へ  にほんブログ村 子育てブログ 2017年4月~18年3月生まれの子へ