貯金2000万からのセミリタイア継続中

40代・貯金2000万円で無謀なセミリタイア生活を始めて5年以上継続中。気がつけば50代に…

このブログで行ったカスタマイズについて(その1)

このブログはNikedというブログテーマを使っていますが、CSSを追加・上書きする形でカスタマイズを加えています。

変更を加えたい部分だけを書くのでとても簡単です。

カスタマイズの手順

CSSのカスタマイズは、「デザイン」→「カスタマイズ(スパナマーク)」で一番下の「{}デザインCSS」を開き、ここに追加部分を書き加えます。

f:id:retire2k:20180402011636p:plain

そこには、既に何か書かれていると思います。それは今選んでいるテーマの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サンプルもありますから、それを参考にオリジナルを作るのも良いです。

www.notitle-weblog.com

はてなブログカスタマイズガイド