今年の4月に
で書いたように、このブログのスマートフォン向けのページを一部カスタマイズしましたが、その後、はてなブログ側で機能追加・改良が何度か施されて、よりいい感じになっていました。
それは突然やってきた
が、しかし！昨日(6/26)、ふと iPhone で自分のブログを見てみたら、カスタマイズしたはずのレイアウトがぶっ飛んで blockquote などの表示方法が変わっていたりと、激変していました (ﾟдﾟ)！
あわてて Safari でユーザーエージェントを iPhone に切り替えてソースを見てみると、HTMLの構造からCSSまでガラッと変わってしまっていて、例の CSS セレクタに.entry-listをつけて区別する方法が使えなくなっていました。はてなブログ開発ブログを見ても何も書いてないし、Twitter でメンションを送っても反応がありません。
新スマートフォン版HTMLをPC版と比較してみる
しょうがないので、PC版とスマートフォン版のソースを比較してみると…ありました！スマートフォン版でしか使われていない id が body 要素に。
ファイル比較ソフトは Windows では WinMerge が有名ですが、Mac では P4Merge を使っています。
というわけで、「詳細設定ページ」の「headに要素を追加」欄に、次のように頭に #body をつけたスタイルを流し込みました。
「詳細設定ページ」の「headに要素を追加」欄はシンタックスハイライトされないので、別のコードエディタ等で編集してコピペするのが楽です。普段は専ら Adobe の Brackets を使っています。
ひとまず完成
その結果、こうなりました。
| はてなブログ標準 | カスタマイズ後 |
|---|---|
|
|
今回、CSSを変更したついでに、タイトル部をPC版と同様にグレーの背景にし、タイトル下のバナー画像代わりに、アクセントとして Google AdSence の画像広告を表示させてみました。（※はてなブログPro版のみの機能）
ほぼ半数はモバイル端末からのアクセス
このブログの日々のアクセス統計を見てみると、現在すでにほぼ半分が iOS または Android で、残りの半分が Windows と MacOS その他諸々という状況です。パソコンで Web サイトを見るという時代はもう過去のもので、今後はPC版よりもスマートフォン向けのページ構成やデザインに力を入れたほうがよいのでしょう。
現状では既存のブログテーマをカスタマイズして使っている状態ですが、最近のはてなブログの新機能の傾向からみると、端末や画面サイズに合わせて情報の表示方法をダイナミックに変化させる「レスポンシブデザイン」に移行できるように、すでに準備が整ってきています。
どこかのタイミングで「レスポンシブデザイン化」に挑戦してみたいと思います。
