【WordPressテーマ制作】ヒンポタンウェッブ リニューアル
WordPressテーマをリニューアル
デザインはほぼそのままなのですが！HimpotanWebのWordPressテーマを全面的にリニューアルしました。
これまでのテーマは2013年に作成したもので、HTML5+CSS3ではなかったのでずっと気になっていました。
デザインはあまり変わっていないのですが、実は骨組みが全く新しくなっています。
今度のはぐりぐり動きます！
PC用とタブレット用のみですが、トップページにはやや今更感も否めないパララックス（視差効果）やアニメーションを取り入れてみました。下にスクロールするとヒンポタンが下までついてきます、かわいいでしょ（ぐふ。）
スクロールアニメーションには、定番のScrollerJSを利用させていただきました。
軽さも重視しました
付箋紙デザインはcss３だけで表現
デザインにこだわると、どうしても画像ファイルが多くなってページの読み込みが遅くなります。が、HTML5+CSS3ではコードだけでいろんなことが表現できるようになりました。たとえば画像の付箋紙デザインや、投稿の見出しの背景などは画像は使わずCSSだけで表現しています。
◎CSSだけでつくる付箋紙については、リンク先で詳しく解説しています！
スピード重視の結果やいかに？
PCの結果は88/100と高評価
できあがったら早速テスト！ということでGoogleのPageSpeed-Insightsにて評価テストをしてみます。すると・・・ ご覧の通り、PCでは88/100となかなかの高評価を出すことができました。
モバイルの結果は71/100とちょい残念
だがしかし・・・モバイルではちょっと残念な71/100という結果が。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
っていうのが曲者なんですよね～。なるべくJSを使わないようにはしていますが、スライドショーは切りたくないし、head内でプラグインで読み込まれるJSとCSSは目をつぶるしかないか・・・わたしても高速化できる方法がまた見つかったら報告します。