そして元に戻す ― 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>ならこんなややこしい事にはならないのに。
ねたなし ― 2010/05/17 23:58
ゴールデンウイークからこっち、ネタの仕込みが……ないんじゃなくて書きたいと思うネタがない。しばらく休むか(と書くと今までのパターンならネタがやってくる……ハズ ^^;)。
タグのアドオンの解説でもすればよかっただろうか?
画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD
いつか取り上げようと思いつつ、すっかり忘れてた。
IE8があじわいぶかいw
つうか、IE8にあと何年おつきあいしないといけないのだろうか……IE9に簡単に切り替わってくれるわけではないし。
ニュー速で暇潰しブログ 鳥越「口蹄疫は人に感染しないし、食べても大丈夫なのに、なぜ殺処分などするのか」
空気感染するものをどうするつもりなのか?
この国の偉い鳥類はバカばっか。
圧縮されたCSSを読みやすく ― 2010/05/16 22:04
レイアウトを変えたときにローカルに置いている最適化(圧縮)されていないCSSファイルを壊してしまって以来、しかたないので最適化したCSSを直に操作するようになってしまいました。
たまに読みにくくて「;」を「;\n」(;毎に改行)に置換して見ていたのですが
WEB制作、プロの無料サービス活用術──コーディングに使えるツール(1) - MdN Design Interactiveの
[technique 06]圧縮されたCSSを読みやすく清書する
をちょっと試してみたら置換するより(当たり前だけど)いい感じ。
#head{background:url(img/2010/04/17/f7451.png) no-repeat left bottom;width:410px;height:128px;margin:0;padding:0 220px 0 290px} #head h1{font-size:30px;margin-top:0;padding-top:16px} #head h1 a{color:#353939;text-decoration:none} #head h1 a:hover{color:#FFF;text-decoration:none;text-shadow:3px 3px 2px #000}こんな感じに字下げまでしてくれます。
#head { background: url(img/2010/04/17/f7451.png) no-repeat left bottom; width: 410px; height: 128px; margin: 0; padding: 0 220px 0 290px } #head h1 { font-size: 30px; margin-top: 0; padding-top: 16px } #head h1 a { color:#353939;text-decoration: none } #head h1 a:hover { color: #FFF; text-decoration: none; text-shadow: 3px 3px 2px #000 }
ただこのソースに手を加えると、アップするときにはまた圧縮しないといけなくなるので(そのまま圧縮するとIE6で不具合があるので一手間必要で面倒なので)、修正は圧縮されているソースを直に操作することにしてます。
本当、IE6のおかげでいろいろ面倒だわ。
それと
[technique 05]難読化されたJavaScriptを読みやすくする
がGumblarの難読化解除に使えないかと思って試してみたのですが、読みやすくなったところで、難解なソースが分かりやすくなるわけではないことがよく分かりましたw
ストックしてる(書いてる途中とかの)ネタがなくなってしまった。困ったね。orz
最近のコメント