JavaScriptを使ってスタイルシートをボタンで切り替える 黒か白か... また悩み出したので両方やっちゃうっ!!

最初は白をベースとした配色だったけど、途中で黒もいいなーと思って黒っぽくして... そしてまた白もいいな~っと...w
何かこうなる気もしてたけど...w って事でこの際、白でも黒でも好きな方で見れるよう切り替えボタンを設置してみました♪( ̄ε ̄〃)b
もちろん「cookie」に保存してるのでページを切り替えても大丈夫♪
てか、久々に白っぽくしたら何か眩しいっ!!www(≧∀≦*)
そして細部の配色をもう一回見直さないとな...






1.今回の仕様について


上記でも書きましたが、そもそもはブログの配色を “白っぽい感じ” にするか “黒っぽい感じ” にするかを悩み、それなら好きな方で表示出来るよう切り替えボタンを設置しよう!となったのですが...

実際やるとなると、色々と考える点が多く... ( ̄▽ ̄;)

▼このブログでは以下のような仕様?になってます♪

まず、切り替えるのはブログの「背景色と文字色だけ(部分的な変更)」なのか?、それとも「スタイルシートごと(全体的な変更)」なのか? と言う点を考えたのですが、このブログの白と黒のデザインはそれぞれ色んな箇所が異なる為、今回は「スタイルシートごと切り替える仕様」にしました。

具体的には黒いデザインのスタイルシート(cssファイル)を標準の「固定スタイルシート」にして、白いデザインのスタイルシート(cssファイル)を「代替スタイルシート」に設定し、切り替えボタンをクリックする事で「代替スタイルシート」を適用する・適用しないを操作しています。
※スタイルシートの種類について詳しくは こちら をご覧下さい。

■標準で常に表示されるスタイルシートが「Black(黒)
このブログを初めて訪問した方やCookie(クッキー)をリセットした場合は、この標準のスタイルシートのみ適用した表示(黒いデザイン)になります。


■通常は適用されないスタイルシートが「White(白)
切り替えボタンの「White」をクリックした場合に適用される代替スタイルシート。
なので、今回の場合だと標準の黒いデザインを後から白いデザインで塗りつぶしてるような感じ?w
また、本来なら「代替スタイルシート」には変更する部分のみ設定をすれば良いのですが、今回すでに黒と白それぞれのパターンで作ったスタイルシートがあったのでそのまま使ってます。
(決して手抜きでは無いです... ただ、ちょっと面倒だっただけなんです...w)


そしてその切り替えの動きや、切り替えた状態をCookie(クッキー)で保存する方法については、今回色んなプラグインやjQueryなども試したのですが、ブラウザによって動きが異なったり... 切り替えに時間が掛かり一瞬表示が崩れたり... 切り替えた状態が保存されたりされなかったり... FC2ブログだとちゃんと機能しなかったりなど... 思ってた以上に苦戦しました... (TヘT)

そんな感じで色々試した結果、以下の方法が一番スムーズな動きで簡単に実装出来たのでご紹介します♪




2.styleswitch.jsを使った方法


今回このブログではこの方法(JavaScript)でスタイルシートの切り替えを行ってます♪

▼まずは以下のサイトから「styleswitch.js」をダウンロードします。

Dynamic Drive DHTML Scripts- Style Sheet Switcher(v1.1)

またまた英語のページですが...w
サイトを開いて少し下にスクロールすると以下の画像のように「styleswitch.js」のリンクがあるので、そのリンク上で右クリックし「名前を付けてリンク先を保存」をします。
(とりあえず分かり易い場所にそのままのファイル名で保存すればOKです♪)

styleswitch.jsのダウンロード

▼ファイルをダウンロードしたらサーバーにアップロードします。
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



どうです?簡単でしょ?( ̄ε ̄〃)b

出来るだけ簡単で説明しやすい方法を探したので...w
基本的な実装方法はこれで終了なのですが、スイッチの部分が「ただのテキストリンクじゃ嫌だっ!!」って方の為に「styleswitch.js」のページ内に記載されてるサンプルを元に他の表示方法もご紹介しますねw




3.切り替えスイッチのサンプル



