凍結
0 ぷよ Chrome
もし既出、類似質問がありましたら申し訳御座いません。
サイト経営初心者なのでお手柔らかにお願い致します。

テンプレートを利用して小説を作成し、基本設定ではページを縦並びだった所、横並びにして表示を選択しました。
パソコンでのプレビュー表示は画像1枚目のようにちゃんと表示されているんですが、iphone表示だと画像2、3枚目のように何故か横にずっと突き抜けてしまいます。
iphone表示でもパソコンのように表示するにはどうすれば良いのでしょうか?

レイアウトで触った点は目次画面に行かないようにリンクを削除、また画面編集の方も全て消しました。
HEAD編集は全く理解していない為触っておりません。

どうぞお教え頂けましたら幸いです。よろしくお願いいたします。
02/29 13:39
返信
コメント投稿 検索
4 しち Firefox
>>1
たびたび訂正入れてすみませんm(_ _)m
対処法は前回の書き込みでOKなんですが、要因の説明に関し、誤解を招く表現がありました。
同問題でこのスレに辿り着く方もいらっしゃるかと思うので、訂正させてください……。(もちろん返信は不要です!)

>>1 (改行されない)問題は「テキストリンクも区切りの記号も半角英数字で、間にスペースがないこと」によるものなので、
と書いていたんですが、

#「 全角/半角に関係なく、途中にスペースを入れない『アルファベット』『数字』『記号』の連なりは“1単語”とみなされ、単語の途中では改行されなくなる 」
ことが、ボックスを突き抜けてしまう要因のようです。
前回の書き込みでは、「じゃあ全角英数字や全角記号で書けば解決するんだな」という誤解を招いてしまう文言になっておりました。

すみません、
*●区切りのスラッシュや英数字がすべて 全角
* (00/00/00/AA/AA/)
だったり、
*●全角 区切りスラッシュ+半角 英数字
* (00/00/AA/AA/)
だったとしても、“ 合間にスペースが入らなかったら ”ボックスをぶち抜きます。
(ただしブラウザによって挙動が異なり、Chromeではぶち抜かずにボックスの幅に合わせて改行され、Firefoxではぶち抜きました)

## ※対処法に関しては訂正なしです! ##
03/06 00:59
返信
3 ぷよ Chrome
>>2
丁寧なご説明誠に有難う御座います!確認しつつ修正していこうと思います。
ご回答誠に有難う御座いました!
03/02 22:28
返信
2 しち Firefox
>>1の訂正と補足です。

やり方説明とは関係ない部分なのですが、
>>1 多分現状だと〔一覧表示でのタイトルの左〕に『半角スラッシュ』を入れている状態かと思います。
のところ、〔一覧表示でのタイトルの 右 〕でした(恥)

あとついでの補足として、>>1でも書いた「CSSによって、単語の途中でも改行させる」設定方法について。
ALICE+さんのデフォルトCSSが有効だと、確かそのためのスタイル指定があったはずなんですが……。

デフォルトCSS有効状態でも、ChromeおよびFirefoxでは、改行法則に差違が出てました。
画像はそのスクショです。折角なので、ご参考までに……。
03/01 18:50
返信
1 しち SOV40
おそらくこの現象は、「01/02/03/ …… 26/」という一連のリンクをブラウザが「1つの英単語」として処理しているせいだと思います。
“間にスペースの入らない、半角英数字の連なり”だからそう解釈されてしまうのです。

1英単語、たとえば「 or 」とかが行末と行頭で「 o
r 」
なんて泣き別れになったら読み辛いですよね。それを避けるために、なるべく1単語の途中に改行が入らないよう、ブラウザ側が改行位置を調整してくれるわけです。

解決策としては……
>《A》CSSで、「必要に応じて単語の途中で改行する」設定にする
>《B》半角英数字の間に適宜スペースを入れる
楽なのは断然《B》です。

《A》の方は、現在お使いのCSSの状況(デフォルトCSSが有効か無効か・テンプレのCSSはどんなもので、どこに記述されているか)も分からないため説明が長くなりますし……多少CSSに慣れていないと難しいかと思いますので割愛します。

