LITERALLY

知っておくと楽しい知識をまとめて紹介

はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法

f:id:tsukuruiroiro:20161102124832j:plain

はてなブログのスマホ表示時のデザインはカスタマイズが面倒で、ほぼ全てのブログが同じデザインで個性が出しにくいのが特徴だ。簡単に変更できる部分は、ページ上部のアイコン画像ぐらい。

 

先日、その単調なはてなブログのスマホ向けデザインをカスタマイズしまくってみた。今回は備忘録がてら、その方法と「簡単にはてなブログのスマホ表示デザインをオシャレにするいくつかのテクニック」を記録してみようと思う。

f:id:tsukuruiroiro:20161102125004j:plain

 

はてなブログのモバイル(スマホ)デザインCSSを編集する方法

まず、ここがあまりネットで探してもなかなか見つからなかった。はてなブログにはPC表示向けのcss編集ボックスはあるが、スマホ表示用のcss編集ボックスはない。そのため、レスポンシブデザインのテーマを設定しない限り、スマホのデザインはカスタマイズできないんだと諦めている人も多いかもしれない。

ぼくもスマホのデザインをなんとか変えることができないが試行錯誤してみたら、思った以上に簡単な方法でカスタマイズすることができた。ただし、スマホ表示のカスタマイズは、はてなブログPro(有料)に入っていることが必須条件になる。

ここは、少し丁寧に説明していく。

 

編集するのは、スマホ・ヘッダーのタイトル下htmlの部分↓(この部分を編集できるのははてなブログPro会員のみ)

f:id:tsukuruiroiro:20141012111445j:plain

このhtm編集ボックス内で<style>タグで囲んだ部分にはCSSが記述できるようになる。そのため「<style>タグで囲んだ部分を作っておき、スマホデザインのcssを変更したくなったらそこにどんどんと記述していく」という方法を用いれば良い。実際の記述例はこんな感じ↓

 それでは早速、CSSによって、スマホのデザイン表示をいくつかオシャレにするための簡単なテクニックを書いていく。

 

 

フォントをオシャレにする

スマホの場合、日本語のフォントにはほとんど種類がないため、初期設定のままでも良いと思う。ただ英語フォントはかなり種類が多く、英語フォントの種類を変えるだけでもオシャレさは倍増する。

たとえば、デフォルトのフォントを「Avenir next」というフォントに変更してみる↓

BEFORELITERALLY,Blog.スマホ用のDESIGN

AFTERLITERALLY,Blog.スマホ用のDESIGN

違いは小さく見えるかもしれないが、実際にブログのフォント全体で変更してみると、印象は 大きく変わるはず。

CSSの記述は下のよう。

 bodyでブログ全体のフォント設定を変更した。もちろんAvenir Nextの部分を変えれば、他のフォントも適用できる。iPhoneに対応しているフォント一覧は『iOS Fonts』から見れる。

 

 

2.記事中の見出しを変える

f:id:tsukuruiroiro:20141012124620j:plain

デフォルトのデザインでは、見出し(<h3>や<h4>)の部分がシンプルな太字になっているだけで目立たずメリハリを付けづらい。そこで、見出しを変更するだけで一気に文章は読みやすくなるはずだ。たとえば、このブログでの中見出し(<h4>)のCSS記述は以下のようになる。

文字色を変え、背景色をつけ、見出し左側には少し太めの線をつけた。他にフォントサイズなどを変更してみると良いかもしれない。

 

 

⇒ヘッダーを変える

f:id:tsukuruiroiro:20141012142930j:plain

続いてはヘッダーの部分。 デフォルトではアイコン画像をのぞいて自由度がほとんどなく、どうしてもスペースが大きくなりがちだ。ヘッダーのスペースが大きくなることで、読者はページを読み込む度に余分にスクロールしなければならない。そこでこのブログでは、デフォルトの部分のヘッダーをすべて消してしまい、別にヘッダー画像を設定した。これだけで「はてなブログっぽさ」は一気になくなるかと思う。

用意したヘッダー画像は「はてなフォトライフ」にアップロードし、右クリックでURLをコピーし、<img>タグで挿入した。

 ヘッダーを消すときに使った「display:none;」はSEO的にあまり良くないという話もあるが、ここだけであればおそらく問題はないと思う。

 

 

トップページの記事一覧のデザインにメリハリをつける

f:id:tsukuruiroiro:20141012150243j:plain

続いてはブログトップページの記事一覧のデザインの変更。ここもほとんどのはてなブログで同じデザインなので、少し変えるだけでも個性が大きく出ると思う。

変更した部分は ①画像サイズ ②画像の枠線 ③日付のデザイン、の3つ。5分あれば変更できるような内容だ。とくに画像のサイズを大きくすると読者により直感的に記事の魅力を伝えやすくなるかと思う。

 

今回ははてなブログのスマホ表示の一部分だけのデザインカスタマイズ法について説明した。別の部分のカスタマイズ法については、またこのブログで定期的に更新していこうと思う。

 

関連記事

 

はてなブログのデスクトップのデザインについては以下の記事にまとめました。

f:id:tsukuruiroiro:20160117153608p:plain