RSS 1.0
ボタンを設置できたら、自分のサイト・ブログに合わせてアレンジしたくなってくるかもしれませんね。
そこで今日取り上げるのは、ボタンのデザインを変える方法です。
今回は本文が長いです。
覚悟のうえで、続きをどーぞ。
■ペルソナ流ボタンの場合
「お気に入りに追加」ボタン(1) で紹介したPERSONA@BLOGの「お気に入り登録ボタン」の場合は、スクリプトにスタイルシートも組み込まれているので、ボタンの背景色・線・文字色を簡単に変えることができます。
（スクリプト詳細はこちらをご覧ください。）
見本では、スタイルシートの部分が次のようになっています。
border:1px solid #666666; /* ボタンの枠 */
color:#000000; /* ボタンの文字色 */
background-color:#efefef; /* ボタンの背景色 */
こんなボタンができます。
※このボタンは動作しません。これを、試しに書き換えてみます。
ボタンの枠を3pxと太くし、立体的な線（outset）にして、色も変更。ボタンの文字色と背景色も変えてみます。
border:3px outset #0066cc; /* ボタンの枠 */
color:#004986; /* ボタンの文字色 */
background-color:#CEE9EE; /* ボタンの背景色 */
こんなボタンになります。
※このボタンは動作しません。「お気に入りに追加」という文字も、好きな言葉に変更することができます。
以前の記事の繰り返しになりますが、このスクリプトのいいところは、動作しないブラウザの場合はボタンが表示されないことです。
■ＯＮ／ＯＦＦで色が変わるボタン
HTML手打ちで作るホームページ講座というサイトでは、カーソルを乗せたときと外したときでボタンの色が変わる方法を紹介しています。
メモ帳で職場のホームページを作ることになって勉強し始めた頃からお世話になっている、私にとって馴染みの深いサイトです。
<BUTTON onclick="window.external.AddFavorite ('http://testomomo.seesaa.net/','カスタマイズ実験室')" onmouseout="this.style.backgroundColor='red'
" onmouseover="this.style.backgroundColor=
'mintcream'" style="BACKGROUND-COLOR: #EAEAEA; COLOR: #666666; FONT-SIZE: 9pt"> お気に入りに追加 </BUTTON>
カーソルをボタンに乗せると（onmouseover）色がmintcreamに、カーソルを外すと赤になります。ここの部分を変えると、違う色になります。
文字色はCOLOR: #666666の部分。
<BUTTON onclick="window.external.AddFavorite ('http://testomomo.seesaa.net/','カスタマイズ実験室')" onmouseout="this.style.backgroundColor='orange'" onmouseover="this.style.backgroundColor='plum'" style="BACKGROUND-COLOR: #EAEAEA; COLOR: #444444; FONT-SIZE: 9pt"> お気に入りに追加 </BUTTON>
ボタンの色を、ＯＮのときはpulm、ＯＦＦのときはorangeに、文字色を濃い目のグレー（#444444）にしてみました。
■ボタンを画像にする
ボタンを画像にする方法も見つけました。
画像が使えると、デザインの幅がぐっと広まりますね。
webデザイナーが作るフリーホームページ素材で紹介されています。
<a href="JavaScript:window.external.AddFavorite('http://testomomo.seesaa.net/', 'カスタマイズ実験室')"><img src="http://*****" alt="お気に入り登録ボタン" border="0" /></a>http://***** の部分を、使用する画像のURLに書き換えてください。
このボタン素材は、webデザイナーが作るフリーホームページ素材で配布されているものです。この他にもボタン素材がいろいろありますので、見てみてくださいね。
このタグを見たとき、思いのほかシンプルなタグで、ちょっと驚きました。
「お気に入りに追加」ボタン(2) で紹介したのが、
<form>ですから、似ていますね。
<input type="button" onclick="window.external.AddFavorite ('http://testomomo.seesaa.net/','カスタマイズ実験室')" value="お気に入りに追加"></form>
ボタン素材について、参考までにサイトをご紹介します。
Buttonator.com v.2（英語）では、サンプルのなかからデザインを選んで表示する文字を入力し（日本語ＯＫ）、簡単にボタンを作ることができます。
もちろんご自分で一から作ったり、素材屋さんの素材を使ったりして、オリジナル感あふれれるボタンを用意することもできますね。
思わずクリックせずにいられなくなっちゃうような、素敵なボタンをぜひ作ってみてください。
↓参考になったら、クリックで応援してね！↓
［今回参考にさせていただいたサイト・ブログ］
- PERSONA@BLOG
IEのお気に入りに追加 - HTML手打ちで作るホームページ講座
JAVA script > HPをお気に入りに追加させる - webデザイナーが作るフリーホームページ素材
お気に入りに追加ボタン
［関連記事］
TBありがとうございました。
とても、親切に書かれているので、わかりやすかったです。
また、色んな記事読ませていただきますね。
では。
コメントくださってありがとうございます。
私自身まだ初心者で、消化できたことしか書くことができません。
わかりやすいと言っていただけて、嬉しかったです。
こちらこそ、勉強させていただきたいと思いますので、よろしくお願いします。
とても丁寧に書かれていて、私でも理解できました。
本当にありがとうございました。
また、勉強させてくださいm(_ _)m
参考になって良かったです♪
私自身初心者なので、はしょって書いても伝わらないだろうなーって身を持って感じてますので。^^
良かったら、またカキコしてくださいね。
アワビおいしそうですね！
思わずじゅるっと反応しそうになりました(笑)。