ブログを少しリニューアル（ver3.0）
2012年11月08日- WordPress
スマートフォンでも閲覧しやすいように少しリニューアルしました。
CSS3のメディアクエリを使って、閲覧している画面サイズによってレイアウトを変えています。
主な変更点
画像の使用を減らす
PCで表示している画像をそのままスマートフォンで見るとぼやっとしていて汚い。
ページの容量を削減するためにも画像の使用はなるべく減らす方向に。
まず、サイトロゴ（Stylish Fool）をGoogle Web Fontsから読み込んだフォントを使いました。
スマートフォンだと綺麗に見えるけど、PCから見るとChromeでテキストの表示が少し汚いのが気になる。
それに加えてグローバルナビゲーションもアイコン画像以外はテキストに変更。
jQueryのライブラリをGoogleのCDNサービスで読み込む
jQueryのライブラリは自分のサーバーに置いたものを読み込んでいました。
が、お問い合わせに使っているWordPressのプラグイン「Contact Form 7」でもjQueryを読み込んでいたのに気づかず、jQueryを2回読み込んでいました。
ライブラリを多重で読み込むのを防ぎ、さらにCDNでjQueryを読み込むようにWordPressのテンプレートを修正しました。
// header.php 「head」閉じタグの前を以下のようにする
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', array(), '1.8.2');
wp_head();
?>
</head>
GoogleのCDNサービスはマイナーバージョンまで指定するとキャッシュされる期間が長くなるみたいです。
参考リンク
残された問題
1に画像。2に画像。
PC用のサイズが大きい画像をスマートフォンでもそのまま読み込んでいるので、スマートフォン専用サイトと比べてパフォーマンスは落ちています。
この問題に対しての上手い解決法は今のところ見付けられてません。
このブログはページの要素が少ないので、記事本文に画像を多く使わなければそれほど重くならないはず。
それで良いんだろうか。
