ブログいぢりは楽しい

hatenaロゴ

ここ数日は、ブログも書かずに、ひたすらブログをカスタマイズしていました。

デザインテーマMinimalismのCSSとそれをカスタマイズしてテーマ化したCSSをブログのhead部分に記述し、テーマ化したCSSにブログをふわっと表示するCSSを追加しました。

(デザイン→カスタマイズ→デザインCSSにコードを入力)

CSS
#container {
    animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

参考になるブログ・Webサイト
q-Az - CSS だけで Web ページのフェードイン表示を実装する方法

さらに、はてなブログのjQueryとはてなキーワードを消すブログカードの遅延読み込みページトップへ戻るのスクリプトとCSS、強調表示を蛍光ペン風にするCSS(雲の向こうはいつも青空 - はてなブログでマーカーラインの装飾をする方法)をスクリプトとCSSでそれぞれひとまとめにしてフッタに記述しました。

そして、ブログの高速化(軽量化)のために、すべての画像をTinyPNGで圧縮し、差し替えました(CSSとJavaScrtiptはメンテナンスが大変なので圧縮はしない)。

PageSpeed Insightsでこのブログのトップページの読込み速度を計測するとこんな感じ。

PageSpeed Insights

そのほか、サイドバーの検索窓をタイトルを消して最新記事の下に表示したり、まとめ記事のブログカードをWindows付属のペイントで加工して画像として表示したりしました。