【Plugin】Accordion のタブの色をタイトルごとに変える Tips

Realmac Softwareフォーラムに、 Accordion のタブの色を項目ごとに変える方法がありましたので紹介しておきます。



やり方は簡単で、アコーディオンでタイトルを増やしていく度に降られるIDを利用します。
ポイントは、タイトルのスタイル設定で「Text CSS Tag」にチェックを入れることと、タイトルのテキストとボーダーのスタイル、コンテンツのスタイルをオフにすることです。

サンプルファイルもアップされているのですごく分かりやすいです。さわって覚えるのが一番早いですね。一応簡単に解説しておきます。

*アコーディオン カラータブ

フォーラムからダウンロードできるRW4.0用のサンプルファイルです。CSSは「Text CSS Tag」がH1になっていることを前提に書いてありますので、ここを「H2」などに変更する場合はCSSを書き直す必要があります。
タイトルに降られたIDは、書き出す度に新たに生成されるので、タイトルの順番を入れ替えてもカラータブの色の順番は変わりません。これは有り難い仕様ですね。


*ページインスペクタ CSSの設定
ページインスペクタのCSS
サンプルでは始めから挿入されているので新たに追加する必要はありません。

///ダウンロード///
4.0用サンプルファイル(フォーラムより)
3.6用サンプルファイル(RWで簡単HP作成)

///CSSコード///
ポイントは h1#acToggler_pageXX に
!important を加えるところです。

h1#acToggler_page0_0{ background: #dddddd !important;}h1#acToggler_page0_1{ background: #96c926 !important; color: #ffffff;}h1#acToggler_page0_2{ background: #69970b !important; color: #ffffff;}h1#acToggler_page0_3{ background: #333333 !important; color: #ffffff;}#acStretcher_page0_0{ background: #dddddd;}#acStretcher_page0_1{ background: #96c926 ; color: #ffffff;}#acStretcher_page0_2{ background: #69970b ; color: #ffffff;}#acStretcher_page0_3{ background: #333333 ; color: #ffffff;}


応用すればこんなことも出来ます。(フォーラムより)
→デモ1
→デモ2

blog comments powered by Disqus