きみとイギリス暮らし

イラストレーターkimixのイギリス留学&ワーホリブログ

はてなブログのデザインをシンプルにカスタマイズするためにやった10のこと

f:id:kimix:20170424021541p:plain

シンプルだけど整ったデザインにしたいなあという悩みを抱えて早数ヶ月…

ついに!カスタマイズしてみました〜〜!

ということでめずらしくWEB屋さんっぽいことを書いていきます。

別にたいしたことはしてないですが…なにをやっていったかちょっと説明してみます。


はじめにやること

テンプレート「DUDE」をインストール!

テンプレートストアにある色んなテンプレートの中から1番好みだった「DUDE」をインストールしました。

ちなみにDUDEはレスポンシブルテンプレート(スマホ対応)じゃないので自分でスマホに対応させました。

個人的におすすめなテンプレート

今回は過去にDUDEをインストールしてたのでそれをいじくるのが前提でしたが

はじめからスマホ対応しているテンプレートのほうが楽ちんだと思うのでそっちがオススメ。


はい、ここからがメインです。カスタマイズするためにやった10のことを紹介します。


1.ナビゲーションをつけた

メニュー(ナビゲーション)をつけました。

PCでは大カテゴリにマウスを当てると(ホバーすると)小カテゴリが表示されるようになっています。

設置方法はシンプルなブログテーマで有名な「Innocent」のカスタマイズ記事を参考に。

(ちなみに現在リンク貼られてないメニューもありますが改造中ということで見逃してください…!)


スマホではアコーディオンナビゲーションを表示。

スマホでも小カテゴリを表示させたかったのでLIGの記事を参考にしました。


2.見出しを変えた

そのまんまです。見出しを変えました。

中見出しだよ

小見出しだよ

中見出しにハートとか使ってみました。ふふふ。

でも可愛くなりすぎないように色はグレーで控えめにしています。


3.太字をマーカー風にした

太字だよ

薄いピンクのマーカーが引かれているようなデザインに変更。

ひかえめに、ひかえめに。


4.はてなブログ専用WEBフォントを使ってみた

FontAwesomeを使ってアイコンを表示させるのがはてなブログ内で流行っていますが(?)

はてなブログ内には専用WEBフォントがあるのご存知ですか!?

はてな内に標準搭載されてるcssで読み込まれるようになっているのでこっちの方が表示早いとのことです。

ということでナビゲーションのアイコンたちは「はてなアイコンフォント」をつかっています。


5.日本語WEBフォントをつかってみた

ちょっと雰囲気を変えたくて「Noto Sans Japanese」を使ってみました。

読み込みが重いな…読みにくいな…と感じたら変えるかも。

1番の問題点は重さです。2バイト文字のため、1つのウエイトで、1MB以上あります。Noto Sans JPの場合でも6つのウエイトがあり、全てをダウンロードする場合、9MBにもなります。昨今の通信環境は高速化傾向にありますが、それでも「ありえない重さ」です。
Google Fontsの日本語フォント「Noto Fonts」の使い方 | OXY NOTES

はい、この方がおっしゃてる通りちょっと読み込みが遅くなるのです。

あと可読性が悪いような気もします。(なんで変更したんや)

▼公式サイトはコチラ
Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access



6.カテゴリを階層化・表示させた

はてなブログってカテゴリを大カテゴリ、小カテゴリ…って階層化して選択できないんですよね。

ですが!

↓この記事を参考にJavaScriptを書くことによって記事上下に入れ子式のパンくずリストを表示させることができます。

とっても簡単にカテゴリ管理ができるようになるのでお困りの皆さん、ぜひやってみてください〜。


7.サイドバーが固定されるようにした

PCで下までスクロールしたとき、サイドバーにある「人気の記事」の項目が固定されるようにしました。


8.トップを記事一覧ページにした

はてなブログのトップページ、、、見にくくないですか?

http://kimix.hatenablog.com/

(URLにアクセスしたら一番初めに表示されるindexページのことです!)

これにずっと悩んでいたので▼この記事を発見した時飛び上がっちゃいました。


はてなブログのトップページって、「続きを読む」を本文内に記入しない限り

設定画面で指定した個数の最新記事の全文が出ちゃうんですよね。

「じゃあ続きを読むを設定すればいいじゃん!」って思う人も多いと思うんですが、これがまあめんどくさくて…。

レスポンシブONにしないで、はてなブログ標準のスマホデザインを使えば記事一覧が表示されるんだけどね、なんだかね、、って思っていました。

こちらも記事の通りに設定するだけで簡単に設定することが出来ます〜


9.サムネイル画像を角丸にした

すこし優しい雰囲気を出したかったのでサイドバーに表示されるサムネイル画像たちは角丸にしました。


10.Twitterのフォロワー数を表示させた

PCだとサイドバーにあたる「ABOUT」の欄にTwitterフォローボタンをつけているんですが

Twitterのフォロワー数を表示させてみました。

フォロワー数が出てると「フォローしたいな!」って気持ちが湧きませんか?

あれ、わたしだけ?

  • 一般的に人は、他者の口コミや評判を加味して良し悪しを判断します。(心理学用語で「ハロー効果」と呼びます。)
  • SNS上でのシェア数など、どれだけ影響力を持っているのかが把握できる数値は、記事を見たユーザーの心象に少なからず影響すると考えられます。

Twitterの公式フォローボタンでフォロワー数を表示する方法|ferret [フェレット]

ふむふむ。調べてみたらやっぱり心理的効果があるみたい。

ツイート数は表示できなくなりましたが、実はフォロー数であれば表示させることができます。

そうそう、いつからか記事が何回ツイートされているかカウント数が表示されなくなっちゃいましたよね。

ですが、フォロー数は表示できるようです。

ってことで表示させてみました。

ぜひフォローしてみてくださいね〜!


▼詳しいやり方はこちら


今後やりたいこと

フッターをつくりたい…

※ごめんなさいこれまだできてません。

PCではフッターに読んでもらいたい記事や詳細なんかを載せたいなーと思って絶賛カスタマイズ中。

ソーシャルボタンを変えたい…

いろんなブログで配布されてるものはあるものの、いまいちこれ使いたい!っていうものがないので自分でつくりたいなーと思っています…

デザインを完成させたい…

今回はデザインから手をつけるのではなくはじめに白黒グレーでコーディングをして、あとから少しだけ色を足していきました。

Photoshop開いてデザインからはじめるとどうしても時間がかかっちゃうんですよね…

この状態では味気ないのでまだまだこれから色をつけたり画像を入れたりして装飾していく予定ですが、この状態でも充分良さそう……

へなちょこカスタマイズだけど何かcssとか需要があればいつか公開したいな〜〜



この記事が少しでもお役に立てれば幸いです。

それではまた~!