Switch stylesheets with jQuery
外部からスタイルシートを変更しサイトのデザインを変更します。切り替えたスタイルの情報はクッキーに保存され同じ状態を保てるようになっています。
デモ
メインのスタイルシート（style.css）をベースに、代替えのスタイルシート（style2.css、style3.css、style4.css）に記述された部分が上書きされる仕組みなので、スタイルを変更したい部分だけを代替えCSSの方に記述しています。
ページを移動してもスタイルを維持できますが、ブラウザによってはページが切り替わる瞬間に一瞬背景が見えることがあります。
設定
Switch stylesheets with jQuery | kelvinluck.com
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
(function($) { $(document).ready(function() { $('.styleswitch').click(function() { switchStylestyle(this.getAttribute("rel")); return false; }); var c = readCookie('style'); if (c) switchStylestyle(c); }); function switchStylestyle(styleName) { $('link[rel*=style][title]').each(function(i) { this.disabled = true; if (this.getAttribute('title') == styleName) this.disabled = false; }); createCookie('style', styleName, 365); } })(jQuery); // cookie functions https://www.quirksmode.org/js/cookies.html function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } |
↑を参考にstyleswitch.jsを作成します。
<head>～</head> 内に↓を読み込ませます。
|
1 |
<script type="text/javascript" src="xxxxxxxxxxxxxx/styleswitch.js"></script> |
|
1 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
切り替えるスタイルシートも同様に<head>～</head> 内に挿入します。代替えのスタイルシートには、alternate stylesheetとtitleを付けてやります。
|
1 2 3 4 |
<link rel="stylesheet" type="text/css" href="xxxxxxx/style.css" /> <link rel="alternate stylesheet" type="text/css" href="xxxxxxx/style2.css" title="style2" /> <link rel="alternate stylesheet" type="text/css" href="xxxxxxx/style3.css" title="style3" /> <link rel="alternate stylesheet" type="text/css" href="xxxxxxx/style4.css" title="style4" /> |
スタイルシートを切り替えるためのリンクをページ内の好きな場所に挿入し完成です。
|
1 2 3 4 5 6 |
<ul> <li><a class="styleswitch" href="?style=style">デフォルト</a></li> <li><a class="styleswitch" href="?style=style2" rel="style2">ホワイト</a></li> <li><a class="styleswitch" href="?style=style3" rel="style3">ブラック</a></li> <li><a class="styleswitch" href="?style=style4" rel="style4">グレー</a></li> </ul> |
WordPressの場合
styleswitch.jsを読み込む。
functions.phpに↓を追加
|
1 2 3 4 5 |
// 「全ページ共通」外部JavaScript function my_scripts() { wp_enqueue_script( 'styleswitch', get_template_directory_uri() . '/js/styleswitch.js' ); } add_action( 'wp_enqueue_scripts', 'my_scripts' ); |
代替えのスタイルシートを読み込ませます。functions.php↓を追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 代替えのスタイルシートを読み込ませる function my_styles() { global $wp_styles; wp_enqueue_style( 'style2', get_template_directory_uri() . '/style2.css' ); wp_enqueue_style( 'style3', get_template_directory_uri() . '/style3.css' ); wp_enqueue_style( 'style4', get_template_directory_uri() . '/style4.css' ); // alternate stylesheet $wp_styles->add_data( 'style2', 'alt', true); $wp_styles->add_data( 'style3', 'alt', true); $wp_styles->add_data( 'style4', 'alt', true); // title $wp_styles->add_data( 'style2', 'title', 'style2' ); $wp_styles->add_data( 'style3', 'title', 'style3' ); $wp_styles->add_data( 'style4', 'title', 'style4' ); } add_action( 'wp_enqueue_scripts', 'my_styles'); |
スタイルシートを切り替えるためのリンクをページ内の好きな場所に挿入し完成です。
|
1 2 3 4 5 6 |
<ul> <li><a class="styleswitch" href="?style=style">デフォルト</a></li> <li><a class="styleswitch" href="?style=style2" rel="style2">ホワイト</a></li> <li><a class="styleswitch" href="?style=style3" rel="style3">ブラック</a></li> <li><a class="styleswitch" href="?style=style4" rel="style4">グレー</a></li> </ul> |
コメントを残す