バルーンメッセージ作成チュートリアル（ソーシャルブックマーク編）　|　サイトマップメーカー

バルーンメッセージの作成手順の１例を紹介します。

今回は画像にポインターを乗せると、タブ付きのバルーンメッセージを表示し、タブをクリックすることでソーシャルブックマーク登録ボタンとRSSリーダー登録ボタンを表示するバルーンメッセージを作成する１例を紹介します。

今回はソーシャルブックマーク登録ボタンのソースとRSSリーダー登録ボタンのソースを取り込みますので、先にその設定をします。

ソーシャルブックマーク登録ボタン作成: サイトマップメーカーメイン画面の「ソーシャルブックマーク登録ボタン作成」タブを開きます。
登録先: バルーンに表示する登録先にチェックします。
必要であれば「メンテナンス」ボタンをクリックして、登録先の追加、削除、修正を行います。
表示設定: 今回は下記のように設定しました。
・列数＝ 2
・余白＝ 5 px
・XHTML にチェック
・アイコン＋文字にチェック
・文字サイズ＝ 12 px

「バルーンメッセージ作成画面」アイコンをクリックしてバルーンメッセージ作成画面を開きます。

タブの有無: 「あり」にチェックし、タブの数を 2 にしました。
ラベルの入力: 「タブ 1」を選択し、ラベルに「ソーシャルブックマーク」と入力して「セット」ボタンをクリックします。
「セット」ボタンをクリックするとタブのラベルが入力した文字列になります。; 続いて「タブ 2」を選択し、ラベルに「RSSリーダー」と入力して「セット」ボタンをクリックします。
「セット」ボタンをクリックするとタブのラベルが入力した文字列になります。
タブカラーの設定: 「背景色」、「閉じたタブ」、「線の色」をそれぞれ設定します。

画像: 画像にチェックをし、画像ファイルの置き場所を絶対 URL（URI）で入力します。
相対パスでも大丈夫ですが、管理が難しいこととサーバーにアップするまで確認ができませんので絶対 URL（URI）にされることをお勧めします。; 画像ファイルは自由に設定できますが、サイトマップメーカーサイトでもいくつかご用意しました。
「ソーシャルブックマーク登録ボタン」ページよりご自由にお持ち下さい。
直リンクでもかまいません。その場合は「ソーシャルブックマーク登録ボタン」ページに記載されている URI をこの欄に貼り付けてください。
今回は「http://sitemap.web-440.com/images/bookmark/blue_140_17_jp.gif」と入力しました。
サイズ: 画像のサイズを入力します。
今回は画像サイズに合わせて、幅 140 高さ 17 と入力しました。
Alt: Alt には「ソーシャルブックマーク」と入力しました。
SEO あるいはユーザービリティを考慮して「ソーシャルブックマークの登録」や「このページをソーシャルブックマークしてみんなに紹介する！」等の文言でも良いかもしれません。

ソーシャルブックマーク: ソーシャルブックマークのタブを開き、「SB登録ボタン取り込み」ボタんをクリックするとメイン画面で設定した内容のソースが書き込まれます。
必要に応じて内容を書き換えてもかまいませんが、通常このままで問題ありません。

RSSリーダー: RSSリーダーのタブを開き、「RSSリーダー登録ボタン取り込み」ボタんをクリックするとメイン画面で設定した内容のソースが書き込まれます。
必要に応じて内容を書き換えてもかまいませんが、通常このままで問題ありません。

Javascript ファイル名: 今回は「 smm_sample_img 」と入力しました。
作成: 「作成」ボタンをクリックすると保存場所を聞くダイアログが開きますので、保存場所を指定して「OK」ボタンをクリックします。
ページへ挿入: 「 smm_sample_img.js 」と「 index.html 」が作成されていますので、「 smm_sample_img.js 」をサーバーにアップロードします。
アップロードする場所はどこでもかまいませんが、私はいつも「 js 」という名のフォルダをつくって、Javascript ファイルは全てそこに置くようにしています。
次に「 index.html 」をメモ帳などのテキストエディタで開きます。（ホームページ作成ソフトでもかまいません）
11行目あたりに記載されている以下のコードを表示させたいページに貼り付けます。
<script type="text/javascript" language="javascript" src="smm_sample_img.js"></script>
「 src="smm_sample_img.js" 」の部分は相対リンクでも絶対URIでもかまいませんで、先ほどアップロードした「 smm_sample_img.js 」へリンクしてください。
<script type="text/javascript" language="javascript" src="../js/smm_sample_img.js"></script>