ブログを見やすくする：ソースコードを見やすくカスタマイズ ～<pre><code>タグ～
これまでブログの見た目には無頓着だった私ですが、ブログの見やすさにも少し気を配ったほうが良いという声が聞こえた（気がした）ので、今回からちょっとずつカスタマイズしてみたいと思います。
まず、今更ですが、ブログに掲載するソースコードを見やすくしてみようということで<pre><code>タグを使ってみます。
やり方は簡単。HTML編集モードで、ソースコードを<pre><code>タグの中に記載するだけです。
<pre><code>ここにソースコードを記載する</pre></code>
<code>：プログラムのソースコードであることを示す。<code>タグで囲まれた部分は等幅フォントで表示される。
<pre>：インデントや改行をそのまま再現して表示する。
ただし、このままでは、ブログのテーマで設定された背景色・文字色になってしまうので、それが気に入らなければ、<pre>タグのスタイルを変更しましょう。
例えばこんな感じ
<pre style="font-size: 130%; color: #666699; background-color: #fcf4fe;"><code></code></pre>font-size：フォントの大きさを変更します。
color：文字色を変更します。
background-color：背景色を変更します。
色の値が分からない場合は、前回、エクセルで色を確認しつつ16進数を取得するプログラムを作ってみたので参考にして下さい。
上記のようにHTML内のタグごとにCSSを書いていく方法を、「インラインスタイル」と呼びます。
打って変わって、ブログ内のすべての<pre>タグに同じCSSを適用したい場合は、デザイン→カスタマイズ→デザインCSSを選択し、適用したいCSSを追記します。
外部スタイルシートの書き方はこんな感じ
pre {
font-size: 130%;
color: #2F4F4F;
background-color: #F5F5F5;
}ここで注意するのは最初から書いてあるコード（下の画像では1行目～7行目）は消さずに、8行目以降に追記していきます。最初から書いてあるコードはテーマごとのスタイルを反映するものです。
このように同じ要素すべてに一括でCSSを適用する方法を、「外部スタイルシート」と呼びます。
CSSは後に書かれた記述が優先されるため、この場合はテーマCSSよりも、追記されたCSSのほうが優先されます。さらにインラインスタイルが記述されている場合は、インラインスタイルが優先されます。
優先順位
１：インラインスタイル
２：外部スタイルシート
３：テーマで設定されたスタイル（厳密にはこれも外部スタイルシート）
この考え方は、はてなブログでなくとも共通だと思います。
さて、<pre><code>タグについて紹介しましたが、
これだけでも、ソースコードを無造作に貼り付けるよりは見やすくなりますね。（自分で書いていて耳が痛い･･･）
