お気に入りボタン のページを説明 : Seesaaブログカスタマイズ

記事

お気に入りボタン

お気に入りボタンの追加

記事を読んでもらった後や、サイトの訪問者が簡単にブックマークに追加しやすい様にする事は、後の訪問者の獲得にもつながります。

まずは簡単なお気に入りボタンの作り方についてです。

これは、ごく一般的なお気に入りボタンです。ただしインターネットエクスプローラー(以下IE)のみの対応となります。

<input type="button" value=" お気に入りに追加" onclick="window.external.AddFavorite('貴方のサイトURL','貴方のサイト名')" />

配置に成功すれば、下のようなボタンが表示されているはずです。

追加の場所ですが、サイトの左上につくのが理想的です。ただし一番左上はサイトマップを配置したいので、だいたい左上という事になります。

IE以外のブラウザにも対応する

先ほどまでのお気に入りボタンですが、IEにしか対応出来ません。

実際にIE以外のブラウザを使っている方は、IEと両方で先ほどのお気に入りボタンをクリックして動作確認をしてみて下さい。

IE以外のブラウザでは、実際にクリックしても動作しないと思います。

IEはWindowsの標準ブラウザであり、シェアも圧倒的なのですが、IE以外のブラウザを使う方も沢山いるのが現状です。

当然、ブラウザごとに対応したいのですが、ボタンはブラウザごとに記述を変えないと使えません。

色々なブラウザに対応したい場合は、それぞれのブラウザ用のボタンが必要となってしまいます。

しかし、それではスペースをかなり使ってしまいますし、ボタンが沢山並ぶのは不快なデザインです。

仕方ないのでジャバスクリプト(javascript)を使って、1つのボタンをブラウザに合わせて入れ替えるようにします。

IE、Firefox、Operaに対応するお気に入りボタンを作ります。

まず、以下の枠内の記述から、サイトのアドレス、サイト名の部分を、それぞれ貴方のサイトのアドレスと名称に変えます。

記述を変更したテキストをjsファイルに保存します。保存はHTMLエディタで文字コードを貴方のサイトと合わせて下さい。

多くのブログはEUC-JPで、SeesaaブログはShift-JISです。文字化けやエラーの元ですので、分からない場合はちゃんと確認して下さい。

あとは、アップロードしたうえで、表示したい所に以下の記述を使います。
<script src="ジャバスクリプトのアドレス" type="text/javascript"></script>

例えば、私のブログの場合、こうなります。
<script src="https://blog43custom.up.seesaa.net/js/Bookmark.js" type="text/javascript"></script>

以上でお気に入りボタンの追加ができたと思います。

ちゃんとこのようなボタンが表示されていれば成功です。




Seesaaブログカスタマイズのお気に入りボタンのリンクについて

Seesaaブログカスタマイズのお気に入りボタンのリンクについて
リンクを自由に設置して頂いて結構です。
宜しければ以下のタグをご使用下さい。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。