本文へジャンプします。

ココログサポート Top>>Questions List>>記事作成時の行間レイアウトがおかしくなり...

question

記事作成時の行間レイアウトがおかしくなりました

InternetExplorer１０にプラウザ-が変わってから、
まずブログの作成（HTML）において改行の間隔がおかしくなりました。記事を作る上で非常に不便なのですが、何とかなりませんでしょうか？

加えて過去記事を読むと、みな改行で一行あけた間隔がおかしくなっていて詰まったレイアウトに変わってしまっています。

試しに該当の過去記事を再度保存してみたらその記事については改善されたのですが、
これについても全部保存し直すしかないのでしょうか？

それぞれ原因と対処法を教えてください。
（他の方には同じ現象は起こってないんでしょうか……）
basic infomations

優君のパパ | 2013/08/13 22:50(4311days ago) | permalink | その他

Please login to comment.

Re: 記事作成時の行間レイアウトがおかしくなりました
実際のブログを見てみないとはっきりわかりませんが、
カスタムCSSに
.content p {padding-bottom: 1em;}
と書いて保存してブログを読み込み直して下さい。

1em は大体1文字分の高さです。ピクセル数で指定するなら ○○px となります。この数字を変えると

改段落（Enterキー）した箇所の間隔が変わります。
改行（Shift+Enterキー）した箇所は変化しないはずです。

JUMA | 2013/08/14 23:32(4310days ago) | permalink

Re: 記事作成時の行間レイアウトがおかしくなりました
すみません、さっきの設定だと余計なところに影響が出るので

.entry-body-text content p {padding-bottom: 1em;}

に訂正します。

JUMA | 2013/08/14 23:42(4310days ago) | permalink

Re: 記事作成時の行間レイアウトがおかしくなりました
重ね重ねすみません、

.entry-body-text p {padding-bottom: 1em;}

です。

JUMA | 2013/08/14 23:44(4310days ago) | permalink

Re: 記事作成時の行間レイアウトがおかしくなりました
回答いただきありがとうございました!m(_ _)m

でもどうも自分の説明の仕方が悪かったみたいで、
行間レイアウトがおかしくなるというのは、たとえば
　
今までは
　　前の行

　　次の行　
って感じだったのが、
前と同じようにしたのにUPしたら、
　　前の行


　　次の行
といきなり大幅にあいたり、逆にHTML画面上ではあけたはずなのに、UPしたら
　　前の行
　　次の行
みたいに詰まってしまったりと、HTML画面と実際の記事でずれてしまうのです。
そして過去記事を見てみたら、みんな以前は
　　前の行

　　次の行
だったのが、
　　前の行
　　次の行
みたいに変わっており、それを再度保存し直すと、
　　前の行

　　次の行
に戻ったりという感じになってしまうので……

