2010年5月26日水曜日

zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする方法

CSSカスタマイズ
zoome
マイクリップ一覧の説明文に当たる要素は、Firebugですぐに見つける事は出来ません。
理由は、他の場所に書いている要素を、移動してきて表示しているからです。

全員で同じ調査をするのは、時間が勿体無いですので、私が調べた結果をメモします。
(もちろん、調査に興味がある方は、自分で調べてみて下さい。)

# この小技は、zoomeの仕様が変わり易そうな部分を使っています。
# この方法が使えなくなりましたら、他の方法を探して下さい。
#


**** 手順
div#review_object の中身に対して操作します。

** 説明文に当たる所: div#review_string
o colorや font-sizeなどの一部の指定は、後ろに「!important」を付けないと無効になります。
   + これらの値は、HTMLの中(<div id="review_string"から始まる所)で、直接指定していました。
   + ですから、CSSカスタマイズする時は、!important を付けて指定して、HTMLよりも優先順位を上げます。
o !importantの指定例(= 先頭のdivは、無くてもきっと動きます。)
--------
div#review_string {
color: #911B1B !important;
font-size: 14px !important;
}
--------

** タイトル全体 = div#review_object .myclipreview_head
o .myclipreview_headは、マイクリップ一覧のタイトル「マイクリップ一覧」部分でも使っていました。
o 区別してCSSカスタマイズしたい時は、このページにだけ登場する親要素を、名前の最初に指定します。
   + タイトル全体 = div#review_object .myclipreview_head
   + タイトルの文 = div#review_object .myclipreview_text
   + タイトルの最後 = div#review_object .myclipreview_rss
   + (= 先頭のdivは、無くてもきっと動きます。)


==
関連ページ:
    ▼CSSカスタマイズ
    ▼zoome
    ▼ホームページを作る
    ▼制作メモ
    > 多くのブラウザーで見栄えを合わせる
    zoome マイページ。プレビューでの失敗例と対策
    CSS。他の方の便利メモ