the cat's whiskers

とてもすてきなこと

はてなブログのデザイン変更してみた

TwitterのTLで、ブログのデザイン変更が流行っていたので、流れにのってみました。

ただ、私のブログは無料プランなので、できることは少ないです。
それでもちょっと変えるだけで、自分ならではのものができた気がして満足です。

せっかくなのでちょっとメモ残してみます。

デザイン変更前

参考までに。

 ↓以前はこちらを使っていました。

レトロポップ - テーマ ストア - はてなブログ

 f:id:mike_hw:20150609232401p:plain

 

↓レスポンシブル対応デザインでないため、スマフォだとこんな感じ。

f:id:mike_hw:20150609232910p:plain

テーマをレスポンシブルデザインに変更

使いやすそうな↓こちらにしました。

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

ちなみにこれを設定しただけでは、レスポンシブルにはならず、

1.デザイン設定の「デザインCSS」にレスポンシブルにする記述をする

2.スマフォ設定の「詳細設定」のレスポンシブルデザインにチェックを入れる

が必要です。(詳しくは↓こちら)

happylife-tsubuyaki.hatenablog.com

 

ブログの配色を変更する

方法は↓こちら

wedges.hatenablog.com

 

色は↓こちらから選びました。和の名前可愛いv

irononamae.web.fc2.com

 

背景は管理画面のデザインのカスタマイズの「背景」または「背景画像」で変更。

これだけでがらっと元テーマから雰囲気が変わります!

文字サイズを変更してみる

標準はちょっと大きい気がしていたので、サイズ変更。
変更の仕方は↓こちら。私は14ptにしてます。

nukio0803.hatenablog.com

その結果

スマフォだと↓こんな感じになりました。

f:id:mike_hw:20150609235331p:plain

以前のような1個の記事がボックスで表示されるのではなく、そのまま最新記事が開かれた状態になっているのが、いいやら悪いやらという感じだけど、そのままのデザインではなくなってちょっと嬉しい♪

ナビゲーションとか関連記事とかの表示もやってみたいなーとちょっと考えましたが、PV求めてるブログじゃないし、カテゴリーは表示されているので、軽さ重視で今回は取り入れないことにしました。

今後の課題はトップ画面幅とりすぎだから、どうにか調整するか、画像にしたいなってことです。