アメブロでhtmlソースを書くのはsyntaxhighlighterよりpreタグでシンプルに

折り返し表示にする更新をしました。

アメブロでhtmlソースを表示するのをsyntaxhighlighterを使用していたが、safariでは長いソースの文章が一旦ページを読み込むまで改行されないレイアウトのまましばらくたって、トップページのヘッダー画像などは左寄りに小さく表示したままで、レイアウト崩れかなと思ってしまうことがある。。。


それで、こちらの行政書士@榎田

さんのコチラの記事

　を参考にして、シンプルなpreタグで表示させることにした


こうすることで、IE8はもちろん、safariブラウザでもレイアウトが崩れず、ユーザーに優しいのである




コードは

/* ■ Preタグ装飾■ */

pre{

font-family: "Courier New",Courier,monospace;

font-size: 1em;

color: #007000;

background-color: #fafafa;

border: solid 1px #bbbbbb;

line-height: 120%;

margin: 1em 0 0 0;

padding: 0.99em;

overflow-x: auto;

overflow-y: auto;

width: 580px;

white-space: pre-wrap;

white-space: -moz-pre-wrap;

white-space: -o-pre-wrap;

white-space: -pre-wrap;

word-wrap: break-word;

}

このコードをpre記述の部分と置換するだけです。。。


記事の書き方は

<pre><code>

--<ソースコードはコチラに書きます>--

</code></pre>