メッセージツールにidを設定して欲しい
2008-11-17


禺画像]
菌類(ワライタケ)のメッセージでGoogle検索を設定した例。
デザインの統一性云々はあるでしょうが、もっと自由に設定したい。


アサブロはツールバーでメッセージを追加して、そこにブログパーツなどを設定できるようになってます。 追加されたメッセージのソースを見ると、次のようになっています。
<div class="mod mod-message">
<h2 class="mod-caption"><a name="part_______(7桁のユニークな数字)"></a>タイトル</h2>
<div class="mod-body">
追加されたメッセージは、すべてmod-messageになるようです。
一方、標準で用意されてる例えば「最近の記事」だと
<div class="mod mod-recent-articles">
<h2 class="mod-caption">最近の記事</h2>
<div class="mod-body">
mod-recent-articlesのようにユニークなクラスが設定されていますので、個別にCSSでデザイン可能です。 (カテゴリ一覧だとmod-categoryなど)

ここからが本題

追加したメッセージの内容によっては、タイトルや背景を消したい場合がありますが、 一律でmod-messageとなっているために一ヶ所だけ変えるという事ができません。 追加したすべてのメッセージに影響してしまいます。

その一方で、追加されたメッセージにはそれぞれユニークなpart+7桁の数字が設定されています。 しかも、あまり使い道のなさそうな<a name="part_______"></a>の形で。

もし、「part_______」を次のようにidに設定すると、メッセージごとにCSSが設定できるようになります。
<div class="mod mod-message" id="part_______">
<h2 class="mod-caption">タイトル</h2>
また、「part_______」をアンカーに使っていたとしても、idなら同じ様に機能します。marginやborderの分はずれますが、問題になるほどのずれにはならないだろうと思います。

そして肝心の効果ですが、CSSにidで指定してメッセージを個別にデザインできるようになります。
#part3915017 {
        background-image: none;
}
#part3915017 .mod-body {
        padding: 0;
        background-image: none;
}
#part3915017 h2,
#part3915017 p {
        display: none;
}
この結果、次のように思い通りのデザインになります。(あくまで例です。デザインの統一性は崩れますが、時計などはこの様にできた方がいいですよね)
禺画像] CSSをさわり始めて2ヶ月程度なので、なにか見落としてるかもしませんが、ぜひ検討して頂けないものかと思います。



このペンギンの夏(白))はmargin-top: -60px;でごまかしてます。
なので、Googleの横にグレーの「.」が……IE6だと見えませんけど(笑)。
※全力(笑)で書き換えたのでもう見えませんw



じつは、もうちょっとつづくんじゃ(笑)。
他力本願もアレなのでもうちょっと頑張る[LINK]
[CSS]
[アサブロ]

コメント(全0件)
コメントをする


記事を書く
powered by ASAHIネット