はてなブログは、比較的カスタマイズの自由度が高く、独自のCSSを追加してデザインを変更することができます。
しかし、当初はスマートフォン用のページのCSSを編集することができず、どのブログも同じ見た目で表示されていました。
今年の2月の新機能で<head>要素内をカスタマイズできるようになっていた
ところがふと調べてみたら、2014年2月19日から新機能として、ブログの <head> 要素がカスタマイズできるようになり、PC版とスマートフォン版の両方に適用されるとのこと！
- ブログのhead部分にmetaタグなどを自由に追加できるようにしました - はてなブログ開発ブログ 「詳細設定ページに新たに追加した「headに要素を追加」欄で、head要素に追加するHTMLやスクリプトを自由に記述できます。
設定した内容は、PC版およびスマートフォン版のブログページでhead要素に追加されます。」
そこで、早速スマートフォン版の見た目をPC版の見た目に近い感じにカスタマイズしてみました。
スマートフォン用のCSSを編集
この<head> 要素の設定入力フォームエリアは、通常のデザインCSSカスタマイズ画面のようにシンタックスハイライトされないので、いつもの Brackets で編集しました。
Safari の「開発」メニューの「ユーザーエージェント」を「iPhone」にして、Webインスペクタでクラスを調べて表示を確認しながらカスタマイズしていきました。こういう時は Safari 便利ですねー。
今回は「手っ取り早く」ということで、はてなブログのスマートフォン版はコンテンツが
<ul class="entry-list">
以下に含まれる、という先達の知恵(＊)を利用して、CSS セレクタの頭に.entry-listをつけて PC 版のCSSと区別しました。
追記(2014.6.27)
CSS セレクタの頭に.entry-listをつける方法が使えなくなってしまいました。代替策を次の記事に書きましたので、こちらを参照ください。
そして流し込む
今回、CSSに加えて今まで、<body> のカスタマイズエリアにいた、Google Fonts 読み込み用のコードもいっしょにして流し込みました。
その結果…
Before After 
無事、タイトルや本文のフォントが PC 版と同じ Google Fonts の Gruppo, Monda, Cantarell になり、画像・枠線の角丸なども適用されて、ちょっと雰囲気がよくなりました(^o^)/
他に、ページ下部の Zenback の部分も少しいじっています。
iPhone 5(iOS7) 以外では確認していないので、Android でどう表示されているのか、気になるところではあります。
あとは、ブログのアイコンを作らなきゃといったところでしょうか。とりあえず。
