【CSS】ブログデザインを自分でカスタマイズしてみた

スポンサーリンク

f:id:tkhstol-929:20180902193013j:plain

私は前々からはてなブログのデフォルトデザインに不満を持っていました。 

(冒頭から悪口)

細かいところを挙げるとキリがないのですが、主に不満だったところは

  • 見出しが目立ってない
  • 目次が見づらいしダサイ

です。 

 

この2点を改良すべく、ブログのCSSをいじってブログデザインをカスタマイズしてみます。

 

 

はてなブログの設定からCSSをいじる

はてなブログはPCからアクセスしたときとスマホからアクセスしたときではレイアウトが違いますよね。

 

そのため、 CSSでブログデザインをカスタマイズする際はPC画面とスマホ画面のそれぞれで個別に設定する必要があります。

 

PC画面のデザインを変える場合

まずは、はてなブログの管理画面から「デザイン」を選択します。

f:id:tkhstol-929:20180902175511p:plain

左上の真ん中にあるスパナのアイコンをクリックして「デザインCSS」をクリックすると、テキストボックスが表示されます。

f:id:tkhstol-929:20180902180247p:plain

 ここにCSSの記述を書いて設定を保存すれば、実際のブログ画面でCSSが反映されます。

 スマホ画面のデザインを変える場合

はてなブログではPC画面のCSSは今の通りに管理画面から変更できますが、スマホ画面のCSSは管理画面からは触れないようになっています(なぜか)

 

ですが、HTMLのカスタマイズは可能なので、

 

先程と同様に「管理画面」→「デザイン」と進み左上の右側にあるスマホのアイコンをクリックし「ヘッダー」の項目をクリックしてみてください。

f:id:tkhstol-929:20180902184234p:plain

ここにHTMLを記述できるので、<style></style>を使ってCSSを記述することで、

スマホ画面のデザインもカスタマイズすることができます。

 

  • PC:CSSを直接記述
  • スマホHTMLから<style></style>を使って記述

という点に注意してください。

 

見出しのデザインを変える

今までの見出しデザインはこんな感じでした↓↓

f:id:tkhstol-929:20180902185641p:plain

 

ダサい…!ダサすぎる!!

 

シンプルにダサい上に、主張が薄すぎて見出し感がありません。

もっと見出しを目立たせたいところです。

 

なので、こんな感じに改良!

f:id:tkhstol-929:20180903003341p:plain

 

Google Chromeデベロッパーツールで確認したところ、はてなブログの見たまま記法では大見出しは<h3></h3>、中見出しは<h4></h4>だったので、

小見出しは使わないので調べてませんw)

 

h3とh4に以下のデザインを適用してやりました。

f:id:tkhstol-929:20180902191204p:plain

(ちなみにCSSの編集はAtomというテキストエディタ上で行っています) 

 

大見出しは濃い青色、中見出しは薄い青色で指定しています。

 

 

目次をもっと見やすくする

今までは見づらかった目次が…

f:id:tkhstol-929:20180902190407p:plain

 

なんということでしょう…!

f:id:tkhstol-929:20180902190512p:plain

 

目次部分を枠で囲み、上部に”目次”というテキストを付け加えることができました。

 

この目次デザインは以下のサイトを参考にしました。

mshitech.hatenablog.com

 

さいごに

これでも一応プログラマーの端くれなので、たまにはプログラマーっぽいことをしてみました。

 

見出しと目次以外にもいろいろカスタマイズしていきたいと思っています。

  

最後まで読んでくださりありがとうございます!

にほんブログ村 IT技術ブログへ
にほんブログ村