この変換作業をやってくれる Blogtool という便利な Web サービスがあります。
ブログに表示したいソースコードを、この Blogtool のボックスに貼り付けて、ボタンをクリックすると、必要な変換をやってくれます。
さらに見やすくするために、表示したソースコードを枠で囲みたいと思って、色々検索したところ、hata さんの「文章を枠で囲む」を見つけました。
下記のコードを、テンプレートのスタイルシートの最後に貼り付けておくと、<pre><code> と </code></pre> で囲んだ部分に枠が付き、背景が淡いグレーで表示されます。
ちなみに、赤字部分は削除しました。幅を指定すると、テンプレートの表示がくずれるので。
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;
}
★ おさらい
ブログにソースコードをそのまま表示したい場合は:
1. スタイルシートに hata さんのコードを貼っておきます。
Blogger の場合は、[デザイン]-[HTML の編集]を開き、
]]>
</b:template-skin>
という行の前に挿入します。ここに貼っておけば、テンプレートを変更しない限り、有効です。背景画像を変更しても大丈夫。
2. ブログに貼りたいソースコードを Blogtool ページで変換します。
3. 変換したソースコードを <pre><code> と </code></pre> で囲んで投稿します。オシマイ。
0 件のコメント:
コメントを投稿