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

無課金ユーザーでもはてなブログのスマホデザイン変更できます

ご存知の方も多いですが、はてなブログスマートフォン表示はしょぼい。

f:id:yondakakuyo:20150512094223p:plain

 無課金だとブログアイコン(真ん中の丸いやつ)とアクセントカラー(画面上部のバー)しか変えられない。しかし「レスポンシブデザイン設定」というのがある。

 

レスポンシブWebデザインとは - はてなキーワード

Webサイトのページデザインを「ブラウザやデバイスの種類」で判別するのではなく、「ブラウザやデバイスの表示幅」で判別して表示を切り替える手法。 スマートフォンタブレット端末の普及により、それぞれのデバイスに対応させたHTMLファイルを用意するのが一般的だったが、レスポンシブWebデザインを活用すれば、1つのHTMLファイルをCSS3で制御して表示を最適化することができる為、管理や制作が非常にしやすいのが特徴。

設定は、デザイン設定→スマートフォンアイコン→詳細設定→レスポンシブデザインにチェックするだけ。

f:id:yondakakuyo:20150512094222p:plain

そして「レスポンシブデザインのテーマ」を設定。はてなブログのテーマ(デザインテンプレ)にはレスポンシブデザイン対応のものとそうでないものがある。ウィンドウの幅を狭くしたとき、サイドバーが画面下部に移動して1列に並ぶものならOK。

とりあえず5つ紹介。(以下のスクショは自分が所有するAQUOS SERIE miniから)

Evergreen - テーマ ストア - はてなブログ

f:id:yondakakuyo:20150511140533p:plain

公式テーマのレスポンシブデザイン。PC版も1カラムなのでほとんど印象が変わらず字も読みやすい。

 

レスポンシブルー - テーマ ストア - はてなブログ

f:id:yondakakuyo:20150511140536p:plain

タイトル通りのレスポンシブデザイン。両端の空白は画面幅の狭い機種に合わせたものか。

 

Material - テーマ ストア - はてなブログ

f:id:yondakakuyo:20150511131534p:plain

Googleの新しいデザインガイドラインであるMaterial Design(マテリアル デザイン)に沿ったスタイル」だそうでかっこいい。CSSをいじってヘッダーの色やフォントを変えることもできる。

 

B!KUMA - テーマ ストア - はてなブログ

f:id:yondakakuyo:20150511140540p:plain

こちらも公式テーマから。PC版では上半身しか見えないB!KUMAが全身出てくるのが面白い。サイドバーは横2列に並ぶ。

 

Rouge - テーマ ストア - はてなブログ

f:id:yondakakuyo:20150511140529p:plain

 このブログで使用。ヘッダーの色が変更できる。