JUGEMブックマーク

JUGEM・ロリポブログ に設置する場合

※解説ではJUGEMの例を挙げていますが、ロリポブログもJUGEMと同じ方法で設置していただけます。以下のJUGEMの部分をロリポブログと読み替えてご覧ください。

1. http://imaging.jugem.jp/icon/jugembookmark_add.gif から、ブックマーク追加ボタン用の画像を保存します。
2. 保存したボタンを、JUGEM 管理者ページ > 画像の管理 > 画像のアップロード からアップロードします。
3. このとき、画像をアップロードした場所の URL をテキストエディタなどにメモしておきます。

4. JUGEM 管理者ページ > テンプレート編集 > HTML 編集フォーム を表示します。

   ※ここでは テンプレート cmsp-プレーン の場合を例に解説します。他のテンプレートの場合、多少配置が異なりますが、BEGIN 〜 ENDのコメントで囲まれている場所の動作は変わらないので位置決めの参考にしてください。

5. テンプレートの中で、<!-- BEGIN entry --> と書いてある場所を探します。
6. <!-- BEGIN entry --> と <!-- END entry --> で挟まれている中に <div class="entry_state"> という記述があるので、<div class="entry_state"> と </div> の間の適切な場所に、以下のコードを貼り付けます。

7. 貼り付ける際に、コードの中に赤字で表示されている箇所を書き換えてください。

   ｜<a href="javascript:window.location='http://b.jugem.jp/posturl='+encodeURIComponent('{entry_permalink}')+'&title='+encodeURIComponent('あなたのブログタイトル｜{entry_title}');" title="このページを JUGEMブックマーク に登録する">
   <img src="アップロードした画像のURL" alt="このページをブックマーク登録" style="vertical-align:middle;" border="0" />
   </a>

   • アップロードした画像のURL（3.でアップロードしたときにメモした URL）
   • あなたのブログタイトル
8. 貼り付けができたら、テンプレートを更新する ボタンを押して、表示を確認して完了です。

テンプレート種類により多少配置が異なりますので、この例を参考にカスタマイズしてみてください。高度なカスタマイズの際には、独自タグ一覧もあわせてご覧ください。

• マニュアル「独自タグ一覧」 | 無料ブログ(blog)作成【JUGEM】

MovableType に設置する場合

※インデックス・メインページおよび・個別エントリーアーカイブページに貼り付けすることができます。テンプレートはインストールした後のデフォルト状態を想定して解説しています。独自にカスタマイズされたテンプレートをご利用の場合は位置が異なる場合があります。

1. http://imaging.jugem.jp/icon/jugembookmark_add.gif から、ブックマーク追加ボタン用の画像を保存します。
2. 保存したボタンを、MovableType 管理画面 > ファイルのアップロード からアップロードします。
3. このとき、画像をアップロードした場所の URL をテキストエディタなどにメモしておきます。

