ALICE+サポート ユーザー助け合い掲示板 TOPページ ユーザー助け合い掲示板 プレビュー画面と実際の表示画面が違うのですが ユーザー助け合い掲示板 『プレビュー画面と実際の表示画面が違うのですが』へのコメント投稿 記事 3 へのレス:>>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;】を挿入しております。 ……の「罫線」って、小説本文の中で使う「――(ダッシュ、またはダーシとも言う)」のことだったりしますか? https://sprt.alicex.jp/support/88/ (三点リーダー「……」とダッシュ「───」について│助け合い掲示板) 上記はletter-spacingで字間を狭めなくても「――(ダッシュ)」を確実に一続きで表示する方法です。 (全然無関係だったらスルーしてください。 ただ、字間調整でダーシ間の余白をなくしても閲覧環境によってうまいこと繋がらない場合があるらしいので……) ▼うまく繋がらない例の参考 https://dokuhack.com/archives/408 (二倍ダーシ「――」スキマ問題! WEB上で綺麗に表示するためのベストな方法は? | Doku-hack -ドクハック-) ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>3 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート