ホームページ制作・運営

2016.05.10

【WordPressテーマ制作】ヒンポタンウェッブ リニューアル

WordPressテーマをリニューアル

デザインはほぼそのままなのですが!HimpotanWebのWordPressテーマを全面的にリニューアルしました。
これまでのテーマは2013年に作成したもので、HTML5+CSS3ではなかったのでずっと気になっていました。
デザインはあまり変わっていないのですが、実は骨組みが全く新しくなっています。

今度のはぐりぐり動きます!

PC用とタブレット用のみですが、トップページにはやや今更感も否めないパララックス(視差効果)やアニメーションを取り入れてみました。下にスクロールするとヒンポタンが下までついてきます、かわいいでしょ(ぐふ。)
スクロールアニメーションには、定番のScrollerJSを利用させていただきました。

軽さも重視しました

CSS3で作る付箋紙

付箋紙デザインはcss3だけで表現

デザインにこだわると、どうしても画像ファイルが多くなってページの読み込みが遅くなります。が、HTML5+CSS3ではコードだけでいろんなことが表現できるようになりました。たとえば画像の付箋紙デザインや、投稿の見出しの背景などは画像は使わずCSSだけで表現しています。

CSSだけでつくる付箋紙については、リンク先で詳しく解説しています!


スピード重視の結果やいかに?

PageSpeed-Insights-PC20160517

PCの結果は88/100と高評価

できあがったら早速テスト!ということでGoogleのPageSpeed-Insightsにて評価テストをしてみます。すると・・・ ご覧の通り、PCでは88/100となかなかの高評価を出すことができました。


PageSpeed-Insights20160516

モバイルの結果は71/100とちょい残念

だがしかし・・・モバイルではちょっと残念な71/100という結果が。

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

っていうのが曲者なんですよね~。なるべくJSを使わないようにはしていますが、スライドショーは切りたくないし、head内でプラグインで読み込まれるJSとCSSは目をつぶるしかないか・・・わたしても高速化できる方法がまた見つかったら報告します。


関連記事

LINE STAMPLine Stamp

樋口こたつ&ミノムシのラインスタンプ、絶賛販売中です❤ スタンプキャラによる漫画もpixivにて超不定期連載中!!お暇なお嬢ちゃんお坊ちゃん方は是非お立ち寄りくださいッ

スライドショー内のスタンプをクリックすると、LINEストア内のスタンプページにジャンプします。