ストレスフリー生活研究ラボ

ストレスフリー生活研究ラボ

全てのサラリーマンのための、心と体が整うストレスフリーな生き方探し

見出しをカスタマイズする方法【はてなブログで、デザインテーマを決めたらまずここから!】

headline

今回もはてなブログのカスタマイズ方法について紹介します。

テーマは「見出し」です。

皆さん、ブログを立ち上げた時に、ブログのデザインテーマを決めましたよね。

できれば、それと同時に「見出し」のデザインをカスタマイズすることをお勧めします。

僕の場合は、大見出し(h3)に下線をつける程度だったので、カスタマイズして抜群に見やすくなりました。

だいぶ記事を書いてからデザインを変えたから、下線を取る作業に時間かかってたよね。

ほんと大変でした。。。だから、早めにタイトルデザインは決めた方が良いですよ。

この記事では、実際に僕がどのようにしてカスタマイズしたのか紹介したいと思います。

 

見せ方で劇的変化

こちらが以前までの見出しの見え方です。

Before

 

で、こちらが今回の見え方です。

After

どうでしょうか?

記事にメリハリがついて非常に読みやすくなり、色の設定次第ではシンプルな全体デザインともマッチした形で展開できます。

 

 

(設定方法)今回は超簡単です。

ダッシュボード画面で、「デザイン」を選択→「レンチ」のマークをクリック→「デザインCSS」を開いて、そこに下記のコードをコピペすればOK。

設定方法

こちらが僕のブログタイトルのコードです。

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f7f7f7;
border-left: 8px solid #0ba289;
}

ここまで設定できれば、あとは簡単。

記事入力時に設定した見出しをつければ勝手に反映されます。

設定方法


 

 

自分流にアレンジしてみましょう

今回は設定自体は簡単なので、自己流アレンジに挑戦してみましょう。

見出しはブログ全体のデザインに影響するので、自分のブログに合った色使い・見せ方にした方が良いと思います。

ここでもう一度、こちらのCSSコードをご覧ください。

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f7f7f7;
border-left: 8px solid #0ba289;
}

それぞれの要素の意味を説明します。 

まずは、1行目のh3の部分。 

これがどの見出しにデザインを反映させるのかを表します。

  • h3→大見出し
  • h4→中見出し
  • h5→ 小見出し

 ですので、反映させたい見出しに合わせて書き換えてください。

 

次に、2行目のpaddingの部分です。

paddingは、見出しまわりの余白を表しています。

 

3行目のcolor文字の色

4行目のbackground-colorは、そのまま背景色

5行目のborder-left: 8px solid は、僕の見出しでいう左側の緑色の縦ラインを表します。

#数字それぞれの色を表しています。

色の番号はこちらから好みのものを探してみてください。

www.color-sample.com

他にも、いろいろな見出しの形状を紹介するページもあったので、紹介しておきます。
www.notitle-weblog.com

 

 

あとがき

ご自身のブログテーマに合わせたいいテーマは見つかりましたか?

記事が見やすくなることで、読者にもより内容が伝わりやすくなると思います。

いろいろ試して、より良いブログにカスタマイズしていきましょう。

 

過去のカスタマイズ記事も載せておきますので、ご参照ください。

 

ブログランキング・にほんブログ村へにほんブログ村