LITERALLYスマートフォン用の表示で見るLITERALLY知っておくと楽しい知識をまとめて紹介2014-10-12はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法デザインはてなブログのスマホ表示時のデザインはカスタマイズが面倒で、ほぼ全てのブログが同じデザインで個性が出しにくいのが特徴だ。簡単に変更できる部分は、ページ上部のアイコン画像ぐらい。先日、その単調なはてなブログのスマホ向けデザインをカスタマイズしまくってみた。今回は備忘録がてら、その方法と「簡単にはてなブログのスマホ表示デザインをオシャレにするいくつかのテクニック」を記録してみようと思う。はてなブログのモバイル(スマホ)デザインCSSを編集する方法まず、ここがあまりネットで探してもなかなか見つからなかった。はてなブログにはPC表示向けのcss編集ボックスはあるが、スマホ表示用のcss編集ボックスはない。そのため、レスポンシブデザインのテーマを設定しない限り、スマホのデザインはカスタマイズできないんだと諦めている人も多いかもしれない。ぼくもスマホのデザインをなんとか変えることができないが試行錯誤してみたら、思った以上に簡単な方法でカスタマイズすることができた。スマホ表示のカスタマイズは、はてなブログPro(有料)に入っていることが必須条件になる。ここは、少し丁寧に説明していく。編集するのは、スマホ・ヘッダーのタイトル下htmlの部分↓(この部分を編集できるのははてなブログPro会員のみ)このhtm編集ボックス内で<style>タグで囲んだ部分にはCSSが記述できるようになる。そのため「<style>タグで囲んだ部分を作っておき、スマホデザインのcssを変更したくなったらそこにどんどんと記述していく」という方法を用いれば良い。実際の記述例はこんな感じ↓それでは早速、CSSによって、スマホのデザイン表示をいくつかオシャレにするための簡単なテクニックを書いていく。フォントをオシャレにするスマホの場合、日本語のフォントにはほとんど種類がないため、初期設定のままでも良いと思う。英語フォントはかなり種類が多く、英語フォントの種類を変えるだけでもオシャレさは倍増する。CSSの記述は下のよう。bodyでブログ全体のフォント設定を変更した。Nextの部分を変えれば、他のフォントも適用できる。Fonts』から見れる。2.記事中の見出しを変えるデフォルトのデザインでは、見出し(<h3>や<h4>)の部分がシンプルな太字になっているだけで目立たずメリハリを付けづらい。そこで、見出しを変更するだけで一気に文章は読みやすくなるはずだ。このブログでの中見出し(<h4>)のCSS記述は以下のようになる。文字色を変え、背景色をつけ、見出し左側には少し太めの線をつけた。他にフォントサイズなどを変更してみると良いかもしれない。⇒ヘッダーを変える続いてはヘッダーの部分。デフォルトではアイコン画像をのぞいて自由度がほとんどなく、どうしてもスペースが大きくなりがちだ。ヘッダーのスペースが大きくなることで、読者はページを読み込む度に余分にスクロールしなければならない。そこでこのブログでは、デフォルトの部分のヘッダーをすべて消してしまい、別にヘッダー画像を設定した。これだけで「はてなブログっぽさ」は一気になくなるかと思う。用意したヘッダー画像は「はてなフォトライフ」にアップロードし、右クリックでURLをコピーし、<img>タグで挿入した。ヘッダーを消すときに使った「display:none;」はSEO的にあまり良くないという話もあるが、ここだけであればおそらく問題はないと思う。トップページの記事一覧のデザインにメリハリをつける続いてはブログトップページの記事一覧のデザインの変更。ここもほとんどのはてなブログで同じデザインなので、少し変えるだけでも個性が大きく出ると思う。3日付のデザイン、の3つ。5分あれば変更できるような内容だ。画像のサイズを大きくすると読者により直感的に記事の魅力を伝えやすくなるかと思う。今回ははてなブログのスマホ表示の一部分だけのデザインカスタマイズ法について説明した。別の部分のカスタマイズ法については、またこのブログで定期的に更新していこうと思う。Literallyはてなブログのデスクトップのデザインについては以下の記事にまとめました。»SEARCHスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。