▼ラジオボタン
<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>

※実際に表示するとこんな感じ♪
Black
White



▼セレクトメニュー
<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>

※実際に表示するとこんな感じ♪



▼このブログのボタン(画像を使わずCSSでボタンっぽく見えるようにしてます♪)
<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;}

※グラデーションの部分は「Ultimate CSS Gradient Generator 」で作ってます♪

※実際に表示するとこんな感じ♪
White
Black




4.スタイルシート切り替えのまとめ


今回の方法で使ってる「styleswitch.js」はオプションを使うとランダムでスタイルシートを変更出来るみたいです... 今のとこ使う予定は無いので今回は触れませんでしたが...

スタイルシートの切り替え自体は簡単に実装出来たけど、もっとスマートなスクリプトで切り替え出来ないかと色んな方法を試してたら記事にするのに時間が掛かりました... ( ̄▽ ̄;)

記事途中の文章の最後に...

明日は本気出す!!。( ̄∇ ̄*)o

なんて書いてましたが... 私の本気なんてそんなもんみたいです... ww

何とか「jQuery」でスマートに出来ないかと色々やってたんですが、どうもうまく行かず...
なのでそれは今後の課題として、いつか何とかします...ww


ってことで、今回のようにスタイルシートを操作する事でサイト(ブログ)内のテキストの大きさを大・中・小から選べるようにしたり、色んなカラーバリエーションから色合いを選べるようにしたり等など、アイデア次第で色んな工夫が出来るしアクセシビリティユーザビリティの向上にもなると思います♪

またボタン1つで全く違う見た目のブログにする事も可能なのでそれはそれでちょっと面白そう♪w


ふぅ~ 今回の記事は久々に頑張ったっ!! ( ̄ε ̄〃)b
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-11-26 | JavaScript | コメント(24) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/60-2f2ee3e3

「スタイルシート(CSS)をスイッチで切り替え」へのトラックバック

- TrackBack -


「スタイルシート(CSS)をスイッチで切り替え」へのコメント

- Comment -

色々カスタマイズ・・・スゴっ!!(笑)

背景はブラックを選ばせてもらいました。

やっぱり白だとまぶしいので(笑)

コメントを書こうとした時も、ゆっくりスライド・・・


かっこええぇぇぇぇぇ!!


いいなぁー、PCに強くなりたいな(笑)


コメントありがとうございます♪

ほんとそうなんですよねー。

楽しくやろうと思ったら、やっぱり一人じゃ無理なんですよね。

親しくして貰えるブロガーさん達が居るから、

色々な刺激を受けて楽しめるんです♪

その為には、共存共栄することで、お互いが長く続けられることが必要だと、

私は思っているんです♪

共感頂いて、嬉しいです♪

つーことで、ランキングなども全ポチしておきました♪(笑)

 
  • 2014-11-27 00:27
  • らいふさん@管理人
  • 編集

No title

あると♪さんこんばんは。

記事途中にコメントしちゃってすいません(^_^;)


確かにいろんなデータが取れそうですが
問題はうまくまとめられるかどうか…

特にアクセス解析は皆さんが気になるところではないか
と思っていますのでうまく伝えたいのですが(^_^;)


今回の「ドメイン取得」でGoogleの検索結果に
どう影響が出るのかも気になるところです。
(今はまだサイトがインデックスされていないようです)

ただし、ブログのネタに困ることは当分なさそうですので
安心ですね(^-^)



さっき、あるとさんのブログに来てみたら
「白」だったのでびっくりしました(゜.゜)
記事の出来上がり楽しみにしてます。
(別に急かせているわけじゃないんで気にしないでくださいね)


応援ですc(^o^)




  • 2014-11-27 00:34
  • じゅんぴーAさん@管理人
  • 編集

又、私のFireFoxの仕業か?

あると♪さん

ブログに来てみてビックリしました。
又、私のFireFox何かしてくれちゃってるの?
って事で実はSafariでも調べてみた・・・笑
そしたら、右上にボタンが2つ、凄い。
色を変えようと考える所が素晴らしい。
いやぁ、本当に何時も一歩、いや、二歩も
三歩も先行くあると♪さんですねぇ。
お供致しますよぉ。
応援ポチです。
  • 2014-11-27 00:53
  • girigiri26さん@管理人
  • 編集

