スタイルスイッチ

a-blog cmsでは、link要素で参照しているCSSを切り替える設定が標準で実装されています。（Ver. 1.2.1より）

デモ

スタイルを[a]に切り替える

スタイルを[b]に切り替える

a-blog cmsはいつも使っているWebブラウザから更新ができ、直感的で使いやすく、便利な機能についてを重視したシステムになっています。

設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

config.js

// スタイルの切り替え
styleSwitchMark: 'a.styleswitch',
styleSwitchStyleMark: 'link.styleswitch'

使い方

スタイルを参照する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があるアンカーリンクをクリックしたときに、それぞれに対応するスタイルが切り替わります。

---