このブログはNikedというブログテーマを使っていますが、CSSを追加・上書きする形でカスタマイズを加えています。
変更を加えたい部分だけを書くのでとても簡単です。
カスタマイズの手順
CSSのカスタマイズは、「デザイン」→「カスタマイズ（スパナマーク）」で一番下の「｛｝デザインCSS」を開き、ここに追加部分を書き加えます。
そこには、既に何か書かれていると思います。それは今選んでいるテーマのCSSを読み込む一文です。
Nakedの場合は、次のように書かれています。
/* <system section="theme" selected="6653812171397406126"> */
@import url("https://blog.hatena.ne.jp/-/theme/6653812171397406126.css");
/* </system> */
この行は絶対に消してはいけません。そしてこのCSSファイルの中身を見て、手を加えたい部分をこのしたの行に書いていくのです。
CSSファイルに書いてあることとは違うことを書いたらどうなるのか？
それは後で書いた方が上書きされます。
見出しのカスタマイズ例
「大見出し」のカスタマイズはこんな風にしています。
まず、こちらがテーマのCSSで書かれている見出しの部分。
.entry-content h3 {
margin: 32px -32px 20px -32px;
padding: 12px 16px;
border-left: 6px solid #444;
background-color: #f6f6f6;
color: #444;
font-size: 20px;
font-weight: bold;
line-height: 1.4;
letter-spacing: 1px;
}
そして、上書きのために追加したのがこちら。
.entry-content h3 {
margin: 16px 0px 10px 0px;
padding: 8px 16px 6px;
border-left: 6px solid #0250a3;
border-bottom: solid 2px #0250a3;
background-color: #FFF;
color: #111;
}
font-sizeなど、上書きしていないものは上の方の設定が適用されます。中見出しはh4、小見出しはh5になります。
見出しを変えるだけでも、同じテーマを使ってる他のブログとの違いを出せますから、オススメです。
コピペで使えるCSSサンプルもありますから、それを参考にオリジナルを作るのも良いです。
