着地することが大切

以前の記事（FlashDevelop）でソースコードをブログに載せようと思って
そのままペタっと貼り付けてみたのですが

１行ごとに空行が入っていて縦に間延びしていたり
本文とコードの表示が同じで区別がつきにくかったりと
すごく見づらい感じになってしまいました

他のブログとかでは枠で囲ってあったり
色を付けてあったりするのをよく見かけますが
このブログでもそういう表現ができるようにちょっとカスタムしてみました

スタイルシートの最後に以下のように追記します

pre {

  font-family: "Courier New",Courier,monospace;

  border: 1px solid #dddddd;

  background-color: #f9f9f9;

  color:#000070;

  width: 500px;

  overflow: auto;

  white-space: pre;

  padding: 2px 2px 2px 2px;

  margin-left: 10px;

}

pre code {

    margin: 0;

    padding-left: 5px;

    display: block;

}

pre br {

  display:  none;

}

ナガブロの場合は管理画面から
テンプレート＞使用中のテンプレートをカスタマイズ　と辿り
スタイルシートの最後尾に貼り付けるだけです

あとは実際に記事中にコードを貼り付けるときの記述方法ですが
<pre><code>と</code></pre>の間にコードを記述します
ただし

<pre><code>

コード１行目　：見た目が

コード２行目　：よくない記述例です

コード３行目　：１行目の前に空の行が入ってしまいます

</code></pre>

このように書いてしまうと１行目のコードと枠線の間に１行開いてしまいます
（実際に１行空いていますね)

これを回避するためには
以下のように<pre><code>タグのみで
改行しないように書くといい感じになります

<pre><code>コード１行目　

コード２行目　：この例だと１行目には空の行が入りません

コード３行目</code></pre>

これでコードを心置きなくブログにのせることができるようになりました


以下、ちょっと試行錯誤した点のメモです

このブログでは記事の自動改行の設定を有効にしているのですが
この機能を有効にしているために
<pre>タグの中で自分で入力した改行に加え
さらに自動で改行が追加されてしまい
コードが１行ずつ開いて間延びした感じになってしまってました

コード１行目　：こんな感じで



コード２行目　：縦に間延びしてしまいます



コード３行目　：読みにくいですね

これを回避したいのですが
自動改行の設定をoffにはしたくない。。
ということで

pre br {

  display:  none;

}

とすることで自動で追加された改行を表示しないようにしています


「コードをブログに貼り付けてるけどなんとなく見づらい」と
日ごろ感じているかた、いかがでしょうか？
（コードなんかブログに貼らない人のほうが圧倒的に多数派ですね。。）



※　なおスタイルシートを編集する際は
編集箇所によってはデザインを大きくくずしてしまう可能性もありますので
編集前の状態をバックアップしておく等、充分に注意して編集してくださいね
あくまでも自分の責任の範囲内でお試しください