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

p{
text-indent: 1em;
}

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

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

▽実際の文章
あいうえお

○かきくけこ
さしすせそ

ネットで調べたものをhtmlにただ貼り付けて、文章を打つページで<p>を入れて入力しているだけなので何がいけなかったのかわかりません。
説明も下手ですみません…わかる方がいましたら教えていただけると助かります。
01/02 01:39
返信
コメント投稿 検索
8 Anonymous SO-54C
>>7
コピペして一通りテンプレートが崩れてないか見ましたが大丈夫でした!

> ユーザーテンプレなどでは<p>を『段落』以外の意図で使っている場合が結構多いので〜
確かに自分がお借りしているテンプレートサイト様では<p>をあとがき用として書き込んでいることが多いですね…! 便利とは思ってましたがやっぱり少しでも知識がないと書き換えは難しいですね…。

> <p>以外に全角スペースを入れて字下げをする
その手がありましたね…すっかり忘れてました!
少し前に使っていたスマホでは全角スペースを入れても反映してくれなかったのですっかり忘れてました。これもたぶん自分が何か間違ったことをしていたんだと思いますが…。
なので「&nbsp;」を2回程入れて全角スペースの変わりとして入れてました。
全角スペースを入れてプレビューしたらちゃんと反映してたので、HTMLの書き換えに困ったら全角スペースも視野に入れて対処していこうと思います!

とても丁寧な説明でわかりやすかったです。本当に助かりました、ありがとうございました!
01/27 22:36
返信
7 しち SOG03
>>6は、「<p>を使った場所が、グレー背景&文字サイズ小になってしまう」ということですね?

【HEAD編集】で、以下の部分を後述のソースに書き換えてください。
*━━━━━━━━━━

* .text p{
* background:#efefef;
* margin:10px;
* padding:10px;
* font-size:10px;
* }

* p{
* text-indent: 1em;
* margin: 0;
* padding: 0;
* }

*━━━━━━━━━━
↑ここを、↓に書き換え

━━━━━━━━━━

/* グレー背景のブロック */
.text .gray-blk{
background:#efefef;
margin:10px;
padding:10px;
font-size:10px;
}

/* 段落 */
p{
text-indent: 1em;
margin: 0;
padding: 0;
}

━━━━━━━━━━
※「/* ○○ */」の部分ごとコピペして大丈夫です。(デザインには関係しないただのメモ書きなので、消してもOKです)

書き換えたら、小説本文だけでなく表紙・目次・名前変換画面など、一通りデザイン崩れがないか見て回ってください。

念のため「これまで『グレー背景&文字サイズ小』で表示されていた部分が消えてしまった!」という箇所がないか、ご確認ください。(無いと思いますが)

もしあれば
#🟥『グレー背景&文字サイズ小のブロック』を入れたいところに、
━━━━━━━━━━

<div class="gray-blk">グレー背景のブロックに入れたい文章</div>

━━━━━━━━━━
↑を記入してください。

小説本文内にあとがき等としてグレー背景ブロックを入れたい場合も、同様に上記のHTMLをお使いください。





>🔷 <p>要素がスクショのようなグレー背景&文字サイズ小&余白挿入になってしまう原因は、
* .text p{○○:××; ……}
の部分です。

この部分を翻訳すると、
* クラス名“text”が付いた要素の中にある<p>要素の{何を:どうする;}
という指定になってます。

で現状の【文章画面編集】を見ると、
小説本文がまるっと『クラス名“text”が付いた要素の中に』入る構造になっています。

なので小説本文の中で<p>を使うと、「.text p{……}」に指定されているスタイルが適用されてしまう……というわけです。

>>>よって、「.text p{……}」を消しました。

おそらくこれは『<p>〜</p>で囲んだところをあとがきブロックにする』という目的で書かれたソースだと思われます。

この「.text p」のところだけ書き換えて
* .text .gray-blk{……}
にしたのが先ほどの書き換え用ソースです。

なおかつ元のテンプレで「.text p{……}」に指定してあったスタイルを、
『クラス名“text”が付いた要素の中にある、クラス名“gray-blk”がついた要素』
に適用できるように書き換えました。


もし「あとがきブロックは毎回使うから、いちいち<div class="gray-blk">〜なんて長いHTML書きたくない」ということでしたら、
このテンプレには、字下げ目的の<p>を使うのを諦めるのが最も手っ取り早いです……。





