こんなかんじで噴出しをCSSでつくってみたよ！
ただいまテスト中です＞＜
わーい！うまくできたよ～♪長い文章を打ち込んでもずれないかテストして・・・
改行するときは手打ちでbrいれて・・・。
アメブロのエディターを使っていると勝手に改行が入ってしまってCSSが崩れることがしばしばなので厄介ですね。。気をつけないと！
今日はテンプレートのデモページ制作の際、に搭載した「styleswitcher.js」をご紹介します！
スタイルシートをjqueryで切り替えることによって、予め用意しておいた数パターンのCSSに
ボタンクリックで切り替えられるという優れもの！
早速デモページを御覧ください。
デモページを開いて左SidebarのFaceBookボタンの下にカラーテキストを置きましたので
そちらをクリックすると切り替わります。
「styleswitcher.js」によるスタイル切り替えを搭載したデモ
今回テンプレートで6種類のカラーパターンを作成したので、それを6つ分デモアカウントを
つくって、設定するのって大変だなぁ・・・というところから、切り替えができたらいいのに！
と思い、この「styleswitcher.js」をデモページに導入してみました。
気分に合わせて変えてみるのも楽しいですよね！
使いかたとしては、文字フォントのサイズを大・中・小と3つのパターンを用意しておき、
それをユーザー様が自由に切り替えられるというユーザビリティー重視の使いかたが
よくされているようです。
実際にデモページでクリッククリック！して遊んでみてくださいね☆
大変おまたせいたしましたm(_ _)m
本日丸一日徹夜で、オリジナルテンプレートを製品化致しましたよ☆
頭が朦朧としますが・・・是非多くの方にお安く、テンプレートを
ご利用いただければと思い頑張って作りました！
テンプレートの説明ページはこちら
テンプレートのデモページはこちら
このテンプレートの特徴はメニューバー搭載やフッター搭載、
Twitterボタン、FaceBookボタン搭載などは目玉ですが、なんといっても、
いろんなデザインに簡単に変更できてしまうところが一番の優れた点です。
色が変更できたりヘッダー画像や背景を入れ替えてあげるだけで、
ぜんぜん違う印象のブログに変身しちゃうんです！
デモページではカラーの切り替え機能をつけておきましたので、
6種類のカラーバリエーションを是非御覧ください！
見ていただけるだけでもすごく嬉しいです。
本日から3日間の発売記念キャンペーン☆
そしてなんと、発売日本日の今日～3日間に限って通常設置代行料が2100円のところを半額の
1050円で私が直接設置させていただきます！
テンプレートの価格と合わせても2000円チョットですので、是非この機会にどうぞ♪チョット高級なランチ一食我慢したらなんとGETできます・・（苦笑
P.S.昨日メッセージいただいていた皆さんに、お返事できておりませんでしたこと
大変申し訳ございません。本日順次お返事いたしますのでよろしくお願いいたいsます。
こんにちは！
今日のカスタムはヘッダーにあるプロフィール名を画像に置き換えてプロフィールページへの導線を強化するカスタムをしてみました。
すでにブログのヘッダーにはプロフィールページへのリンク画像を設置済みです。
これによって、プロフィール|ブログ|ピグ のテキストリンクは非表示にしました。
もともとブログのリンクは押せないですから意味が無い？！ピグへの導線もメニューバー
にあるのでここには不要かな～と。
ですので、一番目立たせたいプロフィールへのリンク画像をドーンと貼ってみました（笑
ヘッダー内での位置調整もあるので、すんなりとはうまくいかないかもしれませんが
簡単にCSSの解説です。
CSS
ヘッダーのプロフィール名のテキストリンクを画像に置き換えるCSS
上記CSSで赤い文字を自分の画像の大きさに変えます。
変えたものをそのままCSS編集に入れれば画像への置き換えは完了！
これで画像置換は出来ましたが後は位置の調整が必要です。
位置の調整はこちらのCSS
※ただし人それぞれ配置したい箇所が違いますのでここでは内容は明記しません。
以上、プロフィール名を画像に置き換えてプロフィールページへの導線を強化するカスタムでした！
カスタム名が長い・・・ですね（苦笑
今日のカスタムはヘッダーにあるプロフィール名を画像に置き換えてプロフィールページへの導線を強化するカスタムをしてみました。
すでにブログのヘッダーにはプロフィールページへのリンク画像を設置済みです。
これによって、プロフィール|ブログ|ピグ のテキストリンクは非表示にしました。
もともとブログのリンクは押せないですから意味が無い？！ピグへの導線もメニューバー
にあるのでここには不要かな～と。
ですので、一番目立たせたいプロフィールへのリンク画像をドーンと貼ってみました（笑
ヘッダー内での位置調整もあるので、すんなりとはうまくいかないかもしれませんが
簡単にCSSの解説です。
CSS
ヘッダーのプロフィール名のテキストリンクを画像に置き換えるCSS
#userNaviArea a {
width :244px;/*画像の幅*/
height:51px;/*画像の高さ*/
background: url(http://画像URL) no-repeat;
text-indent:-9999px;
}
width :244px;/*画像の幅*/
height:51px;/*画像の高さ*/
background: url(http://画像URL) no-repeat;
text-indent:-9999px;
}
上記CSSで赤い文字を自分の画像の大きさに変えます。
変えたものをそのままCSS編集に入れれば画像への置き換えは完了！
これで画像置換は出来ましたが後は位置の調整が必要です。
位置の調整はこちらのCSS
※ただし人それぞれ配置したい箇所が違いますのでここでは内容は明記しません。
#overHeader #userNaviArea {
}
}
以上、プロフィール名を画像に置き換えてプロフィールページへの導線を強化するカスタムでした！
カスタム名が長い・・・ですね（苦笑
ただいま25%節電中♪
などと表示しても面白いですね！
ただいま35%節電中♪
※なにをもって３５％かは不明です。。
左上にある稼働中の緑色のバーがjqueryを使ったプログレスバーになります。
使いかたは自由自在。
他にもこんな使いかたも・・
私は99%信頼できる人間です。
※なんのこっちゃ・・・（苦笑
ついでに
明日東京で雪が降る確率は0%です。
などなど。
遊び要素に使うとなんだか楽しいですよね
使い方
下記のソースをフリープラグインへ入れてください。
表示したい箇所に下記のように書いてください。
※複数設置する場合はid="spaceused1"の箇所は同じ数字を使わないでください。
id="spaceused1"
id="spaceused2"
id="spaceused3"
・・・
上記のように一つのバーに対してひとつの数字を割り当ててください。
1～10までの数字だけ使えるように外部プラグインを設定しております。
35％や0％と数字を変えるだけで自動的にバーの値も変わりますので、
是非お試しくださいね！
（注意）こちらのプラグインは私のサーバーに設置してありますので、万が一
サーバーに不具合等があった場合など表示されなくなることがありますことご了承ください。
それでは是非面白い使い方してみてくださいね！
わからないことがあればコメントを～☆
などと表示しても面白いですね！
ただいま35%節電中♪
※なにをもって３５％かは不明です。。
左上にある稼働中の緑色のバーがjqueryを使ったプログレスバーになります。
使いかたは自由自在。
他にもこんな使いかたも・・
私は99%信頼できる人間です。
※なんのこっちゃ・・・（苦笑
ついでに
明日東京で雪が降る確率は0%です。
などなど。
遊び要素に使うとなんだか楽しいですよね
使い方
下記のソースをフリープラグインへ入れてください。
<script type="text/javascript" src="http://webdesigns.jp/suidesign/js/jquery.progressbar/js/jquery.js"></script><script type="text/javascript" src="http://webdesigns.jp/suidesign/js/jquery.progressbar/js/jquery.progressbar.min.js"></script>
<script type="text/javascript" src="http://webdesigns.jp/suidesign/js/jquery.progressbar/js/bar.js"></script>
表示したい箇所に下記のように書いてください。
ただいま<span class="progressBar" id="spaceused1">35%</span>節電中♪
私は<span class="progressBar" id="spaceused2">99%</span>信頼できる人間です。
明日東京で雪が降る確率は<span class="progressBar" id="spaceused3">0%</span>です。
※複数設置する場合はid="spaceused1"の箇所は同じ数字を使わないでください。
id="spaceused1"
id="spaceused2"
id="spaceused3"
・・・
上記のように一つのバーに対してひとつの数字を割り当ててください。
1～10までの数字だけ使えるように外部プラグインを設定しております。
35％や0％と数字を変えるだけで自動的にバーの値も変わりますので、
是非お試しくださいね！
（注意）こちらのプラグインは私のサーバーに設置してありますので、万が一
サーバーに不具合等があった場合など表示されなくなることがありますことご了承ください。
それでは是非面白い使い方してみてくださいね！
わからないことがあればコメントを～☆