初心者向け！はてなブログで見出しを見やすいデザインにカスタマイズする方法
はてなブログを始めて、一番最初にやったこと。
それは、本文中の見出し（区切り？境目？）を目立つようにして見やすくしたことです。
というのも、プログラミングのために他の方のサイトをよく見ます。
その際に、パラグラフとパラグラフの境目の線が目立つブログがすごく読みやすくて。
わかりやすいブログを書くセンスにあふれている！と感じたので、そういう風にしたいと思ったからです！
こういうのです（大見出し）
これの一段下のレベルの内容の見出しには
やり方
delaymania.com
とてもお世話になりました！ありがとうございました！
さらにコードをアレンジして、今私が使っている見出しのコードは、こちらです。
あとは、はてなブログでカスタムする場合
「デザイン＞カスタマイズ＞デザインCSS」を押して
先ほどのコードを貼付ければできます！
この見出しを使いたいときには、記事を書くときに「見出し」というボタンを押して
大見出しを使った場合
中見出しを使った場合
小見出しを使った場合
こうなります！
自分のブログの色に合わせる方法
先ほどのコードでは、グリーンっぽくなります。
ですが、自分のサイトの色に合わせたいと思います。
もしくは、マネしたいサイトの配色を使いたい場合とかがあると思います。
とはいえ、目で見てその色のコードを知るのは困難です。
そこで、Google Chrome限定ですが、サイトの色のコードをとるというか、解析する方法があります。
ColorPick Eyedropper
この無料のChrome拡張機能を使えば簡単です！
使い方
このカラフルなボタンを押して、色を取りたいところに照準を合わせてクリックすると、そのコードをコピーできます。
やめたいときは、エスケープキーを押します。
あとは、大見出しの背景の緑色を変更するには
８行目
background:#1ABC9C;/* 背景の色*/
この中の
#1ABC9C
の部分に色コードを貼付ければ背景の緑色を変更できます。
中見出しの左側の緑色の線を変更するには
１７行目
border-left:10px solid #1ABC9C; /* 左側の線 */
この中の
#1ABC9C
の部分に色コードを貼付ければ左側の緑色の線を変更できます。
同様に中見出しの下線と小見出しの下線を変更したい場合
中見出しは１６行目、小見出しは２７行目の
#1ABC9C
の部分を変えればOKです！
カスタムした見出しをスマホの表示にも対応させる方法
これでパソコン上では見出しが表示されますが、スマホ上では表示されません。
そこで、スマホ対応させます。
まずは、先ほどカスタムCSSで使ったコードを
このように
styleで挟む感じで修正します。
そして、「デザイン＞カスタマイズ＞記事＞記事上下のカスタマイズのうちの記事下」を押して
この修正したコードを貼付けるだけです！
あとは、「デザイン＞スマートフォン＞記事＞PCと同じHtmlを表示する」にチェックを入れれば完了です。
これで、スマホでも見出しが表示されるようになったはずです！
「デザイン＞スマートフォン＞記事＞記事ページをプレビュー」を押せば確認できます！
このやり方なら、はてなブログProという有料会員でなくてもできます！
ぜひ、お試しください！
