提供: GeeklogJpWiki

［３］管理方法 > 管理者が導入後すぐ試せる簡単カスタマイズ > テーマをカスタマイズする > スタイルシートを切り替える

スタイルシートを切り替える

Geeklogのテンプレートでは、スタイルシートをすべてのページで適用させているので、テーマを複数つくらなくてもスタイルシートの切り替えだけで、ロゴや背景色やフォントの見栄えなどを変更できます。

スタイルシートひとつだけを変えるために、テーマを追加するのは、容量的にもメンテナンス量も無駄になるので、スタイルシートを切り替えるJavaScriptを利用して切り替えボタンをサイトに追加してみましょう。

変更するファイル　header.thtml（テーマファイル）

headタグ内：

<link rel="stylesheet" type="text/css" href="{css_url}" type="text/css"  title="Default" />
<link rel="alternate stylesheet" type="text/css" href="{layout_url}/style01.css" type="text/css" title="Style01" />
<link rel="alternate stylesheet" type="text/css" href="{layout_url}/style02.css" type="text/css" title="Style02" />
<script type="text/javascript" src="{layout_url}/styleswitcher.js"></script>

bodyタグ内：

<a href="#" onclick="setActiveStyleSheet('Default'); return false;">標準</a> | 
<a href="#" onclick="setActiveStyleSheet('Style01'); return false;">大きな文字</a> | 
<a href="#" onclick="setActiveStyleSheet('Style02'); return false;">印刷用</a>

スタイルシート切り替えJavaScriptファイル styleswitcher.js と，切り替えるスタイルシート（例 style01.css style02.css）を別途用意します。

この場合，style01.cssは、フォントサイズを大きく、style02.cssは、背景画像なしにスタイルで指定します。

styleswitcher.js はサイトからダウンロードしてください。 styleswitcher.js

• 参考サイト

http://jemimap.freeshell.org/style/scripts.html#styleswitcher