>>0
取り急ぎなのですが、
>>4 <head>に<!DOCTYPE html>は入れられないです
>>4 <head>の<!DOCTYPE html>とletter-spacingは削除してください。
↑ALICE+の編集画面では、『<!DOCTYPE html>』は入れて大丈夫です！
# なので、>>0『<!DOCTYPE html>』は消さずに入れておいてください。
ALICE+には、DOCTYPE宣言（『<!DOCTYPE html>』など）を入れるためだけの編集欄が用意されております。
前回私が書いていた、【HEAD編集】画面の〔□DOCTYPE宣言〕という項目がそれです。
（※言い換えると、この編集欄以外の場所に入れるのは、>>4さんのおっしゃるとおり、絶対駄目です）
━━━━━━━━━━
>>4
補足すると、今回の議題になっているALICE+の小説機能には、【HEAD編集】という編集画面が設けられています。
この【HEAD編集】画面には、〔□xml宣言〕〔□DOCTYPE宣言〕〔□HEAD間編集〕といった項目があり、各項目に編集欄があります。
>>4さんのおっしゃる『<head>～</head>』の間に挿入されるのは、〔□HEAD間編集〕に入力した内容のみとなります。
今回とは別の編集欄ですので、まったく問題ありません。
もちろん〔□DOCTYPE宣言〕の入力内容は、本番環境の（＝Web上に公開された）サイトページだと正しくHTML文書の先頭に挿入されます。
そして現在のALICE+では〔□DOCTYPE宣言〕編集欄に、デフォルトで『<!DOCTYPE html>』が挿入される仕様になっています。
だから最近ALICE+でサイトを作成した場合は、管理人が編集したりテンプレをDLしたり（※自動で各編集欄がテンプレ通りに上書きされる）しない限り、『<!DOCTYPE html>』の宣言が入ったサイトページになるはずなのです。
つまり、本番環境のサイトページはブラウザの《標準モード》で表示されます。
ですが、ALICE+の「プレビュー画面」「メンテナンス機能（ログイン中の管理人以外はサイトにアクセスできなくなる機能）を使って表示するサイトページ」ですと、
《互換モード》で表示されてしまうのです……。
▲参考（標準モードと互換モードについて│ホームページの作成に役立つ）
なんでプレビューなどでは表示モードが《互換モード》になってしまうかというと、“ DOCTYPE宣言より前に ”文字列（※）が挿入されてしまうからです。
*※…「プレビュー中です」とか「メンテ中なのでこのサイトページは現在管理人にしか見られない状態です」みたいな文言がALICE+側から自動で挿入されます。なぜかHTML文書の先頭に……。
HTML文書の先頭に書くべきDOCTYPE宣言が、この挿入文字列のせいで先頭に来なくなる
→DOCTYPE宣言（今回の場合『<!DOCTYPE html>』）が無効になり、プレビュー等の画面では《互換モード》で表示されてしまう……。
ということです。まとめると、
━ ━ ━ ━ ━ ━
>●プレビュー＆メンテ機能使用中のサイトページ
→ブラウザの《互換モード》で表示される
>●本番環境のサイトページ
→ブラウザの《標準モード》で表示される
━ ━ ━ ━ ━ ━
この表示モードの違いにより「プレビューと実際のサイトでの表示が違う」という今回の問題が起きていると考えられます。
読んだ感じでは十中八九これかと……。
そしてこの表示モードの違いで顕著に「表示が変わってしまう」かもしれないのが、CSSの文法ミス等です。
追加情報>>2でほぼ確信しましたが、おそらくmarginかpaddingの余白を指定する数値に不備がある（単位の付け忘れ・スペルミスなど）と考えられます。
互換モードと標準モードでの違いの一つに、
「 互換モードでは、単位のついてないサイズ関係の数値は、『px』単位のものとして扱う 」があるからです。
実験してみたら、『margin:3;』と書いたものが
*▼《互換モード》※プレビュー等
→marginが「3px」で計算され、「3px」の余白が表示される
*▼《標準モード》※本番環境
→数値が反映されないため、margin（余白）がゼロになる
……という結果になりました。今回の表示差異はこれが原因だと思います。
取り急ぎなのですが、
>>4 <head>に<!DOCTYPE html>は入れられないです
>>4 <head>の<!DOCTYPE html>とletter-spacingは削除してください。
↑ALICE+の編集画面では、『<!DOCTYPE html>』は入れて大丈夫です！
# なので、>>0『<!DOCTYPE html>』は消さずに入れておいてください。
ALICE+には、DOCTYPE宣言（『<!DOCTYPE html>』など）を入れるためだけの編集欄が用意されております。
前回私が書いていた、【HEAD編集】画面の〔□DOCTYPE宣言〕という項目がそれです。
（※言い換えると、この編集欄以外の場所に入れるのは、>>4さんのおっしゃるとおり、絶対駄目です）
━━━━━━━━━━
>>4
補足すると、今回の議題になっているALICE+の小説機能には、【HEAD編集】という編集画面が設けられています。
この【HEAD編集】画面には、〔□xml宣言〕〔□DOCTYPE宣言〕〔□HEAD間編集〕といった項目があり、各項目に編集欄があります。
>>4さんのおっしゃる『<head>～</head>』の間に挿入されるのは、〔□HEAD間編集〕に入力した内容のみとなります。
今回とは別の編集欄ですので、まったく問題ありません。
もちろん〔□DOCTYPE宣言〕の入力内容は、本番環境の（＝Web上に公開された）サイトページだと正しくHTML文書の先頭に挿入されます。
そして現在のALICE+では〔□DOCTYPE宣言〕編集欄に、デフォルトで『<!DOCTYPE html>』が挿入される仕様になっています。
だから最近ALICE+でサイトを作成した場合は、管理人が編集したりテンプレをDLしたり（※自動で各編集欄がテンプレ通りに上書きされる）しない限り、『<!DOCTYPE html>』の宣言が入ったサイトページになるはずなのです。
つまり、本番環境のサイトページはブラウザの《標準モード》で表示されます。
ですが、ALICE+の「プレビュー画面」「メンテナンス機能（ログイン中の管理人以外はサイトにアクセスできなくなる機能）を使って表示するサイトページ」ですと、
《互換モード》で表示されてしまうのです……。
標準モードと互換モードについて,(ホームページの作成に役立つ)
最近のインターネットエクスプローラー7(IE7)は、HTMLやスタイルシートを仕様通りに解釈してだんだんうまく表示できるようになってきています。これを標準モードと言います。 しかし、IE6以前のブラウザでは、仕様とは違った解釈で表示してしまうことが多くあります。(バグもあります)
as76.net▲参考（標準モードと互換モードについて│ホームページの作成に役立つ）
なんでプレビューなどでは表示モードが《互換モード》になってしまうかというと、“ DOCTYPE宣言より前に ”文字列（※）が挿入されてしまうからです。
*※…「プレビュー中です」とか「メンテ中なのでこのサイトページは現在管理人にしか見られない状態です」みたいな文言がALICE+側から自動で挿入されます。なぜかHTML文書の先頭に……。
HTML文書の先頭に書くべきDOCTYPE宣言が、この挿入文字列のせいで先頭に来なくなる
→DOCTYPE宣言（今回の場合『<!DOCTYPE html>』）が無効になり、プレビュー等の画面では《互換モード》で表示されてしまう……。
ということです。まとめると、
━ ━ ━ ━ ━ ━
>●プレビュー＆メンテ機能使用中のサイトページ
→ブラウザの《互換モード》で表示される
>●本番環境のサイトページ
→ブラウザの《標準モード》で表示される
━ ━ ━ ━ ━ ━
この表示モードの違いにより「プレビューと実際のサイトでの表示が違う」という今回の問題が起きていると考えられます。
読んだ感じでは十中八九これかと……。
そしてこの表示モードの違いで顕著に「表示が変わってしまう」かもしれないのが、CSSの文法ミス等です。
追加情報>>2でほぼ確信しましたが、おそらくmarginかpaddingの余白を指定する数値に不備がある（単位の付け忘れ・スペルミスなど）と考えられます。
互換モードと標準モードでの違いの一つに、
「 互換モードでは、単位のついてないサイズ関係の数値は、『px』単位のものとして扱う 」があるからです。
実験してみたら、『margin:3;』と書いたものが
*▼《互換モード》※プレビュー等
→marginが「3px」で計算され、「3px」の余白が表示される
*▼《標準モード》※本番環境
→数値が反映されないため、margin（余白）がゼロになる
……という結果になりました。今回の表示差異はこれが原因だと思います。
05/13 17:43
>>2
ここを利用していないので仕様はわかりませんが、まず<head>に<!DOCTYPE html>は入れられないです。
letter-spacingは文字間隔を調整するものなので、くっついて表示されてしまうのはそれが影響していると思います。
プレビュー画面と実際の画面で違うのは、おそらくスタイルシートが効いていないか、上書きされているかだと思います。
ページを見てみないと詳しい状況はわかりませんが、とりあえず<head>の<!DOCTYPE html>とletter-spacingは削除してください。
それから罫線にletter-spacingを直接指定してみてください。
【ブロックレベル】
<div style="letter-spacing: -0.1em">━━━━━</div>
【インライン】
<span style="letter-spacing: -0.1em">━━━━━</span>
もしくは
<div style="display: inline-block; letter-spacing: -0.1em">━━━━━</div>
ラインを引きたいのであれば、border-を使った方がいいとは思います。
ここを利用していないので仕様はわかりませんが、まず<head>に<!DOCTYPE html>は入れられないです。
letter-spacingは文字間隔を調整するものなので、くっついて表示されてしまうのはそれが影響していると思います。
プレビュー画面と実際の画面で違うのは、おそらくスタイルシートが効いていないか、上書きされているかだと思います。
ページを見てみないと詳しい状況はわかりませんが、とりあえず<head>の<!DOCTYPE html>とletter-spacingは削除してください。
それから罫線にletter-spacingを直接指定してみてください。
【ブロックレベル】
<div style="letter-spacing: -0.1em">━━━━━</div>
【インライン】
<span style="letter-spacing: -0.1em">━━━━━</span>
もしくは
<div style="display: inline-block; letter-spacing: -0.1em">━━━━━</div>
ラインを引きたいのであれば、border-を使った方がいいとは思います。
05/13 14:19
>>2 <a>タグで入れたリンクとリンクの隙間が詰まってしまう
その『隙間が詰まってしまう』のは、<a>リンク部分だけですか？
それから、リンク同士の間には何か入力していましたか？
半角スペースとか……。
それとも、スペースを入れているわけじゃない（※）けどプレビューでは隙間が理想通りに入ってる状態でしたか？
※）━━━━━━━━━━
<a href="○○">ページ1</a><a href="○○">ページ2</a><a href="○○">ページ3</a>
↓
ページ1 ページ2 ページ3
━━━━━━━━━━━━
もし↑のように
>『スペースを入れず<a>を並べているけど、プレビューではリンク同士の間にほどよい空白が入る』
という状態でしたら、やはりCSSに文法ミスがあると思われます。
この場合はCSSの、
* margin: ○○;
* padding: ○○;
という部分を探して確認してみてください。
（<a>タグだけ間隔がうまくいかない、ということなら、
* a{ ……: ○○; }
というリンクまわりの記述に問題箇所があるかもです）
「○○」のところが数字だけになっていて、単位が入っていない……という状態になったりしていませんか？
もしもそうなら、『px』などの単位を入れてください。
現状単位が抜けており、ブラウザ側の忖度で『○○px』と解釈してプレビューに表示している可能性が高いです。
（そして>>1で述べた理由により、実際のサイト上では忖度しない仕様になって数字が反映されなくなっているものと考えられる）
━ ━ ━ ━ ━
>>2 小説機能の【HEAD編集】＞〔 □DOCTYPE宣言 〕は最初から空っぽだった
あ～すみませんなるほど失念していました……！
たぶん【共通head間編集】に『<!DOCTYPE html>』が入ってて、それが適用されてしまってます。
（編集欄が空白の項目は、【共通head間編集】の内容が挿入される仕様）
つまり、やっぱり実際のサイト上では『<!DOCTYPE html>』が有効になっているのだと思われます。
前回の>>1では文法ミスのチェックができてないみたいです。本当にすみません……！！
以下、今度こそチェックできる方法です。
（上述の、詰まってしまう問題などが解決しているならチェックしなくてもいいです。ほかの文法ミスがないか確認するなら以下をやってみてください）
>小説機能の【HEAD編集】＞〔 □DOCTYPE宣言 〕編集欄を、以下だけにする
<!-- -->
↑編集欄が空っぽだと【共通head間編集】の内容が反映されちゃうので、編集欄に無害で無意味な文字列を入れて「『<!DOCTYPE html>』が入っていない状態」にします。
今度こそ、プレビューと実際のサイト上の表示が同一になるかと思います。
そしてこれで同一になるなら、文法にミスなどの問題があります。
#チェックが済んだら、『<!-- -->』は必ず消してください。
『 <!DOCTYPE html> 』は、【共通head間編集】に入っているのなら戻さなくても問題ないです（実際のサイトではどうせ挿入されるので）。
ただ入れておいたほうが安全っちゃ安全ですので、入れ直すのをお勧めします。
やっぱりお話を聞けば聞くほど、>>1で書いた『<!DOCTYPE html>』有無で表示に差異が出ているとしか思えないんですね……。
>メンテナンス機能を使っているときはプレビューと同じになっていた
メンテナンス状態の画面だと、『<!DOCTYPE html>』の前にメンテ関係の文言が入るみたいです（※）。
*※） <div style="background-color:#dc143c; text-align:center;padding:6px;border:1px solid #fff;"><font color="#ffffff">現在一時休止中です｡この画面は管理者にのみ表示されています｡</font></div><!DOCTYPE html>
すると>>1で紹介した過去スレのように『<!DOCTYPE html>』の宣言が無効になるので、プレビュー＆メンテナンス状態画面／実際のサイト上の表示で差異が生まれてしまう……と。
たぶんなのですが……その問題が起きているページ、
・かなり前に作成して放置していた
・テンプレをDLして作った
とかじゃないでしょうか？
有無が問題になっている『<!DOCTYPE html>』なんですが、これがデフォルトで挿入されるようになったのはここ数年内のことだったと記憶しています。
以前は無記入がデフォルトでした。
そして、デフォルト無記入時代に作ったテンプレやページは、今編集し始めても当然“無記入のまま”です。
・『<!DOCTYPE html>』無記入のテンプレをDLする
→『<!DOCTYPE html>』が無記入の小説機能になる
→小説機能の【HEAD編集】＞〔 □DOCTYPE宣言 〕が無記入の場合は、【共通head間編集】＞〔 □DOCTYPE宣言 〕の内容が挿入される
#→実際のサイトでは小説機能に『<!DOCTYPE html>』が挿入・適用される
で、一方プレビュー＆メンテナンス状態画面では、>>1で書いたとおり挿入された『<!DOCTYPE html>』が無効になるので、実際のサイトとは表示が異なってしまう……と。
読む限りやっぱりこれが原因だと思われます。
なおもちろん、サーバー側の不具合ではありません。
（『<!DOCTYPE html>』がプレビュー＆メンテナンス画面で無効になるのが不具合といえば不具合ですが……もうこれは仕様みたいなので）
━ ━ ━ ━ ━
蛇足かもですが、
>罫線を繋げたくて小説機能内のheadに【letter-spacing: -0.1px;】を挿入しております。
……の「罫線」って、小説本文の中で使う「――（ダッシュ、またはダーシとも言う）」のことだったりしますか？
（三点リーダー「……」とダッシュ「───」について│助け合い掲示板）
上記はletter-spacingで字間を狭めなくても「――（ダッシュ）」を確実に一続きで表示する方法です。
（全然無関係だったらスルーしてください。
ただ、字間調整でダーシ間の余白をなくしても閲覧環境によってうまいこと繋がらない場合があるらしいので……）
▼うまく繋がらない例の参考
（二倍ダーシ「――」スキマ問題！ WEB上で綺麗に表示するためのベストな方法は？ | Doku-hack -ドクハック-）
その『隙間が詰まってしまう』のは、<a>リンク部分だけですか？
それから、リンク同士の間には何か入力していましたか？
半角スペースとか……。
それとも、スペースを入れているわけじゃない（※）けどプレビューでは隙間が理想通りに入ってる状態でしたか？
※）━━━━━━━━━━
<a href="○○">ページ1</a><a href="○○">ページ2</a><a href="○○">ページ3</a>
↓
ページ1 ページ2 ページ3
━━━━━━━━━━━━
もし↑のように
>『スペースを入れず<a>を並べているけど、プレビューではリンク同士の間にほどよい空白が入る』
という状態でしたら、やはりCSSに文法ミスがあると思われます。
この場合はCSSの、
* margin: ○○;
* padding: ○○;
という部分を探して確認してみてください。
（<a>タグだけ間隔がうまくいかない、ということなら、
* a{ ……: ○○; }
というリンクまわりの記述に問題箇所があるかもです）
「○○」のところが数字だけになっていて、単位が入っていない……という状態になったりしていませんか？
もしもそうなら、『px』などの単位を入れてください。
現状単位が抜けており、ブラウザ側の忖度で『○○px』と解釈してプレビューに表示している可能性が高いです。
（そして>>1で述べた理由により、実際のサイト上では忖度しない仕様になって数字が反映されなくなっているものと考えられる）
━ ━ ━ ━ ━
>>2 小説機能の【HEAD編集】＞〔 □DOCTYPE宣言 〕は最初から空っぽだった
あ～すみませんなるほど失念していました……！
たぶん【共通head間編集】に『<!DOCTYPE html>』が入ってて、それが適用されてしまってます。
（編集欄が空白の項目は、【共通head間編集】の内容が挿入される仕様）
つまり、やっぱり実際のサイト上では『<!DOCTYPE html>』が有効になっているのだと思われます。
前回の>>1では文法ミスのチェックができてないみたいです。本当にすみません……！！
以下、今度こそチェックできる方法です。
（上述の、詰まってしまう問題などが解決しているならチェックしなくてもいいです。ほかの文法ミスがないか確認するなら以下をやってみてください）
>小説機能の【HEAD編集】＞〔 □DOCTYPE宣言 〕編集欄を、以下だけにする
<!-- -->
↑編集欄が空っぽだと【共通head間編集】の内容が反映されちゃうので、編集欄に無害で無意味な文字列を入れて「『<!DOCTYPE html>』が入っていない状態」にします。
今度こそ、プレビューと実際のサイト上の表示が同一になるかと思います。
そしてこれで同一になるなら、文法にミスなどの問題があります。
#チェックが済んだら、『<!-- -->』は必ず消してください。
『 <!DOCTYPE html> 』は、【共通head間編集】に入っているのなら戻さなくても問題ないです（実際のサイトではどうせ挿入されるので）。
ただ入れておいたほうが安全っちゃ安全ですので、入れ直すのをお勧めします。
やっぱりお話を聞けば聞くほど、>>1で書いた『<!DOCTYPE html>』有無で表示に差異が出ているとしか思えないんですね……。
>メンテナンス機能を使っているときはプレビューと同じになっていた
メンテナンス状態の画面だと、『<!DOCTYPE html>』の前にメンテ関係の文言が入るみたいです（※）。
*※） <div style="background-color:#dc143c; text-align:center;padding:6px;border:1px solid #fff;"><font color="#ffffff">現在一時休止中です｡この画面は管理者にのみ表示されています｡</font></div><!DOCTYPE html>
すると>>1で紹介した過去スレのように『<!DOCTYPE html>』の宣言が無効になるので、プレビュー＆メンテナンス状態画面／実際のサイト上の表示で差異が生まれてしまう……と。
たぶんなのですが……その問題が起きているページ、
・かなり前に作成して放置していた
・テンプレをDLして作った
とかじゃないでしょうか？
有無が問題になっている『<!DOCTYPE html>』なんですが、これがデフォルトで挿入されるようになったのはここ数年内のことだったと記憶しています。
以前は無記入がデフォルトでした。
そして、デフォルト無記入時代に作ったテンプレやページは、今編集し始めても当然“無記入のまま”です。
・『<!DOCTYPE html>』無記入のテンプレをDLする
→『<!DOCTYPE html>』が無記入の小説機能になる
→小説機能の【HEAD編集】＞〔 □DOCTYPE宣言 〕が無記入の場合は、【共通head間編集】＞〔 □DOCTYPE宣言 〕の内容が挿入される
#→実際のサイトでは小説機能に『<!DOCTYPE html>』が挿入・適用される
で、一方プレビュー＆メンテナンス状態画面では、>>1で書いたとおり挿入された『<!DOCTYPE html>』が無効になるので、実際のサイトとは表示が異なってしまう……と。
読む限りやっぱりこれが原因だと思われます。
なおもちろん、サーバー側の不具合ではありません。
（『<!DOCTYPE html>』がプレビュー＆メンテナンス画面で無効になるのが不具合といえば不具合ですが……もうこれは仕様みたいなので）
━ ━ ━ ━ ━
蛇足かもですが、
>罫線を繋げたくて小説機能内のheadに【letter-spacing: -0.1px;】を挿入しております。
……の「罫線」って、小説本文の中で使う「――（ダッシュ、またはダーシとも言う）」のことだったりしますか？
三点リーダー「……」とダッシュ「───」について - ALICE+サポート
sprt.alicex.jp（三点リーダー「……」とダッシュ「───」について│助け合い掲示板）
上記はletter-spacingで字間を狭めなくても「――（ダッシュ）」を確実に一続きで表示する方法です。
（全然無関係だったらスルーしてください。
ただ、字間調整でダーシ間の余白をなくしても閲覧環境によってうまいこと繋がらない場合があるらしいので……）
▼うまく繋がらない例の参考
二倍ダーシ「――」スキマ問題！ WEB上で綺麗に表示するためのベストな方法は？ | Doku-hack -ドクハック-
小説などでお馴染み「――」こと二倍ダーシ。しかしWEB上でそれをやろうとすると、みっともないスキマが出来てしまうことがあります。あのスキマはなんなのか？ なぜ発生したりしなかったりするのか？ 防ぐ方法は？ 考えます。
dokuhack.com（二倍ダーシ「――」スキマ問題！ WEB上で綺麗に表示するためのベストな方法は？ | Doku-hack -ドクハック-）
05/11 23:31
しち様
コメントありがとうございます。添付していただいたスレも拝見いたしました。
キャッシュクリアを試してみましたが、うまくいきませんでした。
また<!DOCTYPE html>なのですが、なぜかすでに消去した状態で編集していたみたいです。いつ消したかは覚えてないのですが……とりあえず入れ直して確認してみました。しかしやはりなにも変わりませんでした。文法ミスはない、ということになるのでしょうか……？
色々解決策を教えてくださってありがとうございます。
自分の質問を読み直していてかなり抽象的だなと思ったので補足します。
私は【表紙編集画面】に<a href>を用いて小説ページ一覧を直接表示させるようにしています。(以下のように)
1章
1 2 3 4 5
2章
1 2 3 4 5 …
しかしプレビュー画面ではこう表示されていたものが、
1章
12345
2章
12345……
実際はこうしてページ同士がくっついて表示されてしまう……という問題を解決したく、当スレを作成致しました。
また、こうした改装を行っている間はメンテナンス機能を使用していたのですが、その間は実際の画面でもプレビュー画面と同様に表示されていました。メンテナンス機能を解除し改めて確認しにいったらこうなっていて……。
さらに補足として、私は罫線を繋げたくて小説機能内のheadに【letter-spacing: -0.1px;】を挿入しております。
空白がなく、みっちりしてしまうのはこれのせいなのかなと考えているのですが、それならなぜプレビュー画面でもそうならないんでしょうか……ずっとみっちりしていてくれればこんな頭を悩ますこともなかったのですが……。
補足をしたものの謎を増やしてしまったような気がします。とりあえず今はプレビュー画面はあてにせず、実際の画面だけを考慮しながら編集することにして、<font color="#ffffff"> 1</font>をページとページの間に挟んで力技で余白を表示させています。(背景色は白のページなので)
もし
①プレビュー画面と実際の画面が違う理由
②メンテナンス中とメンテナンス解除後の表示が違うのはサーバーの不具合なのか
これらについてわかる方がいらっしゃいましたら、教えてくださると助かります。
しち様、お答えくださりありがとうございました。
コメントありがとうございます。添付していただいたスレも拝見いたしました。
キャッシュクリアを試してみましたが、うまくいきませんでした。
また<!DOCTYPE html>なのですが、なぜかすでに消去した状態で編集していたみたいです。いつ消したかは覚えてないのですが……とりあえず入れ直して確認してみました。しかしやはりなにも変わりませんでした。文法ミスはない、ということになるのでしょうか……？
色々解決策を教えてくださってありがとうございます。
自分の質問を読み直していてかなり抽象的だなと思ったので補足します。
私は【表紙編集画面】に<a href>を用いて小説ページ一覧を直接表示させるようにしています。(以下のように)
1章
1 2 3 4 5
2章
1 2 3 4 5 …
しかしプレビュー画面ではこう表示されていたものが、
1章
12345
2章
12345……
実際はこうしてページ同士がくっついて表示されてしまう……という問題を解決したく、当スレを作成致しました。
また、こうした改装を行っている間はメンテナンス機能を使用していたのですが、その間は実際の画面でもプレビュー画面と同様に表示されていました。メンテナンス機能を解除し改めて確認しにいったらこうなっていて……。
さらに補足として、私は罫線を繋げたくて小説機能内のheadに【letter-spacing: -0.1px;】を挿入しております。
空白がなく、みっちりしてしまうのはこれのせいなのかなと考えているのですが、それならなぜプレビュー画面でもそうならないんでしょうか……ずっとみっちりしていてくれればこんな頭を悩ますこともなかったのですが……。
補足をしたものの謎を増やしてしまったような気がします。とりあえず今はプレビュー画面はあてにせず、実際の画面だけを考慮しながら編集することにして、<font color="#ffffff"> 1</font>をページとページの間に挟んで力技で余白を表示させています。(背景色は白のページなので)
もし
①プレビュー画面と実際の画面が違う理由
②メンテナンス中とメンテナンス解除後の表示が違うのはサーバーの不具合なのか
これらについてわかる方がいらっしゃいましたら、教えてくださると助かります。
しち様、お答えくださりありがとうございました。
05/11 16:00
>>0
まずはキャッシュクリアを行ってみたり、作業するブラウザを変えてみたりしてください。
外部CSS（【CSS編集】または【CSSファイル編集】）を使っている場合は、キャッシュに残っている古いCSSファイルを適用してしまう場合があります。
この場合はキャッシュクリアで解決します。
ここまでで解決したらあとは読まなくてOKです。
解決しないのであれば試しに、
HEAD（【HEAD編集】または【head間編集】などと書かれている場所）の、
〔 □DOCTYPE宣言 〕の編集欄を、空っぽにしてみてください。
（おそらくデフォルトの『<!DOCTYPE html>』が入っているはずです。
編集してこれ以外の何かを入れてたとしても、とりあえず空っぽにしてみてください）
これをやって、もしもプレビューと実際のサイト上の表示が同一になったとしたら、
『 CSS・HTMLの書き方に問題がある（文法ミスなど） 』
が原因だと考えられます。
━━━━━━━━━━
#※〔□DOCTYPE宣言〕の編集欄には
<!DOCTYPE html>
#↑を入れ直しておいてください。
空欄のままでもサイトは表示できるのですが、デザイン崩れのもとになりかねないので、『<!DOCTYPE html>』を入れておくのをお勧めします。
（『<!DOCTYPE html> 宣言 なし』で検索すると、その理由やデザイン崩れの例が出てきます）
━━━━━━━━━━
上述のチェック方法でプレビュー／実際のサイト上の表示が特に変わらなかったら、今のところ他に原因が思いつきません……。
HEADによるチェック方法で表示が変わるようなら、その理由は以下↓
>プレビューと実際のサイト上の画面で表示が違う
たぶんですが、↓の過去スレと同じなのでは……と思われます。
（プレビュー画面と表示が違う│助け合い掲示板）
上記スレを要約すると、
『CSS・HTMLに文法ミスがある。
プレビュー画面だと、ブラウザ側の忖度によりミスをカバーしてくれる（結果的に、“意図通りの表示”になる）。
しかし本番のサイト上では忖度してもらえない仕様になるため、文法ミスのある部分がエラーとなってしまい、意図通りの表示ができない』
という話です。
上記スレと同じように、『CSS・HTMLの書き方に問題がある（文法ミスがある、HTML5仕様の文法になっていない※、など）』せいでプレビューと実際で表示が異なっている可能性はあると思います。
上記スレのスレ主さんもiPhoneをお使いだったので、これじゃないかなぁと。
*※：作成時期の古いテンプレだと、文法等も古い仕様（ガラケー向けなど）のままである、といった場合が多い。
>>>>解決するには？>>>>
その文法ミス等を見つけて正すしかないです。
「『<!DOCTYPE html>』を消しておけば意図通りの表示になる」状態かもしれませんが、これだと根本的な解決はできないので……。
（ブラウザなどの閲覧環境によって表示が異なってしまう恐れがある
＝サイト訪問者さんの閲覧環境によっては、意図しないデザインで表示される恐れがある）
これが原因だったらおそらくCSSに何かあるんじゃないかとは思うのですが、情報が少ないので憶測の域を出ません……。
まずはキャッシュクリアを行ってみたり、作業するブラウザを変えてみたりしてください。
外部CSS（【CSS編集】または【CSSファイル編集】）を使っている場合は、キャッシュに残っている古いCSSファイルを適用してしまう場合があります。
この場合はキャッシュクリアで解決します。
ここまでで解決したらあとは読まなくてOKです。
解決しないのであれば試しに、
HEAD（【HEAD編集】または【head間編集】などと書かれている場所）の、
〔 □DOCTYPE宣言 〕の編集欄を、空っぽにしてみてください。
（おそらくデフォルトの『<!DOCTYPE html>』が入っているはずです。
編集してこれ以外の何かを入れてたとしても、とりあえず空っぽにしてみてください）
これをやって、もしもプレビューと実際のサイト上の表示が同一になったとしたら、
『 CSS・HTMLの書き方に問題がある（文法ミスなど） 』
が原因だと考えられます。
━━━━━━━━━━
#※〔□DOCTYPE宣言〕の編集欄には
<!DOCTYPE html>
#↑を入れ直しておいてください。
空欄のままでもサイトは表示できるのですが、デザイン崩れのもとになりかねないので、『<!DOCTYPE html>』を入れておくのをお勧めします。
（『<!DOCTYPE html> 宣言 なし』で検索すると、その理由やデザイン崩れの例が出てきます）
━━━━━━━━━━
上述のチェック方法でプレビュー／実際のサイト上の表示が特に変わらなかったら、今のところ他に原因が思いつきません……。
HEADによるチェック方法で表示が変わるようなら、その理由は以下↓
>プレビューと実際のサイト上の画面で表示が違う
たぶんですが、↓の過去スレと同じなのでは……と思われます。
sprt.alicex.jp
（プレビュー画面と表示が違う│助け合い掲示板）
上記スレを要約すると、
『CSS・HTMLに文法ミスがある。
プレビュー画面だと、ブラウザ側の忖度によりミスをカバーしてくれる（結果的に、“意図通りの表示”になる）。
しかし本番のサイト上では忖度してもらえない仕様になるため、文法ミスのある部分がエラーとなってしまい、意図通りの表示ができない』
という話です。
上記スレと同じように、『CSS・HTMLの書き方に問題がある（文法ミスがある、HTML5仕様の文法になっていない※、など）』せいでプレビューと実際で表示が異なっている可能性はあると思います。
上記スレのスレ主さんもiPhoneをお使いだったので、これじゃないかなぁと。
*※：作成時期の古いテンプレだと、文法等も古い仕様（ガラケー向けなど）のままである、といった場合が多い。
>>>>解決するには？>>>>
その文法ミス等を見つけて正すしかないです。
「『<!DOCTYPE html>』を消しておけば意図通りの表示になる」状態かもしれませんが、これだと根本的な解決はできないので……。
（ブラウザなどの閲覧環境によって表示が異なってしまう恐れがある
＝サイト訪問者さんの閲覧環境によっては、意図しないデザインで表示される恐れがある）
これが原因だったらおそらくCSSに何かあるんじゃないかとは思うのですが、情報が少ないので憶測の域を出ません……。
05/11 01:38
1ページ中1ページ目
1163 view
残り書き込み 9994 件
人気スレ