『アメーバブログで文章を折り返さずそのまま表示する』

アメブロでプログラムソースをそのまま公開したいと思いまして、記事の編集画面にコピペしたんですが、どうも思うようにいきません。

意図しないところで折り返しが入ったり、TABやスペースが反映されずに表示されてしまいます。

これを解決する方法をググっても出てこなかったのでスタイルシートを使って自分でなんとかしてみました。

記事の編集時に、「HTMLタグを表示」をクリック、以下を入力します。

<pre style="overflow: auto; overflow-x:scroll; width: 100%; background-color: #F0F0F0">
ここにソースをコピペ
</pre>

必要ならこれに color: #FF0000; だとか指定すれば文字色が赤になったりします。

今のところこれで満足していますが、もっと良い方法があるのでしたら教えていただけると幸いです。

【参考URL】

---

【2008.08.08追記】

この記事を受けて、せっかくCSS化するなら.cssファイルに書いてしまえばいいじゃないかという記事を書いて下さった『Web Programmer Closeβ』のsatooさん、ありがとうございます。

CSSを直接編集できるデザインを使っている場合はそこに記述すればOKです。

また直接編集できなくても、サイドバーのフリープラグインが左側にあるデザインの場合、プラグイン中に書けばOKです。要はpreタグより前に該当cssが読み込まれれば良いのです。

<style type="text/css">
.subContents pre {
    overflow: auto;
    overflow-x:scroll;
    width: 100%;
    background-color: #F0F0F0;
}
</style>

このサイトでは上記CSSをフリープラグイン設定に記述しています。

これで<pre></pre>を書くだけで良くなり、すごく楽になりました。

とんでもブログ～プログラマのWeb開発メモ（PHP, CSS, JavaScript）