2014.11.26
■標準で常に表示されるスタイルシートが「Black(黒)」
このブログを初めて訪問した方やCookie(クッキー)をリセットした場合は、この標準のスタイルシートのみ適用した表示(黒いデザイン)になります。
■通常は適用されないスタイルシートが「White(白)」
切り替えボタンの「White」をクリックした場合に適用される代替スタイルシート。
なので、今回の場合だと標準の黒いデザインを後から白いデザインで塗りつぶしてるような感じ?w
また、本来なら「代替スタイルシート」には変更する部分のみ設定をすれば良いのですが、今回すでに黒と白それぞれのパターンで作ったスタイルシートがあったのでそのまま使ってます。
(決して手抜きでは無いです... ただ、ちょっと面倒だっただけなんです...w)
▼ファイルをダウンロードしたらサーバーにアップロードします。
FC2ブログの場合、管理画面から「ファイルアップロード」をクリックしダウンロードした「styleswitch.js」を画面内にドラッグして、そのままの名前でアップロードすればOKです。
するとファイルのURLは以下のようになります。(このブログの場合のURL)
「http://blog-imgs-46.fc2.com/i/n/t/interest2014/styleswitch.js」
▼次にHTMLのhead要素内(<head> ~ </head>の間)に以下のように記述します。
(以下はFC2ブログの場合の記述例となります。)
<link type="text/css" rel="stylesheet" href="<%css_link>"> <link type="text/css" rel="alternate stylesheet" title="White" href="http://~ 省略 ~/white.css"> <script type="text/javascript" src="http://~ 省略 ~/styleswitch.js"></script>
※HTML5だとこの場合「type="text/css"」と「type="text/javascript"」の部分は省略してOK♪
※1行目のCSS(標準にするスタイルシート)にはFC2ブログの変数「<%css_link>」を入れてます。
通常、特に何もしなくても標準のスタイルシートは「href="<%css_link>"」となってると思います。
「<%css_link>」とは「テンプレートの設定」で “適用” 状態のテンプレートのスタイルシート(cssファイル)のURLを表示する変数です。( FC2ブログの変数について詳しくは こちら )
※2行目で代替スタイルシートの記述をしてます。(標準のスタイルシートより下に記述する)
切り替え用のCSSファイルとなるので、rel属性は「alternate stylesheet」とします。
また、title属性にはCSSを判別するため任意の名前を付けます。(上記の例は “White” としてます)
そして href= には変更したい内容を設定したCSSファイルのURLを入れます。
※4行目は1つ前の手順でアップロードした「styleswitch.js」の読み込みを行う記述です。
「http://blog-imgs-46.fc2.com/i/n/t/interest2014/styleswitch.js」のようにFC2ブログのファイルアップロードの画面で表示されてるURLを入れます。
※今回は切り替えるパターンが黒と白だけなので、代替スタイルシートを1つだけ設定してますが、複数の切り替えを行いたい場合は代替スタイルシートを追加し、それぞれ違うtitle属性を付ければOKです♪
▼最後に切り替えを実行する為の記述をHTMLの任意の場所に行います。
例えばテキストリンクを切り替えのスイッチとする場合は以下のように記述します。
<a href="javascript:chooseStyle('none',60)">Black</a> <a href="javascript:chooseStyle('White',60)">White</a>
※テキストリンクならこれだけの記述で済むので超簡単です♪
※「 ( 」 ~ 「 ) 」の間には指定するCSSの “title” とcookie(クッキー)の保持日数を入力します。
「'none'」=titleの指定が無いCSSを指します。(標準のスタイルシートのみ適用)
「'White'」=head要素内に記述した “代替スタイルシート” に付けた “title” と同じ名前にします。
※上記のソースを貼り付けると以下のようになります。(クリックすると実際に配色が変更されます♪)
Black
White
<form id="switchform"> <input type="radio" name="choice" value="none" onClick="chooseStyle(this.value,60)"> Black<br /> <input type="radio" name="choice" value="White" onClick="chooseStyle(this.value,60)"> White<br /> </form>
<form id="switchform"> <select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)"> <option value="none" selected="selected">Black</option> <option value="White">White</option> </select> </form>
<div class="color-white" onClick="chooseStyle('White',60)"> <i class="fa fa-retweet"></i> White</div> <div class="color-black" onClick="chooseStyle('none',60)"> <i class="fa fa-retweet"></i> Black</div> <br style="clear:both;"/>
※2行目と4行目の「<i class="fa fa-retweet"></i>」はアイコン型Webフォントの “Font Awesome” を利用してアイコンを表示してる部分です。(詳しくは こちら の記事をご覧下さいませ♪)
div.color-white,div.color-black{ float:left; padding:3px 17px; margin:5px 0px 15px 0; border-radius:5px; font-weight:bold; font-size:16px; cursor:pointer; } div.color-white{ color:#333; margin-right:15px; border:1px solid #AAA; background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); box-shadow: 2px 2px 2px 0px #555; -webkit-transition: 0.3s; transition: 0.3s; } div.color-white:hover{ background:#FFF; transform: translate(2px,2px); box-shadow: 0px 0px 0px 0px #000; } div.color-white:active{box-shadow: 1px 1px 2px 0px #555 inset;} div.color-black{ color:#fff; border:1px solid #000; background: rgb(238,238,238); background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(153,153,153,1) 2%, rgba(85,85,85,1) 45%, rgba(51,51,51,1) 50%, rgba(85,85,85,1) 98%, rgba(119,119,119,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(2%,rgba(153,153,153,1)), color-stop(45%,rgba(85,85,85,1)), color-stop(50%,rgba(51,51,51,1)), color-stop(98%,rgba(85,85,85,1)), color-stop(100%,rgba(119,119,119,1))); background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%); background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%); background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%); background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#777777',GradientType=0 ); box-shadow: 2px 2px 2px 0px #555; -webkit-transition: 0.3s; transition: 0.3s; } div.color-black:hover{ background:#666; transform: translate(2px,2px); box-shadow: 0px 0px 0px 0px #000; } div.color-black:active{box-shadow: 1px 1px 2px 0px #000 inset;}
- TrackBack -
- Comment -
- Post a Comment -
▼クリックすると配色が変更されます
このボタンの設置方法は こちら♪
2014.12.15
2014.12.09
2014.12.05
2014.12.04
2014.12.03
やっぱり白だとまぶしいので(笑)
コメントを書こうとした時も、ゆっくりスライド・・・
かっこええぇぇぇぇぇ!!
いいなぁー、PCに強くなりたいな(笑)
コメントありがとうございます♪
ほんとそうなんですよねー。
楽しくやろうと思ったら、やっぱり一人じゃ無理なんですよね。
親しくして貰えるブロガーさん達が居るから、
色々な刺激を受けて楽しめるんです♪
その為には、共存共栄することで、お互いが長く続けられることが必要だと、
私は思っているんです♪
共感頂いて、嬉しいです♪
つーことで、ランキングなども全ポチしておきました♪(笑)