アナログ
RSS  

そして元に戻す2010/08/26 20:42

※実際には違っていたので追記しました。

サイドバーのメッセージツールがCSSで自由にレイアウトできないため、デフォルトの要素をdisplay:noneで消してHTMLを書くという非常識な対応をしていたのですが、サイト内検索はメッセージツールからHTMLカスタマイズに引っ越し、ブログパーツは危険ということでメッセージツールのブログパーツは廃止したことで、メッセージツールを自由にレイアウトする意味がほぼ無くなってしまいました。

無駄なCSS定義があるのも気持ち悪いので、いずれ書き直そうと思っていたのですが半年以上も過ぎてしまいました。


ところで、メッセージツールの記述はTextとHTMLとWikiの方式が選べるようになっているのですが、不思議なことにHTMLを選んでもインライン要素だと<p>で囲まれ、ブロック要素だと要素の前に<p>で閉じられるという理解できない余計なお世話をしてくれます(バグじゃないの?)。
よく分からないでしょうから例をあげると、インライン要素の場合

<iframe src=~
</iframe>
と入力すると表示されるときは
<p class="mod-text">
<iframe src=~
</iframe>
</p>
にされます。

ブロック要素の場合

<ul>
<li>~</li>
</ul>
と入力すると表示されるときは
<p class="mod-text"></p>
<ul>
<li>~</li>
</ul>

とされ、何をしたいのかまるで分かりません。
これのおかげでブロック要素の場合、先頭に無駄な改行が表示されてしまいます。

この無駄な改行を無くすのに、p.mod-text{display:none;}で消してしまうと、インライン要素の方が表示されなくなってしまいます。

しばらく悩んだものの、あらかじめ何もしないブロック要素でインライン要素を囲っておけば、p.mod-text{display:none;}でいいとようやく気が付きました。
要するに例の場合

<div>
<iframe src=~
</iframe>
</div>
と入力すれば表示されるときは
<p class="mod-text"></p>
<div>
<iframe src=~
</iframe>
</div>
こうなる訳でp.mod-textを非表示にしても問題ありません。

さて、これで一件落着かと思ったら、最初から用意されているツール「携帯からアクセス」の二次元コードが表示されなくなってしまいました。orz

どうしてこうなった? とソースを見てみると

<p class="mod-text" style="text-align: center; text-indent: 0pt;">
<img src="http://q.asablo.jp/qr/puppet.k.asablo.jp.png">
</p>

………………どうしてpなんですか? divじゃダメなんですか?
そもそも、HTML入力に勝手にpを挿入しなければ、こんな問題にもならないのですが……

馬鹿馬鹿しいと思いつつ、メッセージツールで「携帯からアクセス」を作っておしまいにしましたとさ。

<div class="mod-text" style="text-align: center; text-indent: 0pt;">
<img src="http://q.asablo.jp/qr/puppet.k.asablo.jp.png">
</div>

とここまでやっても、カウンターに「Counter」ってタイトルが表示されるようになったりしたのが気に入らなかったりする訳ですが、要望が通らなかったのでしかたがない。orz

深い理由があってこの仕様なら納得もいくのですが、HTML入力でこんな余計なことをするって、実は何も考えてないんだろ!って小一時間(ry

まあ言うだけ無駄なんだろうけどな。


-追記-
よく調べてみると実際には
<ul>
<li>~</li>
</ul>
と入力すると<p class="mod-text">と</p>で囲むのを
<p class="mod-text">
<ul>
<li>~</li>
</ul>
</p>
Firefoxが表示するときに
<p class="mod-text"></p>
<ul>
<li>~</li>
</ul>
<p></p>
のように修正していただけのようです。
仕方ないので、p.mod-text{display:none;}はやめて少しスペースがとられてしまいますが
p{text-indent:0;margin:0;padding:0;}で逃げることにしましたとさ。orz

それにしてもなんで<p>なんだよ。ヽ(`Д´)ノ
<div>ならこんなややこしい事にはならないのに。