4. MovableType 管理画面より、メイン・メニュー > 設置したいブログ > テンプレート をクリックします。

   メインページに貼り付ける手順
   1. インデックス・テンプレートの中から「メインページ」を選択します。

   2. メインページの HTML の中から、以下のようなコードが書かれているところを探してください。

      <p class="entry-footer">
      <span class="post-footers">投稿者: <$MTEntryAuthorLink show_email="0"$> 日時: <$MTEntryDate format="%x %X"$></span> <span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">パーマリンク</a>
      <MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
      <MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
      （このあたりに貼り付けると良いでしょう）
      </p>

   3. 場所がみつかったら、以下のコードをコピーして、アップロードした画像のURL の部分を、テキストエディタなどで、画像をアップロードした場所の URL に書き換え、貼り付けます。

      （このとき、<p class="entry-footer"> 〜 </p> で囲まれている中に、貼り付けてください）

      ｜<a href="javascript:window.location='http://b.jugem.jp/posturl='+encodeURIComponent('<$MTEntryPermalink$>')+'&title='+encodeURIComponent('<$MTEntryTitle$> - <$MTBlogName$>');" title="このページを JUGEMブックマーク に登録する">
      <img src="アップロードした画像のURL" alt="このページをブックマーク登録" style="vertical-align:middle;" border="0" />
      </a>

   個別エントリーアーカイブに貼り付ける手順
   1. MovableType 管理画面より、メイン・メニュー > 設置したいブログ > テンプレート > タブ「アーカイブ」の中から「エントリー・アーカイブ」を選択します。（バージョンによっては Individual Entry Archives などという表記がされている場合があります）

   2. エントリー・アーカイブの HTML の中から、以下のようなコードが書かれているところを探してください。

      <p class="entry-footer">
      <span class="post-footers">投稿者: <$MTEntryAuthorLink show_email="0"$> 日時: <$MTEntryDate$></span> <span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">パーマリンク</a>
      （このあたりに貼り付けると良いでしょう）
      </p>

   3. 場所がみつかったら、以下のコードをコピーして、アップロードした画像のURL の部分を、テキストエディタなどで、画像をアップロードした場所の URL に書き換え、貼り付けます。

      （このとき、<p class="entry-footer"> 〜 </p> で囲まれている中に、貼り付けてください）

      ｜<a href="javascript:window.location='http://b.jugem.jp/posturl='+encodeURIComponent('<$MTEntryPermalink$>')+'&title='+encodeURIComponent('<$MTEntryTitle$> - <$MTBlogName$>');" title="このページを JUGEMブックマーク に登録する">
      <img src="アップロードした画像のURL" alt="このページをブックマーク登録" style="vertical-align:middle;" border="0" />
      </a>

5. 貼り付けたら、テンプレートを保存して再構築してください。ページに反映されていれば設置完了です。

WordPress に設置する場合

※テンプレートは言語を日本語、インストールした後のデフォルト状態を想定して解説しています。独自にカスタマイズされたテンプレートをご利用の場合は位置が異なる場合があります。

1. http://imaging.jugem.jp/icon/jugembookmark_add.gif から、ブックマーク追加ボタン用の画像を保存します。
2. 保存したボタンを、FTP ソフトなどでアップロードします。
3. このとき、画像をアップロードした場所の URL をテキストエディタなどにメモしておきます。

4. 管理画面より、表示(Presentation) > テーマエディタ(Theme Editor) タブ > メインインデックス(Main Index Template) をクリックします。

   メインインデックスページに貼り付ける手順

   1. Main Index Template(index.php) から、<p class="postmetadata"> という記述のある場所を探します。

      <p class="postmetadata">
      Posted in <?php the_category(', ') ?> | 
      <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
      （このあたりに貼り付けると良いでしょう）
      </p>

   2. 場所がみつかったら、以下のコードをコピーして、アップロードした画像のURL の部分を、テキストエディタなどで、画像をアップロードした場所の URL に書き換え、貼り付けます。

      （このとき、<p class="postmetadata"> 〜 </p> で囲まれている中に、貼り付けてください）

      ｜<a href="javascript:window.location='http://b.jugem.jp/posturl='+encodeURIComponent('<?php the_permalink() ?>')+'&title='+encodeURIComponent('<?php the_title() ?>');" title="このページを JUGEMブックマーク に登録する">
      <img src="アップロードした画像のURL" alt="このページをブックマーク登録" style="vertical-align:middle;" border="0" />
      </a>

   シングルポストページに貼り付ける手順

   1. テンプレート「シングルポスト(single.php)」から、<p class="postmetadata alt"> という記述のある場所を探します。

      <p class="postmetadata alt">
      （このあたりに貼り付けると良いでしょう）
      <small>
      This entry was posted
      <?php /* This is commented, because it requires a little adjusting sometimes.
      
      You'll need to download this plugin, and follow the instructions:
      （以下省略）

   2. 場所がみつかったら、以下のコードをコピーして、アップロードした画像のURL の部分を、テキストエディタなどで、画像をアップロードした場所の URL に書き換え、貼り付けます。

      <a href="javascript:window.location='http://b.jugem.jp/posturl='+encodeURIComponent('<?php the_permalink() ?>')+'&title='+encodeURIComponent('<?php the_title() ?>');" title="このページを JUGEMブックマーク に登録する">
      <img src="アップロードした画像のURL" alt="このページをブックマーク登録" style="vertical-align:middle;" border="0" />
      </a>

5. 貼り付けたら、テンプレートを保存してください。ページに反映されていれば設置完了です。