【はてなブログ】Evergreen カスタマイズ①（フォント・見出し）
はてなブログ無料版を始めて6日が経ちました！備忘録に追記したCSSコードをメモしておきます。
「デザイン」は公式テーマの「Evergreen」にしました。シンプルでナチュラルな色合いが気に入りました。
本当はカスタマイズより、たくさん記事を書いててブログを書くことに慣れたいところですが…どうしても見た目が気になってしまうので、自分なりにフォントやフォントサイズ、見出し、目次、トップページのレイアウトなどカスタマイズしてみることにしました。
CSSは使ったことがない素人なので、見よう見まねで作りました。自分の記録用にメモします。（間違いがあったらすみません）
基本のきですが、CSSコードは 「デザイン ＞ レンチマーク ＞｛デザインCSS｝」に追記します。
①フォント
①－１ フォント
/* フォント */
body{
font-family:"メイリオ",Meiryo,"游ゴシック","Yu Gothic",Yu Gothic,"ＭＳゴシック",sans-serif;
}
フォントは「font-family」の直後に来るフォント名から順に使われるようです。最初はメイリオだけ設定していましたが、スマホで見ると明朝体になってしまうので、メイリオ以下も設定しました。
①－２ フォントサイズ
/* 文字の大きさ */
.entry-content{
font-size:16px;
}
フォントサイズはEvergreenの初期設定だとやや大きく感じたので16pxにしました。
②見出し
②－１ 見出しのデザイン
/* 大見出し */
h3{
background:#b4dddf;/*背景の色*/
color: #ffffff;/*文字の色⇒白*/
padding: 0.5em;/*枠の内側の余白*/
}
/* 中見出し */
h4{
border-bottom:solid 3px #b4dddf;/*下線の太さと線の色*/
}
/* 小見出し */
h5{
padding: 0.5em;/*枠の内側の余白*/
margin:0.5em;/*枠の外側の余白*/
border:solid 2px #b4dddf;/*線の太さと色*/
}
見出しは、大見出し⇒「h3」、中見出し⇒「h4」、小見出し⇒「h3」のようです。大見出しはべた塗りに白文字、中見出しは下線のみ、小見出しは囲みにしてみました。
※「background」は背景色、「color」は文字色です。（「カラーコード」で検索すると色見本とコードが載っているのでそのコードを参考にしました。）
※「padding」と「margin」の違いがわかりにくかったのですが、「padding」は作成した枠から文字までの空白の距離を設定できて、「margin」は作成した枠から画面までの空白の距離を設定できるようです。
②ー２ 見出しのレイアウト
/*中見出しレイアウト*/
ul.table-of-contents ul{
font-size: 90%; /*小さい文字サイズヘ*/
margin-left: -0.5; /*やや左へ*/
}
/*小見出しレイアウト*/
ul.table-of-contents ul ul{
display: none; /*非表示*/
}
「ul.table-of-contents ul」が中見出しを「ul.table-of-contents ul」が小見出しを示しているようです。中見出しは大見出しより小さい文字サイズ（90％）へ変更し、やや左よせにしました。小見出しを非表示にしました。
長くなりましたので、目次とレイアウトは次回書きます！
#はてなブログ #無料版 #カスタマイズ #フォント #見出し #Evergreen
