MENU

ブログのテーマを『Material』にして、デザインもいろいろカスタマイズしてみた

【スポンサーリンク】

こんにちは、ポルスクです。

 

突然ですが、ブログのデザインを変えました!!

結構前からデザインを変えたいなとは思っていたのですが、まとまった時間が取れたので遂に変えてみました。

 

というわけで、どこをどう変えたのか書いていきます。

「デザイン変えてみたいなー」って思ってる人がいたら参考にしてみてください。

テーマ

まずテーマについては、どんなのがいいかよくわからなかったので、「はてなブログ テーマ オススメ」とかで検索していろいろ調べてみました。

 

で、一番カッコイイと思ったので『Material』にしました。

シンプルで見やすいところもよかったポイントですね。

Material - テーマ ストア

 

ちなみに、このテーマの製作者の方のブログではいろいろなカスタマイズ方法が載っているので、興味があったら読んでみるといいかもしれません。

webgaku.hateblo.jp

 

前置きはそれくらいにして、さっそく変えたところを紹介します。

1カラム→2カラム

まず、インストールしても、そのままだとサイドバーが下に表示されていて、ページの上には記事の一覧しか出ていません。

これを1カラムっていうらしいです。

具体的にはこんな感じ。

f:id:polsk123:20180513191055p:plain

 

だから、サイドバーが記事一覧の横に出るようにしました。

この状態は2カラムっていうそうです。

f:id:polsk123:20180513191135p:plain

 

参考にしたのはこちらの記事です。

webgaku.hateblo.jp

あと、この記事に書いてあることを参考にして、記事の幅を広くしてみました。 

僕の場合は「width: 600px」から「width: 800px」に変えました。

カラー

色は初期設定の青がいい感じだったのでそのままにしましたが、タイトルにカーソルを合わせた時に出てくるアンダーラインの色を変えたかったので、こちらのページを参考にして変えました。

webgaku.hateblo.jp

僕が変えたのは「タイトルをホバーした際のカラー」ってやつだけですが、ほかにもヘッダーやフッター、続きを読むとかの色を変えるためのCSSも載っています。

目次

目次も変更しました。

こちらのページの目次を例に説明します。

www.polsk-blog.com

 

デフォルトだとこんな感じでわかりにくかったので、ちょっと変えました。

f:id:polsk123:20180513154946p:plain

変更後はこんな感じ。

f:id:polsk123:20180513160320p:plain

 

目次については、こちらの記事を参考にしました。

hitsuzi.hatenablog.com

ちなみに、文字の大きさは少し変えてます。

「目次」の文字は20pxにして、目次のそれぞれの項目は18pxにしました。

カエレバのデザイン

テーマを変えた後は、カエレバのデザインを変えたかったのでそれもCSSでいじりました。

変えるきっかけになったのはこちらの記事。

www.garuseek.com

それにしても、累計売上100万円とはすごいですねΣ(・□・;)

 

ということで、こちらのページを利用してカエレバ・ヨメレバのデザインを変えてみました。

basanote.hatenablog.com

こちらのジェネレーターを使えば、コピペしてデザインCSSの部分に張り付けるだけでいいので、かなり楽に変更できます。

 

ちなみに、変更後はこんな感じ。

f:id:polsk123:20180513191425p:plain

見栄えが良くなって大満足ですw

最後に:意外とコピペでなんとかなるよ

ブログのデザインを変えるってなると、いろいろと大変そうな気がしますよね。

でも、意外とコピペで行けちゃいますw

 

もちろん、知識があるに越したことはないんですが、やっぱり楽に済ませたいって思うのが人の性。

そんな人でも、適当に「はてなブログ "変えたい部分の名称" おすすめ」とかで調べたらコピペでOKってページが結構出てくるので、やってみてはいかがでしょうか。

必要なのは文章の読解力とコピペ力ですw

 

頑張ってデザインをいろいろ変えたりすると、自分のブログに愛着が出てきてオススメです。

興味が出たらやってみてください。