>🔷>>5 小説での字下げ目的に使用するような使い方はあまりしない方がいいのでしょうか?
むしろ使い方としては正しいです。
ので、HTMLの文法的には使うほうが望ましいのですが……。

>『ユーザーテンプレと併用して』『字下げだけのために』使うのなら、
<p>を使用せずに、全角スペース≠文頭に都度入力していったほうが簡単かもしれません。


<p>というのは『paragraph(=段落)』の頭文字です。
なので小説やブログ記事などにおいて、『段落ごとに<p>で括る』のが本来の使い方です。

……しかし、ユーザーテンプレなどでは<p>を『段落』以外の意図で使っている場合が結構多いので、
ユーザーテンプレと字下げ用<p>を併用すると、>>6のスクショのような事態になることもあります。
>>6のテンプレは、『段落』ではなくたぶん『あとがきブロック』を作るのに<p>を使っているのかと……)

こういうときはCSS・HTMLの書き換えなどで対応することになります。

なので、
🟢『CSS・HTMLを最初に一度いじる手間』
🟢『小説を書き続けるうえで、毎回生じる手間』
🟢『どのようなデザインにしたいか(CSSを用いなければ実装できないデザインか?)』
……などを考慮して、

>🔷 <p>で字下げを行うか
または
>🔷 文頭に全角スペースを入れて字下げをするか
……を選ばれるとよいかと。

ビジネス目的のサイトでしたらHTML文法的正しさ(<p>を『段落』の指定に使う)を優先すべきなんですが、
そうでないならサイト運営のしやすさ∞サイト訪問者の見やすさ≠優先してもいいと思います。

▼参考
【初心者向け】HTMLの改行方法まとめ|pタグとbrタグの使い方|webliker(ウェブライカー)

【初心者向け】HTMLの改行方法まとめ|pタグとbrタグの使い方|webliker(ウェブライカー)

HTML5の改行の方法といえばpタグとbrタグですが、それぞれどんな場面で使うことがより最適か知っていますか?本記事ではpタグとbrタグそれぞれの役割をはっきりとさせることで、初心者の方が混乱しないようにHTMLの改行を...

webliker.info
01/19 08:57
返信
6 Anonymous SO-54C
>>5
連投です、すみません。

しち様、もう一つ別にお借りしたテンプレートについて教えていただけませんか?
前回とはまた別に小説を作りテンプレートをお借りしているのですが、そこにもHTMLにp{ 〜 を入れて、文章画面にも<p>を入れプレビューして見ると以下の画像のような表示になりました。
ここが問題なのかな?と思うところはあるのですがどう手を加えていいのかわかりません…。
入力する優先順位が間違ってたりするのでしょうか?

添付した画像には#4で試しに入力してください〜の(1)〜(3)を入れています。

▽文章画面編集
<div class="txtwrp">
<h3>#title_chapter#</h3>
<div class="text">

#text#

<br>
<center>#prev_←_# #next_→_#

</div></div>
</center>
<br>
#novel#
<br>
<br>
#top#

▽HTML編集
<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Cinzel');

@font-face
{
font-family: はんなり明朝;
src: url('https://cdn.leafscape.be/hannari/hannari_web.woff')
format("woff");
}

body{
font-family:"Cinzel","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#555;
background:#fff;
margin:20px 0;
padding:0;
text-align:center;}

@media screen and (min-width: 601px){
.wrp{
width:450px;
margin:0 auto;}

.txtwrp{
width:600px;
margin:0 auto;}

}

@media screen and (max-width: 600px){
.wrp,txtwrp{
width:100%;
margin:0 auto;}

}
.act1,.act2{
line-height:200%;
padding:0 15px 15px;
border-radius:10px;
border:double 5px #d4dcda;
text-align:center;}

.act1{
margin:30px 50px 30px 20px;
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);}

.act2{
margin:30px 20px 30px 50px;
transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);}

.text{
line-height:200%;
font-size:13px;
padding:50px 0 15px;
margin:0 20px 20px;
border-radius:20px;
border-top:double 5px #d4dcda;
border-bottom:double 5px #d4dcda;
text-align:left;
}

.text p{
background:#efefef;
margin:10px;
padding:10px;
font-size:10px;
}

↓ここに追加しました。↓
p{
text-indent: 1em;
margin: 0;
padding: 0;
}

