ブログ運営

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

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

www.baconjapan.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; } }

 

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

 

それでは!

ABOUT ME
アバター
ベーコン
フリーデザイナー・ブロガーです。 /発想力系デザイナーなのでグラノーラ屋も始めました(4年目)/フリーランスで生き抜く方法を発信中。フリーランサー、ブロガー、「デザインを始めたい人」に向けてブログを書いています。/10万PV/2019年2月SBクリエイティブよりデザイン解説本出すよ ▼自己紹介記事はこちら ベーコンってどんな人? ▼最初に読んでほしい厳選記事! 初めてベーコンブログと言えばこの記事【ジャンル別の人気記事】 >>広告・レビュー依頼はこちら
人気記事

▼上質なもので生活が豊かになりました

▼強みを知ると少しだけ人生が楽になります

 

▼デザインがうまくなる本を厳選しました