ソーシャルブックマークは@niftyクリップ！みんなでブックマークを共有しよう

クリップボタンを設置したい箇所に以下のスクリプトコードをコピーし、貼り付けてください。
（左クリックするとすべて選択されますのでそのままコピーしてください。）

クリップボタン表示用のスクリプトコード

<a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"> <img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a>

サンプル

スクリプトコードを貼り付けると以下のボタンが表示されます。

・FC2 BLOG
・ココログプロ
・ヤプログ！
・Seesaa Blog
・忍者ブログ
・livedoor Blog
・JUGEM･ロリポブログ
・Movable Type

FC2 BLOG

1.FC2 BLOGにログインします。

2.左メニューにある[ブログ管理画面へ]をクリックします。

3.環境設定の[テンプレートの設定]をクリックします。

4.使用しているテンプレートのHTML編集の中身を書き換えます。以下のコメント辺りにスクリプトを追加してください。

<!--deny_comment--><!--/deny_comment--> </li>

を以下のように編集してください。

<!--deny_comment--><!--/deny_comment--> </li> <li> <a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"> <img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a> </li>

※実際には改行をいれずに一行で記述してください。

5.更新ボタンをクリックします。

6.プレビューボタンをクリックして確認、完了です。

ココログプロ

※ココログプロでは、「上級テンプレート」を使うことで「カスタム・テーマ」以上のデザインを行うことができるようになります。 　ただし、HTML や CSS についての高度な知識が必要となりますのでご注意ください。

1.ログインして、[ブログ]＞[デザイン]と進みます。

＜新規テンプレートを作成する場合＞

デザインの[新規テンプレート作成]をクリックします。

ステップ4：テーマで[カスタム・テーマ]を選択します。 ※ニフティオリジナルを選ぶとクリップボタンがおけませんので、ご注意ください。

ステップ5：名前と説明で[このテンプレートを保存して摘要]をクリックします。

＜既存のテンプレートを変換する場合＞

左側の[便利メニュー]のテンプレートの管理をクリックします。

上級テンプレートに変換したいテンプレートにチェックを入れます。

[上級テンプレートへ変換]ボタンをクリックします。

変換の確認画面が出るので[変換する]をクリックします。

変換後のセットが下の「テンプレートの管理」画面に現れます。 （変換されたテンプレートには、名前の後に「上級」が付いています。）

★以下、共通作業です。

2.新テンプレート[上級]をクリックします。

3.ポップアップで[テンプレートを編集]と表示されるのでクリックすると、テンプレートの一覧が表示されます。 ※リッチテンプレートはデザインが固定されているため、上級テンプレートへ変換することはできません。

4.「Main Index」のテンプレートのソースの以下の部分にスクリプトを追加してください。

<p class="posted"> <$MTEntryPostFooter$> </p>

<p class="posted"> <$MTEntryPostFooter$><a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"> <img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a> </p>

※実際には改行をいれずに一行で記述してください。

5.テンプレートの編集が終わったら「保存」ボタンをクリックします。

6.次に[反映]ボタンをクリックします。

7.ポップアップが表示されるので、プルダウンでファイルを選んで[反映]ボタンをクリックします。

8.テンプレートへの変更内容は保存されました。[ここ]をクリックして、このテンプレートの残りに戻ってください。

9.「Individual Archives」も同じように編集します。

10.[ブログを表示]をクリックしてプレビューを確認します。

ヤプログ！

1.ヤプログ！にログインします。

2.上のメニューにある[スキン]をクリックします。

3.左メニューの[フリースキン編集]をクリックします。

4.[メインテンプレート]のソースの以下の部分にスクリプトを追加してください。

