今（更）やる夫スレを作る環境について-スマートフォン対応まとめブログ編-
というわけで宿題？だったまとめブログのスマートフォン対応。
後ろ向きにクラウンチングスタート体勢で逃げる気満々だったのですが、なんと解決してしまったのでご報告しまする。
■共用テンプレート「ascii_art_blog_sp」
はい、人様の優しさに乗っかるだけで生きてます。
終わり！閉廷！というところですが、細かい点の補足を一応しましょう。
FC2のテンプレート設定でスマートフォン用、共有テンプレートの中にそれはあります。
YaruoRSS氏制作の「ascii_art_blog_sp」です。
スマートフォンのAA表記に特化したもので、それ以外は非常にシンプル。
このテンプレートを適用するだけでAA関連の設定は全てOK！
・・・と言いたいところですが、ここからつまづきポイントがありますので解説をば。
■スマートフォン版の表示設定
テンプレートを適用してもAAがずれる・・・。
というよりはPC版画面のままでスマートフォン表示に移行しない。
恐らくそれはスマートフォン版の表示設定がされていないためと思われます（自分もしばらく気づかず、１敗・・・）。
設定関連 → 環境設定 → ブログの設定
のページの中断の地味なところにそれは存在します。
デフォルトではこれが無効になってますので有効にすればOK。
以前は設定変更の反映に時間がかかる等、適当なことをほざいて申し訳ありませんでした。
■AAズレ問題
スマートフォン用ページが設定できたわけですが、次なる課題はAAズレ。
テンプレートを設定しただけではやる夫スレのような大型AAは改行によりズレてしまいます。
そこで役に立つのが紅鮭炊き出し隊氏による設定関連の補足です。
以下リンクは横幅の設定方法を記載しており、これを適用することで改行ズレを対策することができます。
なお前項であるその１ではフォント設定を扱っていますが、これは前述のテンプレートを適用したことにより設定済み状態です。
■具体的な変更点
以下に共有テンプレートから変更した点だけまとめておきます。
なお当方、特にHTMLの知識があるわけではないため的はずれな部分もあるかと思いますが、一応これやれば見れる状態にはなったよなメモです。
以下width=1200pxを５箇所、修正or追記しています。
これは横幅を設定（実施的に拡張）しているものです。
横幅が足りない場合は1200をもっと大きい数字にしてください。
①
<html>
<head>
<meta charset="<%template_charset>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1200px, user-scalable=1" />
②
html {
background-color: white;
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 1200px;
overflow-x: hidden;
overflow-y: scroll;
text-rendering: optimizeLegibility;
text-size-adjust: 100%; }
③
div.entry > div.entry_body {
border: 1px solid #999999;
padding: 1em;
width:1200px; }
④、⑤
div.entry_body {
font-family: "ＭＳ Ｐゴシック", "Saitamaar", sans-serif;
font-size: 16px;
line-height: 18px;
overflow-x: scroll;
width:1200px;
}
div.entry_body pre {
font-family: "ＭＳ Ｐゴシック", "Saitamaar", sans-serif;
font-size: 16px;
line-height: 18px;
width:1200px; }
■結論
というわけでスマートフォン対応に成功しました。
触れてみますとまぁ課題はあり、
・記事本体の左横が白紙スペースになっており、ほんとはなくしたい
・読み込みが遅く、途中でスクロールが止まる
ただ後者は大容量の文字情報で、かつフォントダウンロード等もやっているようなので仕様ということかもしませんが。
まぁまとめブログとは言わずとも、ブログでAAを使用したい場合のスマートフォン側設定にも（多分）使えるのでご参考までに。