フォーラム
お問い合わせ
最新版ダウンロードホーム > サポート・マニュアル > マニュアル > カスタマイズの方法 > 組み込みのJavascript > スタイルを切り替える「styleswitch」
a-blog cmsでは、link要素で参照しているCSSを切り替える設定が標準で実装されています。（v1.2.1より）
アンカーリンクでスタイルを切り替える
1. 設定の編集
この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。
// スタイルの切り替え
styleSwitchMark : '.styleswitch',
| styleSwitchMark | スタイルを切り替えるためのclassをドット「.」つきで指定します。 |
|---|
2. HTMLの編集
スタイルを参照するlink要素と切り替えるa要素に、config.jsで指定したclassをHTMLに記述します。そしてそれぞれの要素に、スタイルを対応させる属性（link要素にはtitle属性、a要素にはrel属性）を記述します。
例）styleSwitchMarkで「.styleswitch」と指定した場合
head要素内：
<link rel="stylesheet" type="text/css" href="xxx.css" title="a" class="styleswitch" /> <link rel="stylesheet" type="text/css" href="yyy.css" title="b" class="styleswitch" />
body要素内：
<a href="#" class="styleswitch" rel="a">スタイルを[a]に切り替える</a> <a href="#" class="styleswitch" rel="b">スタイルを[b]に切り替える</a>
このように記述すると、指定したclassがあるアンカーリンクをクリックしたときに、それぞれに対応するスタイルが切り替わります。
このドキュメントと関連している内容のエントリー
- 関連度 3 : 日付をカレンダー表示から入力する「日付選択カレンダー」
- 関連度 1 : 特定の部分の表示／非表示をフェード効果で切り替える機能（js-fader）
- 関連度 1 : 1行ごとに交互にclassを付与するゼブラ機能（zebra）
- 関連度 1 : フォームのテキスト入力エリアにプレースホルダーを表示させる（placeholder）
- 関連度 1 : マウスオーバーしている要素にクラスを付与する（hover）
ドキュメントの内容に関するお知らせフォーム
内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。