<BlogEntryIfAllowPings> ｜ <a href="{$BlogEntryPermalinkUrl$}#tb">トラックバック({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings> <br><strong>URL：{$BlogEntryPermalinkUrl$}</strong>

<BlogEntryIfAllowPings> ｜ <a href="{$BlogEntryPermalinkUrl$}#tb">トラックバック({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings> <a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"> <img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a> <br><strong>URL：{$BlogEntryPermalinkUrl$}</strong>

※実際には改行をいれずに一行で記述してください。

5.編集したら、[保存]をクリックします。

6.[プレビュー]ボタンで確認できます。

7.[アーカイブテンプレート]と[１記事テンプレート]のシートも同じように編集します。

8.左上の[ブログを見る]で確認をします。

Seesaa Blog

1.ＴＯＰの上のメニューにある[マイ・ブログ]をクリックします。

2.○○さんのブログの中の[デザイン]にカーソルを合わせ、[コンテンツ]をクリックします。

3.中央メニューの[記事]をクリックします。

4.左上にある[コンテンツHTML編集]をクリックして、ソースの以下の部分にスクリプトを追加してください。

<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><% /if %>

<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><% /if %> <a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"> <img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a>

※実際には改行をいれずに一行で記述してください。

5.[保存]ボタンをクリックします。

6.[プレビュー]ボタンをクリックして確認します。

忍者ブログ

1.ログインして、管理ページＴＯＰの上の方にあるアイコン付の[ブログ]をクリックします。

2.右のメニューにある[ブログ管理ページへ]をクリックします。

3.[テンプレート設定/編集]をクリックします。

4.現在使用中のテンプレートから使用したいテンプレートの[修正]をクリックします。

5.右上に表示されるHTMLを以下のように編集してください。

<a href="<!--$entry_link-->#comment">COMMENT[<!--$entry_comment_num-->]</a> </span> <!--/if_cm_receipt--> <br>

<a href="<!--$entry_link-->#comment">COMMENT[<!--$entry_comment_num-->]</a> </span> <!--/if_cm_receipt--> <span class="EntryBookmark"> <a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"> <img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a></span> <br>

※実際には改行をいれずに一行で記述してください。

6.HTMLの下にあるCSS編集欄から「.EntryBookmark」に対して以下の指定を追加します。

/* 「含むclipブックマーク」ボタン */ .EntryBookmark { margin-left: 16px; }

7.[HTML編集のプレビュー]で確認します。

8.よければ[テンプレート保存]をクリックします。

9.編集したテンプレートを設定してください。

10.テンプレートの保存というウィンドウが開くので、保存方法を選び、テンプレートの名称を確認し、送信します。

livedoor Blog

1.ログインし、上の中央にあるメニューの[カスタマイズ/管理]をクリックします。

2.左メニューに詳細が表示されるので、[デザインのカスタマイズ]をクリックします。

3.[トップページ]の以下の部分にスクリプトを追加してください。

</IfArticleCategory></div>

<$ArticleCategory2$></a></dd></IfArticleCategory2> <a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"> <img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a>

※実際には改行をいれずに一行で記述してください。

4.[この内容に変更する]をクリックします。

5.[個別記事ページ]、[カテゴリアーカイブ]、[月別アーカイブ]のテンプレートもそれぞれ同じように編集し、[この内容に変更する]をクリックします。

6.左メニューバーの[ブログに設定を反映（再構築）]をクリックします。

7.プルダウンで反映したいページを選択し、[ブログを再構築する]をクリックします。

8.左メニュー[このブログについて]のタイトル部分をクリックして、確認します。

JUGEM･ロリポブログ

1.ＴＯＰの左にある管理者メニューの[記事の編集・削除]をクリックします。

2.カスタマイズの[テンプレートの編集]をクリックします。

3. HTML編集フォームの中の以下の部分にスクリプトを追加してください。

<div class="entry_state">| {category_name} | {entry_time} | {comment_num} | {trackback_num} </div>

<div class="entry_state">| {category_name} | {entry_time} | {comment_num} | {trackback_num} <a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"> <img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a> </div>

※実際には改行をいれずに一行で記述してください。

4.[テンプレートを更新する]をクリックします。

5.編集中のテンプレートの[プレビュー]もしくは左メニューのいちばん上にある[ブログを確認する]をクリックして、確認します。

Movable Type

※MovableTypeを商用利用や企業が利用する場合有料ライセンスが必要です。

1.管理画面ＴＯＰの[デザイン]にカーソルを合わせ[テンプレート]をクリックします。

2.画面右のクイックフィルタにあるテンプレートモジュールをクリックします。

3.[テンプレートモジュールを表示]の中にある[ブログ記事のメタデータ]をクリックします。

4.ソースの以下の部分にスクリプトを追加してください。

<span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">個別ページ</a>

<span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">個別ページ</a> <a href="http://clip.nifty.com/create?url=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>"> <img src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /> </a>

5.テンプレートを保存後、[ブログのテンプレート一覧]をクリックして戻ります。

6.[設定]の横にある更新ボタンをクリックします。

7.プルダウンでページを選択して、[再構築]をクリックします。

8.[サイトをみる]で確認します。