No title

びっくりしましたよ。
またグラボ逝っちゃったのかと思って (≡ε≡;)

こんなんできんですねぇ、すごいなー。
黒にしたら落ち着きました。
ランキングもすごいですねー。

では、応援してきます ( ´∀`)ノ
  • 2014-11-27 01:34
  • neojpskazさん@管理人
  • 編集

Re: 色々カスタマイズ・・・スゴっ!!(笑)

> らいふさん

やっぱ白だと眩しいですよねww
白は白でもちょっとだけ色を付けた方が
見やすいような気がするのでその点も今後考えます♪

また、ランキングの全ポチありがとうございますwwd(≧∀≦)b
  • 2014-11-27 16:56
  • あると♪さん@管理人
  • 編集

Re: No title

> じゅんぴーAさん

いつもありがとうございます♪
記事途中でもコメント大歓迎ですww(≧∇≦)ノ

確かにデータをどうまとめるかって大事ですねw
そして、それをどのように今後に生かして行くか...w

とりあえず思い付きで白と黒を切り替えれるようにしたのですが
色々と見直さないと行けないとこが出てきて...( ̄▽ ̄;)

一部ちゃんと表示出来てない部分や、IEではうまくクッキーの保存が出来ないとか...
仕組み自体をもう一度見直さないとって感じです(;><)


  • 2014-11-27 17:04
  • あると♪さん@管理人
  • 編集

Re: 又、私のFireFoxの仕業か?

> girigiri26さん

基本的には私もFireFoxをメインに使ってます♪w
配色についてはいつも悩んでたんですよね...

それなら、それぞれ好きな方が選べる選択肢を作れると面白いかな?ってw


  • 2014-11-27 17:10
  • あると♪さん@管理人
  • 編集

Re: No title

> neojpskazさん

紛らわしくてすみませんww( ̄ε ̄〃)ゞ

やっぱ黒が見やすいですかねw
私的には黒の方が良いんですけど、どうなのかな~?と思ったりw

またランキングについては、ホント皆様に感謝です♪d(≧∀≦)b
  • 2014-11-27 17:13
  • あると♪さん@管理人
  • 編集

No title

すごいーー(≧∇≦)
白も新鮮でいいですね〜(^o^)
あなたはどっち?みたいでいいですよー。
私はしばらく白で行きます(^○^)
  • 2014-11-27 17:45
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

ありがとうございます♪( ̄ε ̄〃)ゞ

白と黒で真逆の色合いなので、より新鮮に感じるのかも知れませんねw

こうやって訪問者さんそれぞれが好きな方を選べるようにしたかったので良かったです♪

どこか変なとこがあれば教えて下さいね♪ww( ̄▽ ̄;)
  • 2014-11-27 21:41
  • あると♪さん@管理人
  • 編集

同記事にコメ失礼します♪

ランキング凄いですね♪

FC2・・・2位

人気ブロ・・・2位

ぶろぐ村・・・1位

凄っ(笑)

確かに、これだけ参考になる情報を発信していれば、

アクセスも伸びるだろうし、応援ポチも入りますよねー♪

おめでとうございます♪

当然応援ポチしたので、分かりました(笑)
  • 2014-11-28 01:38
  • らいふさん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2014-11-28 08:11
  • -さん@管理人
  • 編集

Re: 同記事にコメ失礼します♪

> らいふさん

同記事のコメントでも全然OKです~♪d(≧∀≦)b

ランキングについてはホント皆様のおかげで... 感謝感激ですっ!!(≧∀≦*)
らいふさんもいつも応援ありがとうございます♪w

今後もさらに頑張りますっ!!w
  • 2014-11-28 19:14
  • あると♪さん@管理人
  • 編集

No title

お仕事忙しいのかな?まーそういう日もありますよね(^o^)/
毎日お邪魔してたら、微妙に記事に変化が 笑
明日は本気出す!!笑
  • 2014-11-29 14:41
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

色んな方法を試したり...
うまく行かない原因を調べたり...

なんやかんやしてると時間が掛かってしまいました...( ̄▽ ̄;)

って事で今日こそは本気出しましたっ!!ww
  • 2014-11-29 16:06
  • あると♪さん@管理人
  • 編集

No title

あると♪さん お久しぶり?です。

どうやらランキングでの快進撃が勢いを増していらっしゃるようですね。

今後も更なる躍進を期待しております^^

私も応援ポチ!で加勢させていただきます。
  • 2014-11-29 18:39
  • T.Oさん@管理人
  • 編集

コメントありがとうございます♪

私も独身時代は、ほとんど宝くじは買いませんでしたねー。

もっぱらパチスロで、すぐに現金が手に入る方法ばかりを追ってました(笑・・・そして現実には失ってましたけど(泣))

パンチ(嫁)が、一緒に暮らすようになってから、

年末ジャンボだけは買う・・・っていう流れが生まれて、

それ以来毎年買ってます♪

まー、少しでも当たってくれたら、ほんとベビーカーとか、

ベビーシートとか、買いたいですね(笑)
  • 2014-11-30 00:11
  • らいふさん@管理人
  • 編集

こんばんはヽ(^o^)丿

あると♪さんこんばんは。

いやーお褒めの言葉うれしいです(^^ゞ

ありがとうございますm(__)m

ただ、サイト公開したのはいいですが、現在次の試練にぶち当たってます(-_-;)


「Googleにインデックスされない!」

これは結構時間がかかる場合があるようです。
今日Googleのウェブマスターツールでクロールしてくれるようアプローチしといたんですけどどうなるやら…

URLの正規化などもしましたし、あとは待つのみですが不安ですね。

このままGoogleに表示できなかったら、いつまでたっても訪問者は現れないのでは…と(+_+)


「Googleさんお願いします」
  • 2014-11-30 00:22
  • じゅんぴーAさん@管理人
  • 編集

styleswitch.js

こんばんは
記事を読んでいて、styleswitch.jsがなんで必要なの?
って、思いましたが、ダイナミックにボタンを押すだけでスタイルシートを変更するのに必要だったんですね?
いやぁ、世界には色々な物があるんですねぇ。
それを見つけて来る、あると♪さんも凄いですが・・・
色々勉強になります。
又、何度も実践してみないと分からない事だらけですが
きっと、何度もここに来て、ふむふむと考えながら、
そして、あると♪さ〜〜んって事になると思うのでが
少しでも理解出来るよう頑張ります。笑
応援ポチと言うより、講習料ポチです。
  • 2014-11-30 02:45
  • girigiri26さん@管理人
  • 編集

Re: No title

> T.Oさん

数日ぶりかな?w

でもT.Oさんのブログは毎日拝見してますよ♪(≧∇≦)b

ランキングについては、ホント皆様のおかげでw
今後も頑張りま~す♪d(≧∀≦)b
  • 2014-11-30 15:20
  • あると♪さん@管理人
  • 編集

Re: コメントありがとうございます♪

> らいふさん

こちらこそいつもありがとうございます♪

いくらかでも当たるといいですね♪d(≧∀≦)b

色々買い揃えないといけないですしねw


  • 2014-11-30 15:32
  • あると♪さん@管理人
  • 編集

Re: こんばんはヽ(^o^)丿

> じゅんぴーAさん

確かにそこが一番問題ですからね...(;><)

そしてインデックスされたら今度は検索順位の問題が...ww

頑張って下さいっ!!(≧∇≦)ノ
  • 2014-11-30 15:37
  • あると♪さん@管理人
  • 編集

Re: styleswitch.js

> girigiri26さん

確かにそう言われてみればそうですね...
自分的には何の為に必要で、何を思って取り入れたってのを表現したつもりでも
見てくれた方にそれが上手く伝わってなければ意味無いですもんね...><

もっと分かりやすく伝えれるよう、今後の参考にしますっ!!d(≧∀≦)b

またいつも応援もありがとうございます♪
  • 2014-11-30 15:41
  • あると♪さん@管理人
  • 編集

承認待ちコメント

このコメントは管理者の承認待ちです
  • 2016-06-11 11:56
  • -さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