原因と対処法を教えてください。ナノで夢小説のＨＰを作っている者です...

原因と対処法を教えてください。
ナノで夢小説のＨＰを作っている者です。
iPhoneで見てくださった方から「夢小説が全て縦書きになっていて読みにくい」というご指摘をいただきましたが、何が原因か分かりません。 iPhoneで確認したいのですが、私はiPhoneを持っていないため、実際にどのように写っているのか確認することができません。
また、ＰＣとdocomo携帯で確認したのですが、縦書き現象は確認できませんでした。

小説の設定は以下の通りです。

全体レイアウト
<pc><br /><br /></pc><nopc><nosoftbank><font size="1"></nosoftbank></nopc><imode><blockquote></imode>
<softbank><div style="margin:15px;"></softbank><br />#novel#<br /><softbank></div></softbank><imode></blockquote></imode><nopc><nosoftbank></font></nosoftbank></nopc></div><pc><br /><br /></pc>

表紙レイアウト
<div style="margin: 5em 10em 5em 10em;"><p style="text-align: left; line-height: 100%"><span style="color: #222222"><center><font size="5"><b>Novel</b></font><br />小説機能についてｆ</center><center><br />[<a href="#list_url#">我が、親愛なるー</a>]<br />ここから小説を読むことが出来ます。<br />注意書きや分岐点・ワンクッションにどうぞ。<br /><br />[<a href="#comment_url#">comment?</a>]<br /></center>

文章画面レイアウト
<span style="color:#ffffff">#title#<br /><hr color="#DDDDDD" size="1" /><div style="margin: 5em 10em 5em 20em;"><p style="text-align: left; line-height: 101%"><nopc><font size="2"color="#000000"></nopc>
<span style="color: #222222">#text#<br />

↑のどこがいけないのか、それともiphon側の問題なのか・・どなたか教えてください。よろしくお願いします！

4470日前

コメントする

質問者が選んだベストソリューション

【補足への回答】

iPhoneが<pc>と<nopc>のどちらに含まれるのかは、ナノの運営に問い合わせてみてください。
<div～>があった方がPCで見る時には見やすいので残したいと言う事ですが、つまりは画面の上下左右にある程度の余白を設けたいと言う事ですよね？
余白を設ける場合、単位をemで指定する事は基本的に殆ど無いと思います。
せめてpxにしてみては？

また、<div～>を削除した上で、表示内容を一つのブロック要素として囲み、内容を表示させる部分を、画面に対して何%にするか、と言った指定方法にしておけば、閲覧環境が変わっても、それぞれの画面サイズに合わせて表示部分が変動するので、50%とかにでもしない限りはPCでもiPhoneでも見やすいレイアウトにできると思いますよ。

-------

表紙画面レイアウトと文章画面レイアウトの

<div style="margin: 5em 10em 5em 10em;">

が、最大の原因だと思います。
これは「上下に５文字分、左右に１０文字分の余白を設ける」指定です。
閲覧環境によっては、左右の余白が広過ぎて、内容が１列になってしまい、それが縦書きと取れるのではないでしょうか。

全体レイアウトで使っている<blockquote>も、できればやめた方がいいかと…。
これは本来、引用文を示す場合に使用するものですが、特徴として閲覧環境によっては上下左右に余白も入ります。
これを全体レイアウトに使用していると言う事は、小説ページにも（一応imode限定の指定はされていますがiPhoneでも反映されてしまっている場合）左右に１０文字ずつ＋αの余白が入る事になります。
内容にもよりますが、iPhoneでの閲覧サイズとしては、左右の余白があり過ぎる気がします。

Yahoo!知恵袋 4456日前

コメントする