はてなブログのデザインを一部いじる

まずオリジナルのデザインはこちら
f:id:umashika5555:20170927015532p:plain
今回はブラウザがGoogleChromeでやることを想定する.

1.F12キーを押すとブラウザの右か下にバーが現れるので, その左上マウスのマークをクリック
f:id:umashika5555:20170927015629p:plain

2.オリジナルのデザインで変更したい部分にマウスを当てクリックする

3.該当箇所のCSSが表示される
今回は

.entry-content pre.code {
    color: #333;
    border: none;
    padding: 20px;
    background: #f6f6f2;
    font-size: 85%;
    margin: 0.8em 0;
}

のbackgroundを#f6f6f2から#CCCに変更する.
このCSSを全てコピーする.

4.はてなのメニューの「デザイン」から「デザインCSS」をクリック
そこに先ほどのコピーしたCSSを貼り付ける.
改変したい箇所#f6f6f2を#CCCに変更する.

5.デザイン変更完了
f:id:umashika5555:20170927020400p:plain