凍結
0 Anonymous SO-54C
お借りしているテンプレートに文章の字下げをしたくて

p{
text-indent: 1em;
}

を追加したのですが、いざプレビューで見てみると字下げと一緒に改行もしてしまって文章と文章の間に一行分の空白ができてしまいます。

▽理想の文章(○が空白とします)
あいうえお
○かきくけこ
さしすせそ

▽実際の文章
あいうえお

○かきくけこ
さしすせそ

ネットで調べたものをhtmlにただ貼り付けて、文章を打つページで<p>を入れて入力しているだけなので何がいけなかったのかわかりません。
説明も下手ですみません…わかる方がいましたら教えていただけると助かります。
01/02 01:39
返信
コメント投稿 検索
4 しち SOG03
>>2

>>3より先にこちらのレスからご確認ください。

試しに以下を【小説ページ編集】にそのままコピペしてみてもらえますか?
━━━━━━━━━━

(1)<p>〜</p>の前後に改行を入れない
あいうえお<p>かきくけこ</p>さしすせそ

(2)閉じタグ</p>の直後には改行を入れない
あいうえお
<p>かきくけこ</p>さしすせそ

(3)閉じタグ</p>を省略し、『<p>あいうえお…』の形で書いていく
<p>あいうえお
<p>かきくけこ
<p>さしすせそ

━━━━━━━━━━
↓のようにプレビューされるはずです。
(_=字下げ)
━━━━━━━━━━

* (1)<p>〜</p>の前後に改行を入れない
* あいうえお
* _かきくけこ
* さしすせそ

* (2)閉じタグ</p>の直後には改行を入れない
* あいうえお
* _かきくけこ
* さしすせそ

* (3)閉じタグ</p>を省略し、『<p>あいうえお…』の形で書いていく
* _あいうえお
* _かきくけこ
* _さしすせそ

━━━━━━━━━━

これで余計な空白行がなくなるのでしたら、やはり原因は
● 自動改行“する”設定
● HTML(【小説ページ編集】の〔本文〕入力欄)の書き方
にあります。

【基本設定】で〔本文の改行を<br>に変換〕を“する”になっているのなら、
>>1で書いたとおり、小説本文は『自動改行“する”設定になっている』状態です。
(【文章画面編集】で自動改行“しない”になっていても、小説本文の自動改行設定は【基本設定】の自動改行“する”が適用されます)

なお、スタイルシート(<style type="text/css">〜</style>内の記述)のほうは、>>2を見る限り問題ありません。

念のためなんですが、>>2の「<link href=…><style type="text/css">〜</style>」の記述は、
【HEAD編集】内の〔□HEAD間編集〕に書いている内容ですね?
※万一HEAD間以外に書いているなら大問題なので、〔□HEAD間編集〕へ移動させてください。


#🟥 余白行がそれでも発生した場合
>1️⃣【CSSファイル編集】で、
> 〔使用するCSSファイル〕項目を“下記の内容のCSSを適用”にする

>2️⃣もし〔[スマホ用]CSS編集〕および〔[PC用]CSS編集〕に何か記述されていたら、
> その記述内容をコピペで教えてください
*(空欄でしたらそのままでOKです)

>3️⃣問題の余白行が入る【小説ページ編集】〔本文〕入力欄の内容を教えてください

2️⃣:『トップページのCSSファイル』か『この小説機能のCSSファイル』で<p>〜</p>要素の余白を指定されていると考えられるので、
それらの影響を消すようにします。

3️⃣:HTMLの書き方のほうに問題があるかもしれないので、<p>や改行を実際どう書いているのか確認させてください。


#🟥 余白行が発生しなくなった場合
結局(1)〜(3)のどれで書けばいいの?というと、>>0さんが<p>〜</p>をどうどうやって使っていくのかによります。
以下、各方法の特徴と留意点。

>>🔷(1)
🔹一番手堅い(余計な空白行が生じづらい)
🔹<p>〜</p>をそう何回も使わないなら、この書き方が確実
🔹ただし<p>〜</p>をたくさん使う場合は、入力欄内テキストがつらつら続いて読みづらくなる(改行による整形ができないので…)

>>🔷(2)
🔹閉じタグ(</○○>)の直後に改行しないよう気をつけるだけでいい
*※閉じタグ:</p>だけでなく、</div>、</h1> etc... が対象。とりあえず「</○○>の直後は改行しない」と考えてよいです
🔹<p>〜</p>をたくさん使う場合は、やはり入力欄内テキストが読みづらくなる

>>🔷(3)
『</p>の省略』は、“条件を満たせば”使用できます。
ただその“条件”というのが、HTMLにある程度慣れていないと難しく……。
▼参考
p要素/HTMLタグ - ホームページ入門サイト

p要素/HTMLタグ - ホームページ入門サイト

HTMLのp要素について説明したページです。p要素は、段落を示します。

beginners-hp.com

ようは、「特定の“条件”下で</p>は自動的に補完されるから、省略できる」ということです。

*⚠️『閉じタグ</○○>の省略』はどんなHTMLタグでも行えるものではありません。
*とりあえず「</p>は、条件付きで省略ができる」と考えてください。

この“条件”を理解してないと、</p>がどこに補完されるか分からない(=予期せぬ部分まで『<p>〜</p>』に含まれる事態が起こりうる)ため、
以下に当てはまるなら使用してみてください。

*🟢〔本文〕内で使うHTMLタグが『<p></p>』だけ、または2〜5種類程度(=HTML構造がシンプル)である
*🟢『<p></p>』には“字下げ”の指定以外する予定がない(=<p>〜</p>内だけ背景色をつけたり文字色を変えたり…といったスタイルの指定をする予定がない)

上記くらいシンプルな使い方でしたら、想定外のところに</p>が補完される恐れも減りますし、
万一想定外のところまで<p>〜</p>内に含まれてしまっても「スタイル指定が“字下げ”だけ」なら、見た目上は問題ないと思われます。

小説本文に“字下げ”目的で『<p></p>』を使うだけ、ということなら(3)でよいかと……。




以上がやり方の説明で、>>3は補足説明です。
『不要な余白行が生じる理由』など、根本的な部分について補足しております。
01/06 21:35
返信