ブログのデザインを元に戻し、cssのスタイルシートを変えてみた

雨が振って、湿度が高いです。蒸し暑い…

先日ブログのデザインを変えましたが、やはり横にプロフィールやカテゴリが欲しいなと思い、ブログのデザインを元のものに戻しました。
その代わり、コードが見やすくなるよう以下のようにcssのスタイルシートを弄ってみました。

• 横幅を画面一杯まで広げる
• コードの部分(pre.code)はスクロールバーを使わないようにする
• pre.codeの色設定を黒地に白文字にする

変更した例として丁度いいので、設定したcssをコード表示すると、以下のようになります。「デザイン」の「カスタマイズ」で、「デザインCSS」に以下を追加します。

#container {
  width: 87%;
  max-width: initial;
}
#container #content {
  width: auto;
  max-width: initial;
}

#main {
  width: calc(100% - 220px);
}

.entry-content pre.code {
  font-size: 100%;
  color: #f5f5f5;
  background-color: #222222;
  overflow: auto;
  white-space: pre-wrap;
  padding: 3px;
  border-radius: 2pt;
}

ちょっと苦労した部分は、pre.codeだけではcssの優先順位の関係で、設定が有効にならず、".entry-content pre.code"を指定しなければならなかった所です。
この辺りを調べるのに、Google Chromeの検証機能が役に立ちました。初めて使いましたがとても便利です。使い方は、「google chrome 検証機能」でググると出てきます。

しばらくはこれで使っていくことにします。