読者です 読者をやめる 読者になる 読者になる

white croquis

日々の思索のためのクロッキー帳。オーディオやオススメなども。

はてなブログのスマホ版ページをカスタマイズしてみた

はてなブログは、比較的カスタマイズの自由度が高く、独自のCSSを追加してデザインを変更することができます。

しかし、当初はスマートフォン用のページのCSSを編集することができず、どのブログも同じ見た目で表示されていました。

今年の2月の新機能で<head>要素内をカスタマイズできるようになっていた

ところがふと調べてみたら、2014年2月19日から新機能として、ブログの <head> 要素がカスタマイズできるようになり、PC版とスマートフォン版の両方に適用されるとのこと!

そこで、早速スマートフォン版の見た目をPC版の見た目に近い感じにカスタマイズしてみました。

スマートフォン用のCSSを編集

この<head> 要素の設定入力フォームエリアは、通常のデザインCSSカスタマイズ画面のようにシンタックスハイライトされないので、いつもの Brackets で編集しました。

Safari の「開発」メニューの「ユーザーエージェント」を「iPhone」にして、Webインスペクタでクラスを調べて表示を確認しながらカスタマイズしていきました。こういう時は Safari 便利ですねー。

今回は「手っ取り早く」ということで、はてなブログスマートフォン版はコンテンツが

<ul class="entry-list">

以下に含まれる、という先達の知恵(*)を利用して、CSS セレクタの頭に.entry-listをつけて PC 版のCSSと区別しました。

*:はてなブログ: スマホ表示のときだけ適用するCSSを書く - アジョブジ星通信

追記(2014.6.27)

CSS セレクタの頭に.entry-listをつける方法が使えなくなってしまいました。代替策を次の記事に書きましたので、こちらを参照ください。

続・はてなブログのスマホ版ページをカスタマイズしてみた - Fluffy white croquis

そして流し込む

今回、CSSに加えて今まで、<body> のカスタマイズエリアにいた、Google Fonts 読み込み用のコードもいっしょにして流し込みました。

f:id:align_centre:20140430234420p:plain

その結果…

BeforeAfter
f:id:align_centre:20140430234646p:plain f:id:align_centre:20140430234712p:plain

無事、タイトルや本文のフォントが PC 版と同じ Google Fonts の Gruppo, Monda, Cantarell になり、画像・枠線の角丸なども適用されて、ちょっと雰囲気がよくなりました(^o^)/
他に、ページ下部の Zenback の部分も少しいじっています。

iPhone 5(iOS7) 以外では確認していないので、Android でどう表示されているのか、気になるところではあります。

あとは、ブログのアイコンを作らなきゃといったところでしょうか。とりあえず。

関連記事