AddClips カスタマイズ仕様について

・ カスタマイズ仕様
・ サンプルコード

AddClipsでは「ポップアップ型」「マウスオーバー型」ともに、自由にカスタマイズが可能です。 それぞれのサイトにあった「色」や「ボタン表示位置」などをカスタマイズして、より便利にAddClipsをご活用下さい!

また、最低限設定すべき項目もありますので、ボタン発行時に含まれていますが、間違ってその項目を消してしまった!という場合も、以下のカスタマイズ仕様を参考にご利用下さい。
カスタマイズ仕様
以下がAddClipsのカスタマイズ仕様書となります。 「変数名」はAddClipsがはき出すJavascriptの中で、指定できる項目名。「ポップアップ」はポップアップ型ボタンでの設定可否。「マウスオーバー」はマウスオーバー型での設定可否を示しています。

「必須」は必ず設定すべき項目。「可」は指定することが可能な項目です。「-」は指定できない項目です。また、無料版・プレミアムで利用できる機能が違うため、「○」「×」でそれらを表しています。

変数名 ポップアップ マウスオーバ カスタマイズ項目の説明 入力値 無料版 プレミアム
AddClipsUrl 必須 必須
ブックマークしてほしいURLを任意で指定することができます。都度指定するのではなく、現在開いているページをブックマークしてほしい場合は、「location.href」と書いてください。

例:固定でURLを指定する場合
AddClipsUrl = "http://www.addclips.org";

例:現在のページをブックマークしてほしい場合
AddClipsUrl = location.href
文字列

location.href
AddClipsTitle 必須 必須
ブックマーク時に表示したいページのタイトル名を任意で指定することができます。都度指定するのではなく、現在開いているページタイトルでブックマークしてほしい場合は、「document.title」と書いてください。

例:固定でタイトルを指定する場合
AddClipsUrl = "ソーシャルブックマーク統合サイト";

例:現在のページをブックマークしてほしい場合
AddClipsUrl = document.title
文字列

document.title
AddClipsId 必須 必須
AddClipsが管理しているボタンIDです。基本的に、この項目は変更しないようにしてください。変更した場合、正常な動作が行われない場合があります。ただし、通常型ボタンで使っていたIDをマウスオーバー型で使うなど、自分のIDを付け替えることは可能です。
指定コード
AddClipsMode 必須
「マウスオーバー型」か「ポップアップ型」か設定します。省略した場合は、「マウスオーバー型」になります。

例:ポップアップ型選択の場合
AddClipsMode = "popup";
「popup」

「mouseover」
AddClipsDefault
リンク先の画面を「ブックマーク」にするか「RSSリーダーに追加」にするかを設定します。マウスオーバー型の場合はタブの初期表示位置もこの変数で選択します。選択しなかった場合は、「ブックマーク」になります。
「bookmark」
もしくは
「rss」
AddClipsRssUrl -

RSSのURLを指定できます。AddClipsUrlにブックマークしてほしいURLを、AddClipsRssUrlにRSSリーダーに追加してほしいRSSのURLを指定できます。

例:AddClipsUrlと別にRSSを指定したい場合
AddClipsRssUrl = "http://www.web-20.net/index.rdf";

URL
AddClipsBcolor -
マウスオーバー時に表示されるボックスの枠線の色を指定できます。色の指定は16進数表記で行って下さい。(参考:wikipedia カラーチャート)なお、プレミアムの場合は、ブックマーク先の色も指定されます。

例:青色を指定する場合
AddClipsNcolor = "#6699FF";
RGB16進数
AddClipsNcolor -
マウスオーバー時に表示されるボックスの背景色を指定できます。色の指定は16進数表記で行って下さい。なお、プレミアムの場合は、ブックマーク先の色も指定されます。

例:青色を指定する場合
AddClipsNcolor = "#6699FF";
RGB16進数
AddClipsTcolor -
マウスオーバー時に表示されるボックスのテキスト色を指定できます。色の指定は16進数表記で行って下さい。

例:黒色を指定する場合
AddClipsTcolor = "#000000";
RGB16進数
AddClipsType -
表示するボタンの種類をお選び下さい。AddClipsのボタン作成画面で選択した画像から自動選択するため、無料版ユーザーの方は、基本的に変更することはありません。Premiumユーザーの方は、自由にテキストや画像ボタンを設定できますが、この項目で「text」と記入すると、AddClipsTextで指定した文字列になります。「image」と記入すると、AddClipsImageで指定した画像が表示されます。

例:任意のテキスト文字列を表示したい場合(プレミアムユーザー限定)
AddClipsType = "text";
1から6の数値
「text」「image」の固定文字列
AddClipsVerticalAlign
表示するボタン画像やテキストの位置を上下に調整することができる項目です。「middle(中央揃え)/top (上端揃え)/bottom (下端揃え)」に変更して調整下さい。CSSのverticalalignで指定できる値はすべて利用可能です。

