|
| いまさらHTML,CSS講座トップ > HTMLテンプレート インデックスページ > お気に入り追加ボタンの作成 |
|
|
 お気に入り追加ボタンの作成
|
| ブラウザの機能のひとつである、お気に入り や ブックマーク などの機能を、Webページに埋め込みます。 |
| ■ 基本 お気に入り追加ボタン |
|
 ソース 基本 |
| テキストボタン
<a href="javascript:window.external.addFavorite(URL','サイト名')">お気に入りに追加</a>
|
| プッシュボタン
<input type="button" onclick="window.external.addFavorite('URL','サイト名')" value="お気に入りに追加">
|
|
 表 示 |
|
|
| ソース中の URL には、サイトのURL、サイト名 には、サイトのタイトルを記述します。サイト名は、お気に入り、または、ブックマークされた時のショートカットの表示名になります。また、お気に入りに追加は、ボタン上に表示されるテキストです。 |
|
| ■ テキストのお気に入り追加ボタンの色を変える |
|
| ソース 基本 |
<a href="javascript:window.external.addFavorite(URL','サイト名')" style="color:#4169e1;">お気に入りに追加</a>
<a href="javascript:window.external.addFavorite(URL','サイト名')">お気に入りに追加</a>
|
|
| 表 示 |
|
|
| スタイルシートの color プロパティで、テキストの色を指定しています。 ⇒ カラーコード表 |
|
| ■ テキストのお気に入り追加ボタンに枠をつける |
|
| ソース 基本 |
|
<a href="javascript:window.external.addFavorite(URL','サイト名')" style="color: #4169e1; border: 1px solid #4169e1; padding: 3px; text-decoration: none; ">お気に入りに追加</a>
|
| ソース class指定 |
■ head要素
<style type="text/css">
<!--
.button { border: 1px solid #4169e1; padding: 3px; }
-->
</style>
|
■ body要素 ( お気に入り追加ボタン )
<a href="javascript:window.external.addFavorite(URL','サイト名')" class="button" style="color: #cdcdcd; text-decoration: none; ">お気に入りに追加</a>
|
|
| 表 示 |
|
|
| スタイルシートの color プロパティで、テキストの色を指定、border プロパティで、枠線を指定、padding プロパティで、テキストと、枠線までの長さを指定しています。また、text-decoration プロパティは、オンマウス時のアンダーラインを表示しないように指定しています。 ⇒ カラーコード表 |
| スタイルシートの記述が長いので、枠線に関しての指定を head要素、または外部スタイルシートに指定を記述し、class指定をすると良いでしょう。 |
|
| ■ お気に入り追加ボタンに背景色を指定 |
|
| ソース 基本 |
|
<a href="javascript:window.external.addFavorite(URL','サイト名')" style="color:#a52a2a; background: #f5deb3; padding: 3px; text-decoration: none; ">お気に入りに追加</a>
<a href="javascript:window.external.addFavorite(URL','サイト名')" style="color:#4169e1; background: #f0f8ff; padding: 3px; ">お気に入りに追加</a>
|
|
| 表 示 |
|
|
| スタイルシートの color プロパティで、少し濃い目のテキストの色を指定し、background プロパティで、テキスト色より薄い背景色を指定しています。 ⇒ カラーコード表 |
| また、padding プロパティで、テキストと枠との長さを指定しています。text-decoration プロパティの有無の表示の違いを比べてみて下さい。( 上 = 下線表示なし、下 = 下線表示あり ) |
|
| ■ 色々なお気に入り追加ボタン ( プッシュボタン ) |
|
| ソース 基本 |
| head要素
<style type="text/css">
<!--
.push { background: #ffffff; border: 1px solid #cdcdcd; padding: 3px; color:#cdcdcd; }
.push001 { background: #ffffff; border: 1px solid #0000cd; padding: 3px; color: #0000cd; }
.push002 { background: #ffffff; border: 2px dotted #0000cd; padding: 3px; color: #0000cd; }
-->
</style>
|
| body要素 ( お気に入り追加ボタン )
<input type="button" onclick="window.external.addFavorite('URL','サイト名')" value="お気に入りに追加" class="push">
<input type="button" onclick="window.external.addFavorite('URL','サイト名')" value="お気に入りに追加" class="push001">
<input type="button" onclick="window.external.addFavorite('URL','サイト名')" value="お気に入りに追加" class="push002">
|
|
| 表 示 |
|
|
| スタイルシートの background プロパティで、ボタンの背景色、border プロパティで、枠線、padding プロパティで、テキストと、枠線までの長さ、color プロパティで、テキストの色を指定しています。 ⇒ カラーコード表 |
| スタイルシートの記述が長いので、head要素 または外部スタイルシートに指定を記述し、class名で指定すると良いでしょう。 |
|
|
|
|
|
|
