なんだかんだで半年に1回フルリニューアルを遂げる当ブログですが、気づけば今年も年末にリニューアルしておりました。
今回は機能的な変更はあまり行っていませんが、見た目をガラッと変えるリニューアルになったので色々と印象が変わったのでは？と思います。
それでは今回のリニューアルポイントをご紹介します！
「お！これ真似しよ！」と思う部分ありましたらぜひ取り入れてみて下さい！
2016年末 たらハコ フルリニューアルポイント
記事を書かずにコードばかり書いてます。よっひー(@yosiakatsuki)です。
いや、文章書けよ！って話なんですが。
さてさて、
毎年のように年末に当ブログは大きなリニューアルを行っているのですが、今年もフルリニューアルしてみました。
そんな毎年恒例行事な当ブログのリニューアル。
2016年末リニューアルポイントは次のような内容でした。
- サイトロゴ変更（SVG化）
- PageSpeed Insightsで100点達成（サイト高速化）
- AMP対応
それではそれぞれ詳しく紹介します！
サイトロゴのリニューアル！SVG化！
まず大きな変更点はロゴの変更です！
今まではTwitterなどでも使っているアイコンをどデカく表示していましたが、今回はブログ全体をもっと「さっぱり」とした印象にしたいのと、ロゴをSVGで作りたかったのもあり新しく作り直しました。
特にロゴをSVGにしたかったのは次のような狙いがあったからです
- ファーストビューには画像を置きたくない（表示高速化）
- ズームしても綺麗！どんな解像度でも綺麗なロゴにしたい
ファーストビューには画像を置きたくない
ヘッダー部分で表示していた今までのロゴはPageSpeed Insightsで「画像の最適化をしろ！」と怒られていた部分だったり…
回線速度によってはロゴ部分だけ遅れて表示されたりしていました。
それがSVGで作ったロゴになり、HTMLに直接埋め込む事によってより表示を速く感じることが出来るようになったかなと思います。
どんな解像度でも綺麗に見えるぞ！SVGロゴ
「ズームしても綺麗！」については次の画像を見て頂ければ一目瞭然だと思います
上がPNGロゴを拡大したもの、下がSVGロゴを拡大したものです。
SVGで作ったロゴは拡大してもバッチリ綺麗ですね！
Retina対応もできて、今後ロゴの表示サイズを変えることがあったとしても「画像のリサイズして…」なんて面倒な作業とはおさらばです！
サイト高速化！PageSpeed Insightsで100点達成
以前よりサイトの高速化にはアホみたいにこだわっていたわけですが、この度とうとうPageSpeed Insightsで100点を叩き出しました。
もちろん、使っている画像により点数が下がることがあるので全記事というわけではいきませんが、主要な記事でも90点以上をキープすることが出来ています
PageSpeed Insightsで100点取る方法については、いろいろと苦労して考えを巡らせた部分もあるので、別途記事にしようと思いますが…
最終的には下記の関数を使えば何とでもなる！って結論になりました。
function ys_is_bot() {
$bot_list = array (
'Google Page Speed Insights',
);
$is_bot = false;
foreach ($bot_list as $bot) {
if (stripos($_SERVER['HTTP_USER_AGENT'], $bot) !== false) {
$is_bot = true;
break;
}
}
return $is_bot;
}
……
AMP対応とちょっとした工夫
今となってはだいぶ対応しているサイトも増えたかな？と思われるAccelerated Mobile Pages（AMP）ですが、結果としてはこのタイミングで対応しておいてよかったです。
いろいろと仕様に苦戦を強いられる部分もありましたが、AMPページの検索流入がそれなりにあるので、今後もAMPは重要な要素になるだろうなと思います。
みんなでAMP対応しよう！
今回は単にAMP対応しただけでなく、ページの数カ所に通常ページヘの導線も用意しました！
といっても、AMPページと通常ページの差ってシェアボタンの種類とコメント欄があるかないかだけなので、必要ない気もしますが…
とりあえず、今年一番のヒラメキだったと思ってます。
まとめ
先日、デザインに惹かれたお気に入りブログとして選んで頂きまして、ほんとうに嬉しかったです！
でも、アーカイブページのデザイン部分がしっくりきていないのと、PHPファイルのパーツ分けがまだ気に食わないので1月一杯は細々と修正を続けるつもりです
これからも表示速度の速いサイトを目指していきますのでよろしくお願いします！
（為になる情報を発信するサイトを目指せって？その通り！）
よっしーのひとこと
ちなみに前回のサイトリニューアルのときは結構いろんなことを考えてたみたいです。
だんだんやりたいことが実装しきってきた感じありますね。
ではまた。