解決済

clip!clip!
Ads By Google

【新管理画面】文頭のスペースが消えてしまいます

新管理画面の記事投稿における文頭の空白が、投稿画面上では入っているのですが記事の本文ではなくなってしまいます。
解決策を御存じでしたら教えていただけますでしょうか。

2009-06-25 22:59の質問
スペース  投稿  新管理画面  
スペース
商業施設の物件開発、テナント導入、環境計画・設計・施工
www.space-tokyo.co.jp
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

1.

2009-06-25 23:28:17みんなナイスな
HTMLにおいては、通常は連続するスペース、タブ、改行は1つのスペースとして扱います。

これを回避するためには
・全角スペースを使う
・「 」を使う(これはスペースの前後で改行を許可しない特殊なスペース)
があります。

ただ、段落始めに文頭にインデントを設定する場合はCSSで
text-indent: 1em;
などと設定することで自動的に段落の1行目にインデントを設定することが可能です。

すばやい回答をありがとうございます。

さっそく試してみたのですが、やはり上手くいかないようです…。
CSSの"body"と名の付く箇所に"text-indent: 1em;"を挿入してみたのですが、やはり文頭の空白は反映されないようです。
空行を挟んだ次の段落の頭もインデントが入っていなかったので、CSSの挿入する部分を間違っている可能性もあります。

ちなみに、私はHTMLエディタを使って投稿しております。
新管理画面だと、HTMLを吐くときにすでに空白が無視されているようです。
旧管理画面のHTMLエディタやWYSIWYGエディタだときちんと反映されるのですがねぇ…。

2.

2009-06-28 08:20:40みんなナイスな
他の方のご質問に寄せられたコメントを参考にFirefoxの HTMLエディタで空白があくようになりました。
記事を書く際に上のHTMLボタンでソースエディタを呼び出し文頭と文末を<P></P>で囲みますとスペースがあき、次回からは普通に空白を入れますとソースエディタには &nbsp; と記されスペースがあくようになりました。

ありがとうございます。
さっそく試してみましたが、確かに文頭の空白が反映されていました。

ただ、一つ気になることは、<p>タグを入れたときからEnter一回で2行ぶんの改行が入るようになることです。
また、Shift+Enterで1行の改行を入れると、次の文頭のスペースは無視されてしまいます。(Shift+Enterだと<br>タグが挿入されています)

Ads By Google

コメント(10)

2009-06-26 20:48:17

CSSによっては異なりますが、

div.article-body p {
 text-indent: 1em; }
などとしてみてください。HTMLエディタの場合は自動でpタグで囲まれると思いますので。

#2.  
2009-06-28 00:00:02

度々ありがとうございます。

私はFireFoxユーザなのですが、どうやら<P>タグで囲まれるのはIEのようです。(参考:http://dtp.jdash.info/archives/51215672.html
一応、CSSに挿入して確かめてみましたが、解決しませんでした…。

それと新たに分かったこととしまして、どうやら今回のような不具合が起こるのはHTMLエディタのときのみのようです。
シンプルエディタやWYSIWYGエディタの場合には、きちんと空白が反映されています。

新管理画面にもWYSIWYGエディタを入れてくれないかなー、という感じです。

#3.  BLUEPIXY
2009-06-28 04:19:29

Firefox でも、 text-indent は、有効なので、
CSSの指定の方法が現在のデザインに合っていないか、
回答者と質問者で、動作の認識が違うのではないかと思います。

text-indent は、ブロックに適用して一行目のインデントを設定するものです。
その中の空白文字が無視されることとは、関係がありません。
また、一行目に対して効果があるので、折り返された文章など2行目以降は別です。
(別ブロック(DIV,P)にする必要があります。
また、1emのemは、文字の高さを基準とする単位なので、効果がよく判別できないとか?

HTML的には、スペースを有効とするには、Pre を使いますけど、
簡易に、全角スペースを使ってみたらどうでしょうか?

2009-06-28 09:11:08

実際に新管理画面で試してみました(Firefox/HTMLエディタ)が、改行後にスペースが
1つの場合は「&nbsp;」に
2つ以上の場合は最後の1つは通常のスペースでそれより前の部分がスペースの数の分だけ「&nbsp;」に置き換わります。
テスト投稿です。
http://blog.livedoor.jp/tani_masaru-devel/archives...

#5.  
2009-06-28 21:25:25

>>BLUEPIXYさん
text-indentについては、おっしゃるとおりだと認識しております。CSSの指定については、CSSファイルの【06. Main - 記事エリア】の【記事本文】のすぐ下で指定しています。

>簡易に、全角スペースを使ってみたらどうでしょうか?
私は元から全角スペースを使っているのですが、上手くいかないんです…。

#6.  
2009-06-28 21:32:11

>>tani.masaruさま
どうやら、半角スペースならいけるようですが、全角だと駄目のようです。
全角スペースが無視される理由が分かれば解消しそうな気がします。

#7.  BLUEPIXY
2009-06-29 03:55:04

>>#5
あ~、
文頭の全角スペースは、(HTMLエディタでは)削除する方針みたいですね。
よく確認もせずにすみませんでした。
<(_ _)>
(文中の全角スペースは大丈夫みたいです・)

2>Shift+Enterで1行の改行を入れると、次の文頭のスペースは無視されてしまいます
#3でも書いてますけど、text-indent が効くのは、ブロックの文頭だけです。

2><p>タグを入れたときからEnter一回で2行ぶんの改行が入るようになる
<p> は、大抵のブラウザでは、デフォルトで、上下にマージンがとられて表示がされます。
コレがイヤな場合スタイルに

margin auto 0;
あるいは、
margin 0;
を、追加指定して下さい。

#8.  
2009-06-29 06:58:03

>BLUEPIXYさん

すみません少し説明が不足していました。
私が「2行ぶんの改行が入る」と言っているのは、エディタの上での話です。


現状は、>2の回答のように<p>タグで囲んでやるとスペースが入るようになったのですが、

 あああああ

 いいいいい

のように1行空いた改行のみでしかその効果が反映されません。
改行ごとにスペースが反映されるのが理想です。

2009-06-29 09:36:21

大変申し訳ありません。回答で<pre>タグ と書く処を<p>と書いてしまいました。
私の場合Macですが、改行は1行分しか入っておりません。

別の方のページで「<pre>タグの内側でも、上記の機能が生きているため、<pre>タグの内側では、<br>(改行タグ)と\n(改行コード)が同時に存在するため、2行単位で改行してしまう。
困った。」というようなことが書かれておりました。
難しいことは解りませんので悪しからず。

#10.  BLUEPIXY
2009-06-29 22:41:32

>>#8
#7で説明した通りです。

トラックバック(2)

トラックバックURL: