Accordion プラグインに CSS を適用する



RW5.x検証済み
このエントリの内容は RapidWeaver 5.x を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
YourHead.comAccordion プラグインに CSS を適用する方法をメモしておきます。

既に H3 タグに CSS でスタイルを適用している

既に h3 タグに CSS でスタイルを適用している場合、Accordion のメニューにも適用されてしまい、意図しない表示結果になることがあります。
理由は当たり前ですが、Accordion のタイトル部分に h3 タグが使われているからです。

Accordion のタイトルに使われている セレクタを探す

Accordion ページでソースを表示した後に、⌘ キー + Fキー で検索ウィンドウを表示します。
そこに「
acWrapper_page」というテキストを入力して検索すると…

#acWrapper_page00

という文字列が見つかると思います。00の部分は使っているページの番号が入ります。これがそのAccordion ページに使われているIDセレクタです。
これを使えばタイトルに適用してしまった入らないスタイルを編集することができます。さらに、h3 タグに適用されている
.acToggle というクラスセレクタも同時に使用します。
.acToggle だけにプロパティを設定しても無視されます。

ページインスペクタから CSS を設定する

ページインスペクタを開き、ヘッダからCSSタブを開きます。そこに以下のようにセレクタを入力してください。

#acWrapper_page90 .acToggle {

}

これで、margin などのプロパティを自由に設定する事が出来ます。
blog comments powered by Disqus