▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

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

f:id:bless-you:20161206073122j:plain

 

ブログの記事欄背景に色をつけたら、カスタマ記事でコピペ用のCSSコードが見えづらくなって困った▼・ェ・▼。

 

そしたら、よく見かける表示の仕方を教えてくれているブログを見つけたので、さっそく導入したよ!っていうお話しデスん。

 

 

 

前回のカスタマ記事の時のコト。

 

f:id:bless-you:20161206064307j:plain

 

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

 

そこで、ちょっと検索してみたらば、カスタマ記事をシェアしてくださるブログでよく見かける表示にさせることができる方法を教えてくれているブログを発見!!

 

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

 

まず、以下のコードを 設定 → 詳細設定 → 「headに要素を追加」 の分部に貼り付けます。

 

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

 

こんな感じ。f:id:bless-you:20161205042314j:plain

f:id:bless-you:20161206065302j:plain

 

 

次に、以下のコードを デザイン → カスタマイズ → ヘッダ「タイトル下」に貼り付けます。

 

<!-- ソースコード -->
<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%;に変更して文字を少し大きく表示することにしました。

 

 

ふふ。

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

 

 

 

本日の先生はコチラf:id:bless-you:20161205042314j:plain

tabiradio.hatenablog.com

 

先生ありがとうございました!

 

 

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

 

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

Thank you.

I love you.