例:下端揃えにする場合
AddClipsVerticalAlign = "bottom";
top
middle
bottom
など
AddClipsText -
ボタン画像の代わりにテキストを表示することができますが、表示する文字列を指定する項目です。AddClipsTypeを「text」と指定していないと、いくらAddClipsTextを記入しても、ボタン画像が表示されるので、テキスト表示にしたい場合は、AddClipsTypeに「text」とあわせてご指定下さい。

例:任意のテキスト文字列を表示したい場合(プレミアムユーザー限定)
AddClipsText = "ブックマークする";
文字列 ×
AddClipsImage -
AddClipsが用意する固定のボタン画像の代わりに、任意のお好きな画像をhttpからはじまるURLでご指定ください。AddClipsTypeを「image」と指定していないと、いくらAddClipsImageを記入しても、固定のボタン画像が表示されるので、任意の画像を表示したい場合は、AddClipsTypeに「image」とあわせてご指定下さい。

例:任意の画像を表示したい場合(プレミアムユーザー限定)
AddClipsImage = "http://www.addclips.org/title.gif";
画像のあるURL ×
AddClipsCopyText -
マウスオーバー時にボックス右下に表示される「powered by addclips」のクレジットの文字が変更できます。多くの文字列を指定すると、改行して表示されてしまうので、ご注意下さい。

例:クレジットの文字を表示したい場合(プレミアムユーザー限定)
AddClipsCopyText = "株式会社リート";
文字列 ×
AddClipsCopyUrl -
マウスオーバー時にボックス右下に表示するクレジットのリンク先URLをご指定下さい。ポップアップした画面のロゴを変更した場合は、そのロゴのリンク先URLもAddClipsCopyUrlになります。

例:任意の画像を表示したい場合(プレミアムユーザー限定)
AddClipsImage = "http://www.addclips.org/title.gif";
画像のあるURL ×
AddClipsLogo -
「もっと見る...」をクリックしたり、ボタン画像やテキストをクリックした場合に、ポップアップで表示するブックマーク(RSSリーダー)一覧画面の、左上のロゴ画像を指定の画像に変更できます。自社内のコンテンツのように表示したい場合は、ご利用下さい。縦幅が45ピクセル程度の画像をご利用下さい。それ以外のサイズを指定した場合は、デザインがきれいに表示されない恐れがあります。

例:ロゴ画像を指定したい場合(プレミアムユーザー限定)
AddClipsLogo = "http://www.reet.co.jp/title.gif";
URL ×
AddClipsOrder -
マウスオーバー時に表示される各社ブックマークサービスを自由に並び変えることができる項目です。サービス名を半角アルファベットでカンマ区切りでご記入下さい。記入した順番に表示されます。現在対応しているサービスは「はてなブックマーク(hatena)」「del.icio.us(delicious)」「livedoorクリップ(livedoor)」「Buzzurl(buzzurl)」「ヤフーブックマーク(yahoo)」「トピックイット(topicit)」「Googleブックマーク(google)」「newsing(newsing)」「ブラウザのお気に入り追加(favorites)」「もっと見る...(addclips)」です。

例:並び順序を変更したい場合(プレミアムユーザー限定)
AddClipsOrder='favorites, hatena, delicious,google, buzzurl, livedoor, addclips,topicit';
半角英語をカンマ区切りで ×
AddClipsRssOrder -
マウスオーバー時に表示される各社RSSリーダーを自由に並び変えることができる項目です。サービス名を半角アルファベットでカンマ区切りでご記入下さい。記入した順番に表示されます。現在対応しているサービスは「iGoogle(igoogle)」「livedoorリーダー(livedoor)」「Fastladder(fastladder)」「Bloglines(bloglines)」「MyYahoo!(yahoo)」「はてなRSS(hatena)」「Googleリーダー(google)」「エキサイトリーダー(excite)」「netvibes(netvibes)」「もっと見る...(addclips)」です。

例:並び順序を変更したい場合(プレミアムユーザー限定)
AddClipsRssOrder='igoogle, livedoor, fastladder, bloglines, yahoo, hatena, google, excite, netvibes, addclips';
半角英語をカンマ区切りで ×
サンプルコード
上記仕様に基づく、サンプルコードになります。
無料版AddClipsの場合
1-1) マウスオーバー型で色をご指定の場合
<script type="text/javascript">
AddClipsUrl = location.href;
AddClipsTitle = document.title;
AddClipsId = '任意のAddClipsID';
AddClipsBcolor='#78BE44';
AddClipsNcolor='#D1E9C0';
AddClipsTcolor='#666666';

