備忘録へ

2006年8月24日 木曜日

あなたのパソコンのお気に入りに追加

ボタンを押すと、見ている人の「お気に入り」にあなたのホームページが追加されます。
5・6年生にもわかるやさしい…を参考にしました。
http://www.sky.sannet.ne.jp/masapine/java_top.html
http://www.sky.sannet.ne.jp/masapine/java_favorite.html

(1)　プログラムＡのソースをコピーして、ボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムＡのソース
<INPUT type="button" value="お気に入りに追加 !" onClick="javascript:window.external.AddFavorite('http://www.sky.sannet.ne.jp/masapine/java_top.html','５・６年生にもわかるやさしいJavaScript')" style="border-style:solid; border-width:2px; border-color:#66CCFF; background:#E0FFFF; font-size:10pt; color:#808080">

貼り付けたら、自分のページが表示されるように下記の赤い所を変更します。

（1）　これでお気に入りボタンが出来ました、次ページ参照
('http://www.sky.sannet.ne.jp/masapine/java_top.html','５・６年生にもわかるやさしいJavaScript')" のところをあなたのホームページのアドレスやタイトルにかえます。
アドレスは http://www.sky.sannet.ne.jp/masapine/java_top.html をあなたのホームページのアドレス（ＵＲＬ）にします。
タイトルは ５・６年生にもわかるやさしいJavaScript をあなたのホームページのタイトル名にかえます。
ここで注意をして欲しいのは、あなたのホームページタイトルに半角クォーテーション → ' を使っている場合です。そのままですとエラーになりますから全角にしてください。たとえば Masapine's Page ですと、Masapine’s Page のようにしてくださいね。
このプログラムは、Ｉ．Ｅ．（Internet Explorer）だけに使えるので、ボタンの色などを標準タイプとは違うように設定をしています。下の表を参考にして、あなたのページに合うようにかえてみてくださいね。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
かえるところ ソースをかえるところ
ボタンに表示される文字 value="お気に入りに追加 !"の お気に入りに追加 !
ボタンの枠の太さ border-width:2px;の 2
ボタンの枠の色 border-color:#66CCFF;の #66CCFF
ボタンの背景の色 background:#E0FFFF;の #E0FFFF
ボタンの文字の大きさ font-size: 10pt;の 10 
ボタンの文字の色 color:#808080の #808080

ボタンではなくて、お好みの画像や文字をクリックして、お気に入りに追加させたい場合もあると思いますので、その場合のソースをご紹介します。
表示の例
◆ 画像の場合のソースは下のようになります ◆
プログラムＡのソース
<a href="#" onClick="javascript:window.external.AddFavorite('http://www.sky.sannet.ne.jp/masapine/java_top.html','５・６年生にもわかるやさしいJavaScript');return false"><img border="0" src="images/favorite.gif" width="127" height="26"></a>
<img border="0" src="images/favorite.gif" width="127" height="26"> の部分が画像の指定をしているところです。
src="images/favorite.gif" の images/favorite.gif をあなたの表示させたい画像のファイル名にかえてください。この images/favorite.gif は、大きさが、よこ127ピクセル、たて26ピクセルの画像ですから、width="127" height="26" となっています。この 127 と 26 は、あなたのえらんだ画像の大きさにかえてくださいね。
（2）　 これで画像をクリックするとお気に入りになりました　次ページ参照
◆ 文字の場合のソースは下のようになります ◆
プログラムＡのソース
<a href="#" onClick="javascript:window.external.AddFavorite('http://www.sky.sannet.ne.jp/masapine/java_top.html','５・６年生にもわかるやさしいJavaScript');return false"><font style="font-size: 15px" color="#666666">お気に入りに追加！</font></a>
文字の大きさや色をかえる場合は、style="font-size: 15px" の 15 をあなたの好きな大きさにかえます。色は color="#666666" の #666666 を好きな色にかえてください。
文字のアンダーラインをなくしたい場合は、下に紹介するソースをHEAD区間に貼り付けてください。その場合は、ページにあるリンクすべてのアンダーラインがなくなります。
アンダーラインをなくすソース
<STYLE type="text/css">
<!--
A:link {text-decoration:none;}
A:visited {text-decoration:none;}
A:active {text-decoration:none;}
-->
</STYLE>
（3）　 これで文字をクリックするとお気に入りになりました　次ページ参照