↓ここが上と一緒に表示されてる?↓
.text a{
border:none;
color:#000;
margin:5px;}

.text a:hover{
background:none;
border:none;
color:#555;
margin:5px;}

header{
margin:20px;
padding:15px;
text-align:center;}

header a{
display:inline-block;
width:80px;
border:solid 1px #abced8;
padding:5px;
text-align:center;
margin:5px;}

header a:hover{
background:#abced8;
color:#fff;
border:solid 1px #abced8;}

h1{
line-height:100%;
font-weight:normal;
font-family: はんなり明朝, sans-serif;
color:#000;
margin:0 0 20px;
padding:10px 10px 20px;
background:url(画像のURL);
background-size:200px;
display:inline-block;
text-align:center;
text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 3px #fff,-1px -1px 3px #fff;}

h2{
color:#000;
font-family: はんなり明朝, sans-serif;
line-height:100%;
font-weight:normal;
font-size:15px;
margin:0 5px;
padding:0 5px 5px;
background:url(画像のURL);
background-size:200px;
position: relative;
bottom:12px;
display:inline-block;
text-align:center;
border-right:solid 4px #fff;
border-left:solid 4px #fff;
text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 3px #fff,-1px -1px 3px #fff;}

h3{
line-height:100%;
font-size:20px;
font-weight:normal;
font-family: はんなり明朝, sans-serif;
color:#000;
margin:0;
padding:5px 20px 10px;
background:url(画像のURL);
background-size:200px;
border-right:solid 5px #fff;
border-left:solid 5px #fff;
display:inline-block;
text-align:center;
text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 3px #fff,-1px -1px 3px #fff;
position:relative;
top:20px;
}

a{
color:#555;
text-decoration:none;
padding:0 3px;
border-bottom:solid 2px #efefef;
transition:0.5s;
}

a:hover{
border-bottom:solid 2px #abced8;
}

input[type],textarea{
height:80px;
width:95%;
font-family:"Cinzel","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#d4dcda;
color:#555;
border:solid 1px #d4dcda;
margin:5px 10px;
padding:2px 5px;
}

input[type=text]{
margin:5px;
height:24px;
width:80px;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #555;
background:#555;
color:#fff;
}

</style>
01/16 21:19
返信
5 Anonymous SO-54C
>>4
返信が遅くなってしまい申し訳ありません。

小説ページにコピペしてみたところ、しち様が仰る通りのプレビューになりました。
私の場合、文章の字下げ目的で使用しているため結構<p>を使うことになりますね…。
字下げのみの使用になるので(3)でいこうと思いますが、小説での字下げ目的に使用するような使い方はあまりしない方がいいのでしょうか? 個人的に字下げした方が文章も読みやすいなって考えで今回試みたのてすが…無知で本当に申し訳ないです…。

ちなみにスタイルシートはHTML編集にすべて入力してあります。(CSSには何も記載してありません)
01/16 15: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
返信
3 しち SOG03
>>2

>>4の補足説明です。>>4からご確認ください。

とりあえず>>4は『やり方の説明』中心にまとめました。
以下は『なぜ余白行が生まれて、なぜこう書くと余白行が消えるのか』という話です。
一応ちらっと目を通していただければ……。


#🟥 自動改行機能
>自動改行“する”状態だと
【小説ページ編集】の〔本文〕入力欄などで↓のように書いた場合、
(⬇️=入力欄に入れた改行)
━━━━━━━━━━

* <h1>あいうえお</h1>⬇️
* <p>かきくけこ</p>⬇️
* さしすせそ

━━━━━━━━━━
ブラウザ上では⬇️が『改行タグ<br>』に変換されるため、
━━━━━━━━━━

* <h1>あいうえお</h1><br>
* <p>かきくけこ</p><br>
* さしすせそ

━━━━━━━━━━
上記のようになります。
これをサイト上やプレビューで見ると、
━━━━━━━━━━

* あいうえお
*
* _かきくけこ
*
* さしすせそ

━━━━━━━━━━
と、『あいうえお』『かきくけこ』各行の下に不要な空白行が入ります。

このような『不要な空白行』と化すのは1行目と2行目、

* <h1>あいうえお</h1><br>
* <p>かきくけこ</p><br>
の「</h1><br>」と「</p><br>」の部分。正確には、

*「『閉じタグ(</h1>・</p>)』の直後にある『改行タグ(<br>)』」
が空白行と化します。

>>なので〔本文〕入力欄において、
>>「</○○>」の直後に改行⬇️を入力しなければ、
>>不要な空白行は入りません。

「</p>を入れない場合なら『かきくけこ』『さしすせそ』の間に空白行が入らない」のは、このためです。
この場合は『さしすせそ』行も<p>〜</p>要素の中に入っている状態なのです。

(閉じタグ</p>が無いので、
 開始タグ<p>以降の文字『か〜そ』はすべて「<p>〜</p>要素の中に入っている」とブラウザに判断されている…と考えられる)

細かく言えば、「ブロックレベル要素の閉じタグ直後に改行⬇️を入れると、空白行ができてしまう」……とかいろいろあるのですが話が長くなるので、
とりあえずは

# 自動改行“する”設定のときは『閉じタグ(</○○>)』の直後に改行⬇️を入れない

で書けば、余計な空白行は避けられる……と考えてもらってOKです。

▼参考
ブロックレベル要素とインライン要素|HTML5|HTML−havin' a coffee break|珈琲とウェブデザイン

ブロックレベル要素とインライン要素|HTML5|HTML−havin' a coffee break|珈琲とウェブデザイン

HTML4までの要素の分類であるブロックレベル要素とインライン要素について。

web.havincoffee.com

ようは、
●ブロックレベル要素(<p>とか<h1>とか<div>とか)の閉じタグ</○○>を入れる

●ブロックレベル要素の閉じタグ</○○>の直後には、そもそもHTMLの特性で「改行が入る」

●なのに自動改行“する”状態で閉じタグ</○○>の直後に改行⬇️を入力してしまうと

●HTMLの特性で入った改行+自動改行機能で挿入された改行タグ<br>
 =2つ分の改行をしたのと同等の状態になる

……というような感じです。


なお>>3で紹介した(3)の書き方だと、
━━━━━━━━━━

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

━━━━━━━━━━
ブラウザ上では以下のように閉じタグ</p>が補完されます。
━━━━━━━━━━

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

━━━━━━━━━━

「次のブロックレベル要素が開始する直前に閉じタグ</p>が入る」ので、
* <p>あいうえお<br></p><p>かきく…
という感じに、
『自動改行で挿入された<br>』『閉じタグ</p>』の順番で並びます。

この場合なら閉じタグ直前の改行タグ<br>は余白行とはならないので、(3)のような書き方が可能となります。




ついでにスタイルシート(p{……;}などの記述のことです)のほうですが、
前回紹介したmargin・paddingの指定は不要なので、>>0のときの状態
━━━━━━━━━━

p{
text-indent: 1em;
}

━━━━━━━━━━
に戻してもOKです。
テンプレのスタイルシートで既にmargin・paddingのゼロ指定がしてあったので。

※下手に触りたくなければ>>1のmargin・padding指定は残したままでも問題ありません。
01/06 21:30
返信
2 Anonymous SO-54C
>>1
しち様
お返事ありがとうございます!
確かにどの機能を使用しているか記載してませんでした、失礼しました。
使用している機能は小説機能です。

自動改行を試しましたが解決できなかったので、margin·paddingを追加しました。すると上の空白はなくなったのですが、</p>で閉じると今度は下に空白ができてしまいました。
小説ページ編集にpタグを入れているのですが、</p>を入れずに<p>だけ入れてプレビューして見ると空白はありませんでした。
HTMLの入力する所等が間違っているのでしょうか…?

下記にお借りしたテンプレートのスタイルシートを載せました。HTMLに至ってはどこで区切って載せればいいかわからずすべて載せています。
(ダメだったらすみません…)

▽<p>かきくけこ でプレビュー
あいうえお
○かきくけこ
さしすせそ

▽<p>かきくけこ</p> でプレビュー
あいうえお
○かきくけこ

さしすせそ


・小説の基本設定にある本文の改行を<br>に変換「する」に設定中
・文章画面編集の自動改行は「しない」に設定中

▽文章画面編集
<main style="max-width:600px;"><article class="txt"><h3>#title_chapter#</h3>
#text#
<br>
</article></main>
<br>
#novel1#
<br>
<br>
#top#
<br>
<br>

▽HTML(
<link href="http://fonts.googleapis.com/css?family=Anonymous Pro" rel="stylesheet" type="text/css">
<style type="text/css">
@font-face{
font-family:"花園明朝";
src: url('画像のURL')
format("woff");
}
*{
margin:0;
padding:0;
font-size:13px;
font-family:"Anonymous Pro", "游明朝", "メイリオ";
}
body{
padding:0 20px;
background:#fff;
color:#555;
letter-spacing:1px;
text-align:center;
}
a{
color:#555;
text-decoration:none;
}
a:hover{
color:#eee;
}

h1, h2, h3{
font-family:"花園明朝", "serif";
font-weight:normal;
letter-spacing:2px;
text-align:center;
}
h1{
font-size:16px;
margin:20px 0 15px;
}
h2{
font-size:13px;
padding:45px 0 15px;
background:url("画像のURL") no-repeat 50% 0;
background-size:auto 60%;
}

h3{
font-size:14px;
width:180px;
margin:0 auto 30px;
padding:0 0 10px;
border-bottom:solid 1px #eee;
}

header{
padding:40px 0 60px;
}
header a{
padding:0 0 5px;
border-bottom:solid 1px #eee;
letter-spacing:2px;
}
main{
box-sizing:border-box;
margin:20px auto;
padding:10px;
background:linear-gradient(45deg, #89c997 25%, transparent 25%, transparent 50%, #89c997 50%, #89c997 75%, transparent 75%, transparent);
background-size:4px 4px;
}
article{
padding:20px 10px;
background:#fff;
line-height:220%;
}
.txt{
padding:40px 30px;
text-align:justify;
}
section{
display:inline-block;
max-width:300px;
box-sizing:border-box;
padding:20px;
word-wrap:break-word;
vertical-align:top;
text-align:justify;
}
section a{
color:#89c997;
}
.a{
margin:40px 0 0;
padding:30px 0 0;
border-top:solid 1px #eee;
}

↓ここに追加しました。
p{
text-indent: 1em;
margin: 0;
padding: 0;
}

br{letter-spacing:0;}

@media screen and (min-width:600px) {
*{
font-size:12px;
}
h2{
font-size:14px;
}
h3{
font-size:16px;
width:300px;
}
article{
padding:40px 30px;
}
.txt{
padding:60px 50px;
font-size:13px;
letter-spacing:2px;
}
}
</style>
01/03 17:40
返信
1 しち SOG03
>>0
原因は『自動改行のせい』か『スタイルシートの余白(marginまたはpadding)設定のせい』のどちらかかと思われます。
順にご確認ください。

まずは
#〔□自動改行する〕にチェックが入っていませんか?

>🔲入っていない
問題ないです。未チェックのままにして、スタイルシートでの余白調整に取りかかります(後述)。

>☑️入っている
自動改行機能により『改行タグ(<br>)』が意図せず挿入されている可能性があります。
その意図せず入った<br>部分が、空白行として表示されている状態……ということです。

この場合は、以下2種類の対処どちらかで解決するかもしれません。

*🅰️━━━━━━━━━
 <h1>あいうえお</h1><p>かきくけこ</p><p>さしすせそ</p>
*━━━━━━━━━━
などと、「<p>〜</p>要素の前後に改行を入れない」形に書き直す。

*🅱️または、自動改行のチェックを外す。
※ただし今まで自動挿入されていた改行タグすべてが消えるため、レイアウトが大きく変わるおそれがあります。

もし上記の🅰️ or 🅱️を行って不要な余白が消えたなら、スタイルシートをいじる必要はありません。


自動改行していない・上記🅰️🅱️では解決しなかったら以下↓

# スタイルシートで余白(margin・padding)を調整する
とりあえず>>0で書かれていた『p{……;}』のところを以下に書き換えてみてください。
━━━━━━━━━━

p{
text-indent: 1em;
margin: 0;
padding: 0;
}

━━━━━━━━━━
こう書くと、<p>〜</p>要素の上下左右の余白がゼロになります。

※テンプレのスタイルシートがどう書かれているか分からないので、書き換えても変化が起きなかったり、テンプレのデザインが崩れるおそれがあります。


書き換えても問題が解決しなかったら、
『なんの機能(トップページ・子ページ・小説機能・ノート機能 etc.)』で起きている問題か書き添えて、
再度現状を書き込んでください。
(機能によって独特の仕様が存在する場合があるのと、
 なんの機能か分かると、「【どこ】をどう書き換えて〜」といった説明がしやすいので……)
01/02 22:39
返信