はてなブログの記事内ソースコード表示にSource Code Proを設定したよ！

ブログの記事欄背景に色をつけたら、

カスタマ記事でコピペ用のCSSコードが見えづらくなって困った▼・ｪ・▼。

そしたら、よく見かける表示の仕方を教えてくれているブログを見つけたので、

さっそく導入したよ！っていうお話しﾃﾞｽん。

前回のカスタマ記事の時のｺﾄ。

コピペ用のCSSコードを記載したんだけれども、なんだか目立たない。(｡･ˇ_ˇ･｡) ﾑｩ…

そこで、ちょっと検索してみたらば、

カスタマ記事をシェアしてくださるブログで

よく見かける表示にさせることができる方法を教えてくれているブログを発見！！

さっそく▼・ｪ・▼も導入することにしましたん。

まず、以下のコードを

設定 ▶ 詳細設定 ▶ 「headに要素を追加」 の分部に貼り付けます。

<!-- Webフォント Source Code Pro -->
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

こんな感じ。

次に、以下のコードを

デザイン ▶ カスタマイズ ▶ ヘッダ の 「タイトル下」に貼り付けます。

<!-- ソースコード -->
<style type="text/css">
  .entry-content pre,.entry-content code{
    font-family: "Source Code Pro", sans-serif;
    font-size: 80%;
    background-color: #333;
    color: #eee;
  }
</style>

で。

このままだと、背景が真っ黒。

▼・ｪ・▼のブログだと、真っ黒はちょっと強烈なので、

 background-color: #5a544b;

に変更して、少しばかり色を柔らかくしました。

そして、背景色が柔らかくなった分、文字がぼやけてしまうので、

 font-size: 90%;

に変更して文字を少し大きく表示することにしました。

ふふ。

ご満足！(๑•̀ㅂ•́)و✧

ってところで、今日はおしまい！

ﾟ＊｡.ღ ⊹⊱  ￡ονё ＆ βＬёｓｓ уｏц  ⊰⊹ ღ.｡＊ﾟ

Thank you.

I love you.