#《B》のやり方
多分現状だと〔一覧表示でのタイトルの左〕に『半角スラッシュ』を入れている状態かと思います。

問題は「テキストリンクも区切りの記号も半角英数字で、間にスペースがないこと」によるものなので、

*●半角数字(01などのリンク)と半角スラッシュの間に『スペース』を入れる

で解決します。
そのスペースの入れ方にも、2通りあります。
どちらの方法が良いかは、ぷよさんがどのようなページリストを作りたいかによります。

>《B−★》リストの体裁はすべて「01 / 02 / 03 / 04 /...」のみ
>《B−☆》リストは「01 / 02 / 03 / 04 /...」の体裁だけでなく、区切りのスラッシュを入れたくない場所もある

#━━《B−★》
【ページリストレイアウト編集】を使います。
ここでの設定は、同小説機能内のページリンクすべてに反映されます。
「〔一覧表示でのタイトルの左/右〕に 毎 回 同じ内容を記入する場合」に使うととても便利です。

※なおこれは「ページのリンク」にのみ適用されるレイアウトなので、「章タイトルリンク」には適用されません。

やり方は、
>【ページリストレイアウト編集】に

##left_text##<a href="#page_url#">#page_title#</a>##right_text## /

と入れる。
※一番後ろのスラッシュの前後に半角スペースを入れています。
『/』じゃなく、
『 / 』です。

↓例は「05」のページ編集にて〔一覧表示でのタイトルの右〕に『何かテキスト』を入れた場合の表示です。
*━━━━━━Web上の表示━━━━━━
 01 / 02 / 03 / 04 / 05何かテキスト /
*━━━━━━━━━━━━━━━━━
〔右〕に入れた文字は、区切りスラッシュの前に入ります。
〔左〕にも文字を入れると、「/ 左テキスト05右テキスト /」という感じで、リンクを挟み込むように挿入されます。

なお、新着時の表示(newマーク)もすべてのリンクにつけたい場合は、

##left_text##<a href="#page_url#">#page_title#</a>#new###right_text## /

といった形にすればよいかと。
新着時の表示独自タグ(#new#)を入れただけです。
*━━━━━━Web上の表示━━━━━━
 01 / 02 / 03 / 04 / 05new何かテキスト /
*━━━━━━━━━━━━━━━━━
という順番で表示されます。

newや〔一覧表示でのタイトルの右/左〕周りのデザインに関しては、今回の問題とはまた別の話題になるので割愛します。
こだわりたくなったら【タグ・デザイン掲示板】の方で相談されるとよいかと思います。

上例の「『05何かテキスト』部分、リンクと〔右〕テキストの間に半角スペースとか入れたいな……」という場合に関しては、【ページリストレイアウト編集】を弄るのではなく、次で説明する、
「〔一覧表示でのタイトルの右〕に空白を入れたいときのやり方」
を参考にしてください。

#━━《B−☆》
リンク後ろに区切りスラッシュを入れたいページの〔一覧表示でのタイトルの右〕に、

&ensp;/&ensp;

と入れる。
なおこの「 &ensp; 」というのは、「“ n ”と同じ幅の空白」を意味する文字実体参照、というものです。
とりあえず、空白文字、と捉えてください。

〔一覧表示でのタイトルの右・左〕ではキーボードで普通に打った文頭・文末の半角スペースが消えてしまうため、この文字実体参照というものを使って対応します。
※『xxx xxx xxx』みたいに、文中に入れる半角スペースは消えたりせずWeb上に反映されますのでご安心ください。

*Web上での表示は『リンク / 』というふうになります。

(ちなみに空白文字の実体参照で特によく使われる「&nbsp;」は、「挿入した箇所の前後の改行を禁止する空白文字」です。今回の例でこれを使ってしまうと当然、改行されずにリストがボックスを突き抜けてしまいます。ので、今回は使用に適しません)

毎回入れるのは大変ですが、「区切りスラッシュを使いたくないときもある」ならこちらの方法で対応するのが結局一番楽です。
02/29 19:52
返信