結婚式の余興を盛り上げたい

各種ブログへの設置

JUGEM(WEB拍手ランキング)

①デザイン → フリースペース

jugemPC①

jugemブログ管理画面にログインし、「デザイン」→「フリースペース」を選びます。

②「フリースペース」を編集する

jugemPC②

空いているフリースペースの「編集」を選びます。

③i2iアクセス解析管理画面からタグをコピー

jugemPCWEB拍手ランキング③

ブログ管理画面はそのままで、次にi2iWEB拍手ランキングパーツの管理画面にログインします。
左メニュー「タグ発行」より『取得タグ(ランキング表示兼用)』をコピーします。

④フリースペースに貼り付けて保存

jugemPCWEB拍手ランキング④

②の画面へ戻り、③でコピーしたi2iWEB拍手ランキングの取得タグを、フリースペースの内容部分へ貼り付けます。

========================================
【タイトル】→ 任意入力(※例ではWEB拍手ランキングとしました)
【公開・非公開】→ 公開
========================================
と設定し「編集内容を保存」します。

以上で取得タグ(ランキング表示)の設置は完了です。

⑤拍手ボタン設置する

jugemPCWEB拍手ランキング⑤

続いて拍手ボタンをブログエントリー毎に設置するため、ブログ管理画面「デザイン」→「HTML・CSS編集」を選びます。

⑥拍手ボタンタグをコピーする

jugemPCWEB拍手ランキング⑥

通常はi2iWEB拍手ランキングパーツの「タグ発行」より『拍手ボタンタグ』を、ブログ記事を投稿する度に設定が必要となりますが、 jugemブログで利用する場合にはその設定は必要ありません。

jugemブログではテンプレート内で使える変数として、ブログエントリー毎に異なる数字を自動で出力する機能を備えています。
今回はこの機能を利用して設置を行います。

jugemブログ用拍手ボタンタグ

⑦テンプレートのHTML編集にてタグを貼り付ける

jugemPCWEB拍手ランキング⑦

今回は設置例として、ブログエントリーの本文の下辺りに拍手ボタンが表示されるように設置します。

テンプレート内から『 <!-- BEGIN comment_area --> 』という記述を探します。
その記述から『 <!-- END comment_area --> 』までの間に、⑥でコピーした拍手ボタンタグを貼り付けます。

(『 <!-- BEGIN comment --> ~ <!-- END comment --> 』の中では機能しません。)

jugemの変数利用の制限上、コメント入力枠のすぐ上に拍手ボタンを設置してみました。

「HTMLを編集」を押して完了です。

同様の操作で設置可能なパーツ

PCテンプレートへ設置

スマホテンプレートへ設置

各種ブログへの設置