>>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（ウェブライカー）
【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.info01/19 08:57
1ページ中1ページ目
583 view
残り書き込み 9992 件
人気スレ
関連スレ