2011年10月05日

preタグに背景色を設定した

先日ブログのテーマを色々と試していたら、元に戻せなくなってしまい現在のものに落ち着いた。
コマンドラインでの操作などは"pre"タグで記述しているが、背景色があったほうが読みやすく感じたので設定を行った。

■スタイルシートの変更
Seesaaブログのヘルプを参考に、「デザイン」->「デザイン一覧」->「利用しているテーマ」をクリックして編集画面で、以下を追記した。
pre {
overflow: auto;
white-space: normal;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
border:1px solid #ccc;
padding:5px;
margin:10px;
background-color:#e7ebff;
}


当初は、「Seesaaブログにコードを貼り付けるための設定」などを参考に"pre"タグの中に"code"タグを入れて、"code"タグに設定を試みたが、各行に対して枠線などがついてしまったのでやめた。
「改行を<br />タグに変換しない」に設定を変更すればいけるのかもしれない。しかし、他の部分で手で改行を入れるのは面倒だ。
ちなみにborderやpaddingは、このテーマのblockquoteにあわせている。また折り返し設定は以前も設定なども念のために入れた。
posted by 端っこなひと at 04:40| Comment(0) | TrackBack(0) | Webデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/228802151

この記事へのトラックバック