Newこの世界の秘密を見つけ出すために、どんなことでもやってみて、いろんなことを考えます。つばさノートさんの公開されている更新日時を自動表示させるコードを使って、私が適用しているテンプレート「Naked」のCSSを作ってみました。NEW」の記事は2015年〜、もうすぐ1,500記事に到達します。(書きすぎ)当初のブログはそれはそれは酷い出来なのでちょこちょこリライトしているのですが、更新日時の記載を忘れたりなんだりかんだりで新しくなっている感が皆無です。WordPressでブログを書いているすごいブロガーの皆さんは「プラグイン」(何それ)とやらで更新日時が自動で表示されるようになっているのですが、はてなブログには更新日時を自動で表示する機能がありません。投稿日時を変更することはできるのですが、それはちょっと違うんだ......私が2015年に書いたクソ記事をなんとかして2018年に生きかえらそうとしていることを伝えたいわけなんですよ。いうことで「はてなブログで更新日時を自動表示させる方法」を調べて見た結果、たった一つのブログにたどり着きました。はてなブログで更新日時を自動表示させる方法つばさノートさんのカスタマイズ方法が唯一無二でしたので、こちらの記事をご覧の上、設定してみてください。3.xに変更することで無事に読み込めるようになりました。src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>になっているところを、下記のように書き換えました。src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>レスポンシブデザインを使用している方のためのアップデート版レスポンシブデザインを使用している方向けにアップデート版も公開されていましたので、新たに導入する方はこちらを参考にされた方が良いかもしれません。うまくできなければ、同様にjQueryを変更してみるといいかも......。つばさのーとzeno-tealとInnocentテンプレの方向けのCSSさらにさらに、はてなブログの2つのテンプレート「zeno-teal」とInnocent」向けのCSSも公開されていました。更新日自動表示カスタマイズのCSSの調整始めました。つばさのーとNaked向けのCSSを作ってみるしかしながら、私が使用しているテンプレートはNakedなので、これに合うCSSを作ってみたいと思います。今はこんな感じで、全然違う雰囲気になってしまっています。5月3日にブログのデザインを更新したのですが、どうやらその日付を元に更新日時表示がなされているようです。純粋にリライトに準ずるわけではないのか......。したらいいのか分からないのでとりあえずそのままにします。やりたいことフォントを統一する更新したよのマークを違うものにする位置を揃えるCSSなんてさっぱり分からないのですが、きっとNakedの元々の表示をパクってくればいいのでしょう。「要素の検証」なんかを使って。......と思ったんですが、「要素を検証」してもさっぱり分からなかったのでやり方を変えます。Innocentを参考に改変を加えてみるつばさノートさんで公開されていたInnocentのCSSを参考にします。'\f017';}CSSとかよく分かりませんが、エンジニアの人ってよく言いますよね。「プログラミングといっても言語だから」と!おそらく、lastmodが更新日時で、entry-dateが一番初めの執筆日ということなんだと思います。日付の前にある可愛いアイコンは、FontAwesomeから持ってきているコンテンツほにゃららだよ、って意味なんだと思います。みたいな「transparent」は文字だけ切り抜いて表示しているよ、的な意味みたいです。いえ、現状では入力済みのCSSが全然適用されていないような......?CSSには「下の方に書いてあるやつ」と「!important」が付いているものが優先されるという特徴があるので、まずはカスタマイズCSSの一番末尾に先ほどのコードを入力してみました。日付の前のアイコンを変えるこれでCSSが効いているのか、日付の前のアイコンを時計からカレンダーに変更してみます。contentの後に、FontAwesomeで見つけた可愛いアイコンの番号みたいなものを入れます。一応効果を発揮しているようです。フォントの大きさを揃えるでは、このフォントの大きさのずれを調節してみます。更新日時の方のフォント情報と思われるものをコピペし、font-sizeが100%ではちょっと大きい気がしたので90%に変えました。(でも仕組みがわからない!)あとはフォントが統一できればいいんだけれど......。何も考えずにぺたっと貼り付けただけだったこの箇所から、CSSが記述されているっぽいページをみてみました。date」と記述されているので、「date」で検索。すると、まさしく数字フォントに付いて触れている部分を発見!きっとここには「投稿日時の数字フォントは'Montserrat',sans-serifを指定する」的なことが書いてあるに違いありません。CSSの更新日時の末尾に、font-familyについての一行を追加してみました。フォントが揃いましたー!!フォントの大きさを揃える%で指定していたfont-sizeでは、なんとなく微妙に大きさに違いがあるように思います。ことpxで指定してみることにしました。うん、綺麗に揃ったと思う。あとはこの微妙な色の違い......。色を揃える色の情報も元のCSSのどこかにあるのかもしれませんが、探し方が分からなかったのでgooglechromeの拡張機能で色を調べて、そのまま指定してみることにしました。指定したらいけました。あとはなんていうかこう、二つの日付の距離をもう少し狭めたいところ......。10px;」を0にしてやりました。あとはpaddingの6pxをうまく調節すればいいような気がします。最大限隙間をなくしてみました。なりました!!完成したコードがこちら。'\f073';}まとめ分からないなりに頑張ったー!!なかなか表示されなかったスマホの方は、CSSの方だけしか貼り付けていなかったのが原因でした。日時を読み込むためのコードも入力し、見た目を整えて完成!できた......もはや全く別のブログのようだ......。カスタマイズしましたが、それに合わせて今後は記事のリライトも進めていこうと思います。付いている!...2017-04-02月間3万PVのブログがはてなブログproにして10日間で起きたことブログを始めて2年経ちました。Tumblr始めましたこんにちは、何にでもチャレンジを欠かさないうたこです。いいね!する最新情報をお届けします。はてなブログProグルメ、ダイエット、美容、エンタメ、DIY、リノベーション、英語学習、なんでもかんでも手を出しては飽きてしまううたこのブログです。Newスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。