長いログの引用

ログを引用することは今ではほとんどない。しかし、昔のログでは以下のような長いログが多かった。
パソコンではこれをそのまま引用しても大した問題は生じない。

しかし、これをスマホのような狭い画面で引用するとレイアウトがガタガタになる。
自動的に適当な位置で改行されずに、横に長い文字列として出てきてしまう。スマホの画面をはみ出して表示される。
今ではこういう場合の表示は、そのまま表示せず短い「加工ログ」として表示することによって、その問題を回避している。

blockquoteタグ
単純なblockquoteタグだけでは次のようになる。

121.1.191.84 - - [22/Jun/2014:13:42:31 +0900] "GET /potato/ipc/ipc_0017.html HTTP/1.1" 200 3473 "http://search.fenrir-inc.com/?q=excel+VBA+16%E9%80%B2%E6%96%87%E5%AD%97%E5%88%97%E3%80%80%E2%86%92%E3%80%80%E6%96%87%E5%AD%97&hl=ja&safe=off&lr=all&channel=sleipnir_3_w&span=" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 Sleipnir/4.3.2"
182.250.243.194 - - [22/Jun/2014:17:51:28 +0900] "GET /potato/dat6/jw1_4001.html HTTP/1.1" 200 4089 "http://search.yahoo.co.jp/search?p=%E3%82%A8%E3%82%AD%E3%83%8E%E3%82%B3%E3%83%83%E3%82%AF%E3%82%B9+%E5%86%86%E5%B1%B1%E5%8B%95%E7%89%A9%E9%81%93%E6%96%B0&ei=UTF-8&fr=applep1&pcarrier=KDDI&pmcc=440&pmnc=50" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A525 Safari/8536.25"

この場合、意味の塊ごとに適当な位置で明示的に改行(br)を入れてもうまくいかない。

121.1.191.84 - - [22/Jun/2014:13:42:31 +0900]
"GET /potato/ipc/ipc_0017.html HTTP/1.1" 200 3473 "http://search.fenrir-inc.com/?q=
excel+VBA+16%E9%80%B2%E6%96%87%E5%AD%97%E5%88%97%E3%80%80%E2%86%92%E3%80%80%E6%96%87%E5%AD%97
&hl=ja&safe=off&lr=all&channel=sleipnir_3_w&span="
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 Sleipnir/4.3.2"
182.250.243.194 - - [22/Jun/2014:17:51:28 +0900]
"GET /potato/dat6/jw1_4001.html HTTP/1.1" 200 4089 "http://search.yahoo.co.jp/search?p=
%E3%82%A8%E3%82%AD%E3%83%8E%E3%82%B3%E3%83%83%E3%82%AF%E3%82%B9+%E5%86%86%E5%B1%B1%E5%8B%95%E7%89%A9%E9%81%93%E6%96%B0
&ei=UTF-8&fr=applep1&pcarrier=KDDI&pmcc=440&pmnc=50"
"Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A525 Safari/8536.25"

divタグ+bquスタイル
これにしても上と大差がない。

121.1.191.84 - - [22/Jun/2014:13:42:31 +0900] "GET /potato/ipc/ipc_0017.html HTTP/1.1" 200 3473 "http://search.fenrir-inc.com/?q=excel+VBA+16%E9%80%B2%E6%96%87%E5%AD%97%E5%88%97%E3%80%80%E2%86%92%E3%80%80%E6%96%87%E5%AD%97&hl=ja&safe=off&lr=all&channel=sleipnir_3_w&span=" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 Sleipnir/4.3.2"
182.250.243.194 - - [22/Jun/2014:17:51:28 +0900] "GET /potato/dat6/jw1_4001.html HTTP/1.1" 200 4089 "http://search.yahoo.co.jp/search?p=%E3%82%A8%E3%82%AD%E3%83%8E%E3%82%B3%E3%83%83%E3%82%AF%E3%82%B9+%E5%86%86%E5%B1%B1%E5%8B%95%E7%89%A9%E9%81%93%E6%96%B0&ei=UTF-8&fr=applep1&pcarrier=KDDI&pmcc=440&pmnc=50" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A525 Safari/8536.25"

preタグ
単純なpreタグだけでは次のようになる。
ただし、white-space:pre-wrap;を設定している。
これも大差がない。


121.1.191.84 - - [22/Jun/2014:13:42:31 +0900] "GET /potato/ipc/ipc_0017.html HTTP/1.1" 200 3473 "http://search.fenrir-inc.com/?q=excel+VBA+16%E9%80%B2%E6%96%87%E5%AD%97%E5%88%97%E3%80%80%E2%86%92%E3%80%80%E6%96%87%E5%AD%97&hl=ja&safe=off&lr=all&channel=sleipnir_3_w&span=" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 Sleipnir/4.3.2"
182.250.243.194 - - [22/Jun/2014:17:51:28 +0900] "GET /potato/dat6/jw1_4001.html HTTP/1.1" 200 4089 "http://search.yahoo.co.jp/search?p=%E3%82%A8%E3%82%AD%E3%83%8E%E3%82%B3%E3%83%83%E3%82%AF%E3%82%B9+%E5%86%86%E5%B1%B1%E5%8B%95%E7%89%A9%E9%81%93%E6%96%B0&ei=UTF-8&fr=applep1&pcarrier=KDDI&pmcc=440&pmnc=50" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A525 Safari/8536.25"

問題点
以上、いずれの場合もうまくいかない。


画像にするパターン

こういうパターンにするのはどうか。
すなわち、パソコンで表示した画面のキャプチャー画像を使うだけである。
このバターンにする場合は画像に枠(class="wa")はつけないほうがいい。

ログ画像