コピペで簡単！はてなブログにソースコードを貼る方法とCSSについて。

f:id:coizne:20170714165540j:plain:w350

ブログのカスタマイズについて掲載していますが、はてなブログでソースコードを記事に載せたいときに使う記述があるのですがそちらの説明になります。

ブログ記事にHTMLタグを使うと、タグなので普通にブラウザからは表示されないです。
これを表示させて見やすくすることと、コピペできるようにするのが目的になります。

CSSを変更する
タグの書き方
まとめ

CSSを変更する

初期設定だと、ブログの文章とコードが見分けづらく、目立ちにくいためスタイルを設定して見やすい表示に変更します。

事前にCSSに以下のソースを加えておきましょう。
「設定 > デザイン > {}デザインCSS」から以下を追記します。

/* ソースコードに色付 */
/* Hybrid Bright*/
.entry-content pre.code {
    background-color: #1D1F21;
    color: #C5C8C6;
    font-size:75%;
    border: solid 2px lightgray;  /* Base   */
    }
.synSpecial { color: #CC6666 } /* Red    */
.synType { color: #F0C674 } /* Yellow */
.synComment { color: #7D8C93 } /* Base   */
.synPreProc { color: #CB4b16 } /* Orange */
.synIdentifier { color: #81A2BE } /* Blue   */
.synConstant { color: #8ABEB7 } /* Cyan   */
.synStatement { color: #B5BD68 } /* Green  */

タグの書き方

CSS記述を追加したら次に記述の書き方になります。

はてなブログでは、表示したいソースを記載する際は、開始時に「 >|| 」と書いて、閉じるときに「 ||< 」のように書きます。
掲載したいソースを挟むようにしてタグを書くわけです。

するとこのようになります。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.share.share_count || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}

最初に追加したCSSのスタイルが効いて、ソースの部分だけ背景が黒く表示されてることがわかると思います。（CSSを設置していないと白背景なので見辛いです）

さらに、開始タグについては二本の縦棒の間に、言語名をいれることで各スタイルに色が付くようになります。

>|html| や >|javascript| や >|css|

といった感じで記述します。

すると先程と同じ記述が以下のように変わりました。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.share.share_count || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}