2012年3月28日 更新日：2020/02/23

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

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

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


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

さんのコチラの記事

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


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




コードは

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

/* ■ 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記述の部分と置換するだけです。。。


記事の書き方は

1 2 3 4 5

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