ブログのカスタマイズ等を紹介する際に、様々なコードを記述することがあります。
しかし、そのコードをそのまま記事の本文に入力してもコードとして認識されるため本当のコードを示すことはできません。
そんなときに使う方法が
pre/code
ですが、今回はそのpre/codeのデザインをカスタマイズしていきたいと思います。
pre/codeについてはコチラの記事を参考にしてみて下さい↓
brooklyn-custom.hatenablog.com
はてなブログ「Brooklyn」でのpre/codeデフォルトデザイン
まずは私のブログ(はてなブログPro、テーマはBrooklyn)でのpre/codeのデフォルトを紹介します。
ただの線で対象のコードが囲まれているのみです。
妙に行間も広いし、、正直見づらい。。
そこで今回紹介するカスタマイズを実行すると、
こんな感じになります！
それでは早速コピペで対応できるカスタマイズを紹介します。
はてなブログでpre/codeのデザインをカスタマイズしてみよう
はてなブログではお馴染みの
ダッシュボード→デザイン→カスタマイズ→デザインCSS
に下記コードをコピペします。
/* precodeデザイン */
pre{
padding:1em;
background-color:#696969;
color :#FFF;
}
code{
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}上記のコードで裏地の色(灰色：#696969)、文字の色(白：#FFF)やフォントを指定しています。
該当部分のコードを書き換えることでイメチェンも可能ですよ！
そして次はコードの行間の調整です。
/* precode行間 */
pre{
line-height: 70%;
}こちらのコードをコピペすることで、当ブログでの行間となります。
70％をお好きな数字に変更することで自分好みの行間に変更できますよ。
