tasukuの日常雑記

教育学部修士でありながらIT業界に就職を決めた大学院生。研究でpython、c#を触っています。このブログではプログラムや日々の生活で培ったことについて思うがままに記述します。

【初心者】はてなブログのデザイン変更してみた~見出し編~

ブログを書く人なら誰もが思うこと…

ブログをかっこよくしたい!!!!

 

はてなブログを始めたばかりの僕が、ブログをカスタマイズしていく過程を記述していきます! 

 

現状

 下の画像は今の僕のブログです。

f:id:tasuku373:20170727234150p:plain

 

正直、のっぺりとして色味がない!

見出しは文字が太いから分かるけど、白黒だけでなんだか文字文字して読みにくいなー

 

そこで、今回は「見出し」をかっこよくしていきます!

 

見出しのカスタマイズ

今回は以下のブログを参考にさせてもらいました!

いくつもの例がわかりやすく記述されていたので、初心者の僕でもなんとかできそうな気がしてきました!

www.notitle-weblog.com

 

いくつもの例がわかりやすく書かれていて、初心者の僕でもなんとかできそうな気がしてきました!

早速やってみます!

 

まずは「ブログの編集」を推して、「スパナマーク」を押します。

するとこのような画面が出てきたのではないでしょうか?

ここにある、「デザインCSS」をクリックします。

f:id:tasuku373:20170727234536p:plain

 

すると、、、

f:id:tasuku373:20170727234248p:plain

先ほどまで小さく表示されていた所が大きく表示されました。

ここにコードを書いていきます。

 

このコードに書かれている「h3」の部分が、どの見出しのデザインを変更するかを決める所になります。

「大見出し」 → h3

「中見出し」 → h4

小見出し」 → h5

になります。

自分のブログで使っている見出しの大きさに合わせて変更してみてください!

 

引用したコードを貼り付けます!

f:id:tasuku373:20170727234644p:plain

 

僕は「中見出し」を使用していたので、ここでは「h4」に変更しています!

貼り付けてセーブをすると、、、

 

f:id:tasuku373:20170727234717p:plain

テッテテー!!!

完成しました!!!

 

 見出しを変えただけなのに、さっきとは雰囲気が大きく変わりました!

デザイン恐るべし笑