読者です 読者をやめる 読者になる 読者になる

はてなブログでソースコード見やすく貼る方法【スクロールバー付き】

ブログ運営
スポンサーリンク

先日はじめてソースコード載せてみました。 

bacon.hatenablog.com

 

ソースコードを説明するのは難しいね。 

はてなで、ソースコードを貼る方法

はてな記法モード」で書く、などいろいろ方法はありますが、スクロールバーを付ける方法を紹介します。

 

▼コードはpreとcodeタグで囲む

こんな感じです

f:id:rororororo:20160104153211p:plain

preタグとcodeタグで囲んでいきます。 

するとぼくのテンプレではこうなった! 

黒い… 長い・・・ 

f:id:rororororo:20160104152358p:plain

 

これを縦スクロールを入れて、あと背景色も変えていきます

デザインのcssに下記を追加します。


pre,code{
   font-size: 85%;
   color:#000;
   background:#fffce3;
   max-height: 300px;
   white-space: pre;
   overflow: auto;
}

下のソースは長いですが、縦のサイズは300pxでスクロールバーが表示されました。 また色も、黒はかっこいいけど圧迫感と、「この記事難しい・・・」感がでてしまうのと思ったので優しい色にしました。


@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); #cssmenu { background: #aaa; width: auto; margin-bottom: 0px ; } #cssmenu ul { list-style: none; margin: 0; padding: 0; line-height: 1; display: block; zoom: 1; } #cssmenu ul:after { content: \\" \\"; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #cssmenu ul li { display: inline-block; padding: 0; margin: 0; } #cssmenu.align-right ul li { float: right; } #cssmenu.align-center ul { text-align: center; } #cssmenu ul li a { color: #ffffff; text-decoration: none; display: block; padding: 15px 25px; font-family: \\\'Open Sans\\\', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 14px; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; } #cssmenu ul li a:hover { color: #333333; } #cssmenu ul li a:hover:before { width: 100%; } #cssmenu ul li a:after { content: \\"\\"; display: block; position: absolute; right: -3px; top: 19px; height: 6px; width: 6px; background: #ffffff; opacity: .5; } #cssmenu ul li a:before { content: \\"\\"; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #333333; -webkit-transition: width .25s; -moz-transition: width .25s; -ms-transition: width .25s; -o-transition: width .25s; transition: width .25s; } #cssmenu ul li.last > a:after, #cssmenu ul li:last-child > a:after { display: none; } #cssmenu ul li.active a { color: #333333; } #cssmenu ul li.active a:before { width: 100%; } #cssmenu.align-right li.last > a:after, #cssmenu.align-right li:last-child > a:after { display: block; } #cssmenu.align-right li:first-child a:after { display: none; } @media screen and (max-width: 768px) { #cssmenu ul li { float: none; display: block; } #cssmenu ul li a { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #999; } #cssmenu ul li.last > a, #cssmenu ul li:last-child > a { border: 0; } #cssmenu ul li a:after { display: none; } #cssmenu ul li a:before { display: none; } }

 

 以上、はてなブログでソースコードを見やすく貼る方法でした。コピペしてもらうものを長く見せる必要はないので、スクロールバーがあると便利です。

それでは!