自分なりに「<p>&nbsp;</p>」っていうタグが関係してるのかな……
とは思うのですが、プラウザが変わってからこうなったので、仕様変更と言うことなのでしょうか……
でもどちらにせよ、今現在記事を書く上でHTMLの表示と実際のUPした記事が違うのは
ずいぶんと不便なんです……(;´_`;)
　　　　




優君のパパ | 2013/08/16 14:53(4308days ago) | permalink

Re: 記事作成時の行間レイアウトがおかしくなりました
こんにちは。

ご質問への回答ではないのですが…。

こういった「見た目」（見え方）についての質問は実際にブログを確認して、ソース（タグ）はどうなっているのか、テンプレートは何を使っているのかが判らないと確実な回答は難しいと思います。
（言葉で説明されても判断出来ません）
もし仕様だとしても原因がわかればHTMLの変更やCSSでの調整などで対処出来るかもしれません。
（出来ない可能性もあります）
ただ、それを判断するには実際に何が起きているのかを確認する必要がありますので、少しでも確実な回答が必要なのであればブログのアドレスを提示して詳しい人に見てもらったほうがいいと思います。

no-name. | 2013/08/17 00:03(4307days ago) | permalink

Re: 記事作成時の行間レイアウトがおかしくなりました
アドバイスありがとうございましたm(_ _)m

そうですね、たとえばこれが今のレイアウトで

http://yuya2001.cocolog-nifty.com/blog/2013/08/post-3be8-1.html

で、いつも何行か書いたら１行分空けて読みやすくしてるのですが、

　
これが過去記事だとこんな感じで詰まったものになってしまってます。

（以前記事を書いた時には今ぐらいの感じで開いていました）

http://yuya2001.cocolog-nifty.com/blog/2012/11/post-02be.html
　

※なおいろいろ試してみたらPCによっては別に以前と変わらぬように表示されてました。
となるとやっぱりプラウザが変わったせい？


今の記事を書くのは何とかコツをつかんできたのですが、過去記事を全部直すのは（一回保存しなおせば今のレイアウトの間隔に直ります）大変面倒です。
何かいい方法があればと思うのですけど……

優君のパパ | 2013/08/18 23:14(4306days ago) | permalink

Re: 記事作成時の行間レイアウトがおかしくなりました
ブログを拝見しました。

ブラウザをIE10、Google Chrome、Firefoxで見比べてみましたが、その3つの中では詰まって見えるのはIE10だけですね。
なのでIE10のCSS、あるいはHTMLの解釈の問題だと思います。

以下、「いまさら言われても…」という内容かもしれませんが一応説明します。

改行する場合、ココログでは「Enter」だけの改行（HTMLで言うと<p>～</p>）と、
「Shift」+「Enter」での改行（HTMLでは<br />）の2種類があります。

このうち「Enter」だけの改行<p>～</p>は正しくは「改行」ではなく「改段落」（「段落」を作るための記号）なので、その中に何も中身がない場合はその部分はなかったこととして判断されます。

今回の件で、優君のパパさんのブログで空白を空けた部分に書き込まれたタグを見てみると、
以前の記事では
<p>　　　　</p>
最近の記事では
<p>&nbsp;</p>
となっています。

つまり、以前の記事でEnterで空けた部分はHTML的には「何も入っていない」部分として解釈され、無視されてしまったということです。
対して、最近の記事では間に&nbsp;（半角スペースを表す特殊文字）が挿入されているので、「段落あり」と判断されきちんと希望したように見えているのです。

過去記事を開いて保存すると行間が空くのは、保存することで間に&nbsp;が入るためと思われます。

HTMLの解釈という視点から見ると、現在のIE10の挙動が一番正しいのではないかと思います。
（記述されたHTML通りに表示されているので）

※今までと何故変わってしまったのかまでは判りません。（そこまで知識がありません）

で、対策ですが…。
まったく自信はありませんが下記の処理を試してみてはどうでしょう。
■ココログの再構築（全反映、全リビルド）方法
http://cocolog.kaiketsu.nifty.com/faqs/17064/thread
あるいは、
管理ページトップ＞記事一覧を開いて、表示されている記事の先頭にある□にチェック
画面下の「そのほかの操作…」をクリックして、「記事を下書きにする」を選択して「実行」
完了したら、再度□にチェックを入れて「記事を公開する」を選択し「実行」

どちらも記事の状態を変更するための操作なので、もしかしたら「記事を開いて保存」と同じ効果が期待できるかもしれません。
ただ、確実ではないですし、他にはちょっと思いつきません。
上手くいかない場合は、ご容赦ください。

なお、今後は段落の中で改行する場合や段落の段落の間の行間を余分に取りたい場合は「Enter」ではなく「Shift」＋「Enter」で<br />を入れるようにすることをオススメします。

以上、ご参考まで。

no-name. | 2013/08/19 20:01(4305days ago) | permalink

Re: 記事作成時の行間レイアウトがおかしくなりました
先にno-nameさんへ。
marginではなくpaddingを指定すると中身がない段落でも表示を変えることができるようですよ。

優君のパパさんへ。
とりあえず確認ですが
「1行分空ける」時、1つスペースキーを押してからEnterキー、という風にしていませんか？

JUMA | 2013/08/19 22:11(4305days ago) | permalink

Re: 記事作成時の行間レイアウトがおかしくなりました
>no-nameさん

詳しい回答をありがとうございましたm(_ _)m
とりあえず何故こうなったのかについては非常に良くわかりました。
やっぱりIE10になったのが原因かぁ……(´・ω・｀)
じゃあ他の方にもこの現象は起こってるんだろうかなぁと。
IEが進化するのも痛し痒しですね。

処理方法についてはまた試してみようと思います！
本当にありがとうございました！


＞JUMAさん

回答ありがとうございます。
１行分空ける時、１つスペースキーを押してから……は確かにやってます。
以前はそうしないと「ここは１行分空いてるんですよ！」とシステムに
認識してもらえなかったので(^_^;)

優君のパパ | 2013/08/22 14:40(4302days ago) | permalink