CSS <p>タグと改行(新しいデザインでヘンな空白行が) | 新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン(CSS編集用デザイン)のカスタマイズ
アメーバブログをCSSでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

2011/8/10 知らない間にCSSが修正されていました
今まで通りに表示されるようになっています・・・・

この記事はなかったことに?



新しいデザインに変えたら記事の表示がおかしくなったって方はおられませんか?

なんか・・妙に行間が開きすぎちゃうんだけど・・・

わたしのこのブログがそうです・・・

なんか変に行間が開いていませんか?



これは<p>タグに原因があるんです

そして本来はこの間の抜けた表示方法が正しいんです・・・


このページを見てください
http://exlink.sub.jp/001.html

ソースは↓です
<!doctype html>
<html lang="ja">
<meta charset="UTF-8" />
<body>
<p>↓↓この行と↓↓</p>
<p>
↑↑この行はPタグで別の段落です↑↑</p>
<p >
↓↓この行と↓↓<br />
↑↑この行はBRタグで改行している1つの段落です↑↑ </p>
</body>
</html>

このようなまったく簡単なCSS設定もしていないHTML・・
ブラウザーに表示してみると上の
↓↓この行と↓↓  と  ↑↑この行はPタグで別の段落です↑↑
この間に空白行があると思います
これがブラウザーが <p> タグを表示する仕様なんです
<p>タグの前後には空白行を挿入するんです(1行開く)

下は普通に<br />で改行ですから余計な空白行はありません


・・・・?
じゃ~なんで今までは・・・?
って説明の前にアメブロの標準エディタの説明を・・
※タグ編集エディタを使って記事を書いておられる方はこのような問題は起こりません


みなさまは標準エディタで文章を書いていて行を変えたいときどうされていますか?
わたしは普通に[Enter]キーを押して行を変えます・・・
・・・・
わたしと同じように[Enter]キーを押して行を変えている方に問題が出ています


アメブロの標準エディタでは[Enter]キーを押すと
そこまでを1つの段落と判断して<p>タグで囲ってしまうんです
<br />で改行したい場合は[Shift]キーを押しながら[Enter]キーを押します
※タグ編集エディタはどちらでも普通に<br />で改行されます


<p>タグ?段落?って・・・???<br />で改行・・???


"段落(だんらく)とは文章における1ブロックのことであり、通常は複数の文によって構成される。段落の始めが行頭から1文字字下げを行っていることから段落という言葉になった。パラグラフ(Paragraph)とも呼ばれる。"
                         ・・・
段落 - Wikipedia  より引用 

Paragraphから <p> タグになっています
要するにひとつの意味を持った塊と説明されています

なので・・・

HTMLで見たときに↓このようにすると・・

<p>この文章は1つの塊なので</p>
<p>Pタグで囲って1つの段落にします</p>

「この文章は1つの塊なので」これが1つの段落で
「Pタグで囲って1つの段落にします」こちらが別の段落となってしまいます

正しくは

<p>この文章は1つの塊なので<br />
Pタグで囲って1つの段落にします</p>

こうですよね・・・


で・・・・
アメブロの標準エディタを使って行を変える場合・・
[Enter]キーを押して行を変える場合と
[Shift]キーを押しながら[Enter]キーを押して行を変える場合と
それぞれ<p>タグで分ける<br />改行するの違いはあるのですが・・
正しく使ってもらおうとすると<p>タグ・<br />・段落・改行の使い方や違いをわかってもらう必要があります


アメブロの場合・・・
誰でも簡単に使えることを意識していますので・・・
そんなHTMLがわかってからでないと使えないようでは困るんで・・

たぶん・・・
[Enter]キーを押して行を変える場合も
みなさまが意図しているのは改行なんだろう~って勝手に判断して

古いスキンの初期CSSの中に・・

p{
margin:0;
padding:0;
}

って・・・
ブラウザーが<P>タグを表示するときに前後の空白行をつけないCSSを入れちゃっていたんです


わたしもわかってはいたのですが・・・
[Enter]キーを押して行を変える癖が付いちゃっていたもので・・
どうしてもおかしな表示になるときは
いちいちHTMLタグを表示にして<p>タグを<br />に修正しています
CSSを入れちゃえばいちいちそんなことしなくてもすむのですが・・
そうするとこの記事が書けませんので・・・???


新しいデザインの変更して過去記事の表示がおかしくなっちゃた~(T_T)・・って方は

CSSの最後に

p{
margin:0;
padding:0;
}

これで今まで通りの表示に戻ると思います



新しいデザインでブログを始められる方で標準エディタをお使いの方は・・・
<p> タグと <br /> を意識して
[Enter]キーを押して行を変える場合と
[Shift]キーを押しながら[Enter]キーを押して行を変える場合を使い分けてみてください