ブログを始めて約1ヶ月が経ちました。
「はてなブログ」の様々な機能に「なるほど！」と新たな発見をし、嬉しくなることもしばしば。
そんな嬉しい機能を1つご紹介します。
見出しのデザイン変更
初心者にとっての「壁」、CSS
他の方のブログを拝見すると、とても読みやすく綺麗に整っており、漠然と「いいな〜」と思っていました。
例えば、見出しに色が付いていたり、色付きのアンダーラインが引かれていたり、目次設定、重要語句が四角で囲んであったりと…ブログを読みやすくする、さまざまな工夫がなされています。
自分のブログも、同じように色々したいのですが、やり方がさっぱりわかりません。
そこで先日、少し時間があったので色々調べてみました。
すると、どうも「CSS」というものをいじるようでした。
「CSS」？？？
さっぱりわかりません。。
が、どうも、ブログのデザインに関係するものみたいでした。
とりあえず、具体的な変更の仕方をまとめましたので、ご参考ください。
見出しデザイン変更手順
とりあえず、「大見出し」「中見出し」のデザイン変更についてお伝えします。
手順は以下の通りです。
①ダッシュボード
②デザイン
③工具マーク（カスタマイズ）
④｛｝デザインCSS
⑤コードを入力する
例を後述してます。
良く分からなかったのですが、とりあえず実行してみると、デザインが変化するので面白いです。
色々と試した結果、以下のパタンが一番しっくりきたので、これで当分やっていきたいと思います。
「大見出し」を四角く囲む
以下のコードをコピーしてデザインCSSに貼り付ける（又は入力する）。
以下は「水色の四角に、白抜き文字」のデザインコードです。
「中見出し」を左ワンポイント＆下線にする
以下のコードをコピーしてデザインCSSに貼り付ける（又は入力する）。
以下は、「水色の左側ワンポイント＆下線」のデザインコードです。
.entry-content h4{
color:#333333;
padding: 5px 10px;
border-left: 10px solid #00bfff;
border-bottom: 1px solid #00bfff;
}
「色」のコード
色は自由に設定できます。上記のデザインは文字の色を「白」や「黒」にしていますが、以下の場所のコードを変更することによって、自分の好きな色にすることができます。たくさんあって迷います。
color：#333333; の「#333333」の部分のコードを変更する。
同様に、 background:#00dfffの「#00dfff」のコードや、border-left: 10px solid #00bfffの「#00bfff」のコードを好きな色に変更しましょう。
色のコードにつていては、WEB色見本 原色大辞典 - HTMLカラーコードを参考にすると良いです。
まとめ
「CSS」と聞いて、はじめは「下手にいじらない方が良いな・・」と感じ「自分には関係のない機能」と思っていましたが、やり始めると案外簡単でした。
もう少し以下の本で勉強して、色々といじってみたいと思います。
![はてなブログ Perfect GuideBook [改訂第2版]](https://m.media-amazon.com/images/I/51DZs63BTNL._SL500_.jpg "はてなブログ Perfect GuideBook [改訂第2版]")
同じ思いを持たれている方、リライトついでにぜひお試しを！