AddClipsType='1';
AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js" charset="utf-8"></script>
1-2) マウスオーバー型でタブ初期表示を「RSS」タブにして、任意のRSSファイルをご指定の場合
<script type="text/javascript">
AddClipsUrl = location.href;
AddClipsTitle = document.title;
AddClipsId = '任意のAddClipsID';
AddClipsBcolor='#78BE44';
AddClipsNcolor='#D1E9C0';
AddClipsTcolor='#666666';
AddClipsType='1';
AddClipsDefault='rss';
AddClipsRssUrl='RSSファイルのURL';

AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js" charset="utf-8"></script>
1-3) マウスオーバー型でタブ初期表示を「ブックマーク」タブにして、任意のサイトURLとRSSファイルをご指定の場合
<script type="text/javascript">
AddClipsUrl = '任意のサイトURL';
AddClipsTitle = '任意のサイトタイトル名';

AddClipsId = '任意のAddClipsID';
AddClipsBcolor='#78BE44';
AddClipsNcolor='#D1E9C0';
AddClipsTcolor='#666666';
AddClipsType='1';
AddClipsDefault='bookmark';
AddClipsRssUrl='RSSファイルのURL';

AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js" charset="utf-8"></script>
1-4) ポップアップ型を利用する場合
<script type="text/javascript">
AddClipsUrl = '任意のサイトURL';
AddClipsTitle = '任意のサイトタイトル名';
AddClipsId = '任意のAddClipsID';
AddClipsMode='popup'
AddClipsType='1';
AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js" charset="utf-8"></script>
AddClipsプレミアムの場合

2-1) マウスオーバー型で独自画像でマウスオーバー表示を行い、独自ロゴをブックマーク一覧に表示する場合

<script type="text/javascript">
AddClipsUrl = location.href;
AddClipsTitle = document.title;
AddClipsId = '任意のAddClipsID';
AddClipsBcolor='#E62613';
AddClipsNcolor='#FF0000';
AddClipsTcolor='#FFFFFF';

AddClipsType='image';
AddClipsCopyText='株式会社リート';
AddClipsCopyUrl='http://www.reet.co.jp/'
AddClipsImage='http://www.reet.co.jp/bookmark_button.gif' ;
AddClipsLogo='http://www.reet.co.jp/title.gif';

AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="AddClipsから連絡したPremium専用URL" charset="utf-8"></script>

2-2) マウスオーバー型でリンクテキストでマウスオーバー表示を行い、サービスの並び替えと上下位置調整する場合

<script type="text/javascript">
AddClipsUrl = location.href;
AddClipsTitle = document.title;
AddClipsId = '任意のAddClipsID';
AddClipsBcolor='#E62613';
AddClipsNcolor='#FF0000';
AddClipsTcolor='#FFFFFF';

AddClipsType='text'
AddClipsText='ブックマークする'
;
AddClipsCopyText='株式会社リート';
AddClipsCopyUrl='http://www.reet.co.jp/';
AddClipsLogo='http://www.reet.co.jp/title.gif';
AddClipsOrder='favorites, hatena, delicious,google, buzzurl, livedoor, addclips,topicit';
AddClipsAdjustment='-25';

AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="AddClipsから連絡したPremium専用URL" charset="utf-8"></script>

2-3) マウスオーバー型でタブ初期位置を「RSS」にして、任意のRSSを設定、RSSサービスの並び順を変更する場合

<script type="text/javascript">
AddClipsUrl = location.href;
AddClipsTitle = document.title;
AddClipsId = '任意のAddClipsID';
AddClipsBcolor='#E62613';
AddClipsNcolor='#FF0000';
AddClipsTcolor='#FFFFFF';

AddClipsType='text'
AddClipsText='ブックマークする';
AddClipsCopyText='株式会社リート';
AddClipsCopyUrl='http://www.reet.co.jp/';
AddClipsLogo='http://www.reet.co.jp/title.gif';
AddClipsOrder='favorites, hatena, delicious, google, buzzurl, livedoor, addclips,topicit';
AddClipsRssDefault='rss';
AddClipsRssUrl='任意のRSSファイルのURL';
AddClipsRssOrder='igoogle, livedoor, fastladder, bloglines, yahoo, hatena, google, excite';
AddClipsAdjustment='-25';
AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="AddClipsから連絡したPremium専用URL" charset="utf-8"></script>

2-4) ポップアップ型で独自画像、独自ログや独自カラーを変更する場合

<script type="text/javascript">
AddClipsUrl = location.href;
AddClipsTitle = document.title;
AddClipsId = '任意のAddClipsID';
AddClipsBcolor='#E62613';
AddClipsNcolor='#FF0000';
AddClipsTcolor='#FFFFFF';
AddClipsMode='popup';

AddClipsType='text'
AddClipsText='ブックマークする';
AddClipsCopyText='株式会社リート';
AddClipsCopyUrl='http://www.reet.co.jp/';
AddClipsLogo='http://www.reet.co.jp/title.gif';
AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="AddClipsから連絡したPremium専用URL" charset="utf-8"></script>