『お気に入りに追加』ボタンの設置(forefox対応版も)

読者さんたちのリピートのためには、
『お気に入りに追加』ボタンは必須ですよね。

私自身、何回もやっているんですが、毎回google検索してコピペばかり
だったので、ちょっと、ここに、ソースをメモしておきます。

一番簡単。お気に入りに追加ボタン

よくある、こんなボタンです。

設置方法は、これ↓をコピペして、置きたい場所に貼ります。
そして、サイトURLとサイト名を変えて、できあがりです。

これも簡単。お気に入りに追加テキストリンク

ボタンじゃなくて、リンクで作ったほうがスッキリする場合、

例:
お気に入りに追加

これ↓をコピペして、置きたい場所に貼ります。
そして、サイトURLとサイト名を変えて、できあがり。

FireFoxにも対応のお気に入りに追加ボタン

上の2つは、簡単なんですが、Internet Explorer向けで、FireFoxで見ている場合はクリックしても登録されないんです。で、こちらは、そのFireFox向けのもの。

ヘッド部分と、ボタン設置部分と、2箇所にソースを貼る必要があります。

ヘッド部分は、htmlの<head>~</head>の間に貼ります。
(特にサイト名やサイトURLを入れる必要はありません)

ボタン設置部分はボタンを設置したい場所に貼ります。

ボタンをリンクにしたい場合は、こちら。

ちょっと上級者編

お気に入りに追加ボタンを目立つものに変えたいときは、
こんなのも面白いですね。(IE用のみ)

例:お気に入りに追加♪

例:お気に入りに追加♪

上級者編のものは、
後半の『style=』以降を変えると、色や線などが変えられます。

例えば、
●border:1px solid orange;  ⇒枠線の太さ、solidは「実線」の意味、色
●background-color:#F8DC85;   ⇒背景の色
●color:brown;          ⇒文字の色

↑この色の設定などはスタイルシート(CSS)なんですが、しっかり理解してカスタマイズしたい方は、こちらをどうぞ。CSS 概説 | ボーダ

結構楽しいので、自分で、
サイトに合うように、いじってみてくださいね。
(でも、儲かる作業じゃないので、ほどほどに。笑)

※上級編は、【HP・WEB収入】課題達成型アフィリエイトさんのお気に入りに追加ボタン作成方法の記事を参考にさせていただきました。

“『お気に入りに追加』ボタンの設置(forefox対応版も)” への1件のフィードバック

  1. メビウス より:

    とても参考になりました!

    ありがとうございます。

コメントを残す

サブコンテンツ

このページの先頭へ