Hatena::ブログ(Diary)

玉虫色に染まれ! このページをアンテナに追加 RSSフィード

2008-03-23

preのテキストがはみださないようにする

以前使用していたブログでもそうだったんですが、はてなの、このテンプレートデザインでも <pre> 要素内の長い行がはみ出してしまって、まともに読めなくなってしまうようですね。

私がpreで括るのはプログラムのソースなどなので、勝手に改行されるのはあまり嬉しくありません。ここでは、スクロールバーを使ったインラインフレーム風の表記になるように修正してみました。

といっても、処置は簡単で、「デザイン編集」の「詳細」にある「スタイルシート」の枠に以下の記述を追加するだけです。

pre {
  overflow: auto;
  border: 2px inset;
  padding: 3px;
}

ポイントは、overflow属性で auto を指定することにあります。border と padding は好みで適当に指定して良いですが、この例のように枠を付けるか背景色を変えるかしないと、スクロールバーだけが浮かんで見えて、どの範囲がスクロールするのかわかりにくくなります。