CINXE.COM
FC2ブログ(WEB拍手ランキング) スマホテンプレート ｜各種ブログへの設置｜i2iサポートドキュメント
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> FC2ブログ(WEB拍手ランキング) スマホテンプレート ｜各種ブログへの設置｜i2iサポートドキュメント</title> <meta name="description" content=""> <meta name="keywords" content=""> <script>/*@cc_on _d=document;eval('var document=_d')@*/</script> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]--> <script src="https://img.i2i.jp/js/minmax.js"></script> <link rel="stylesheet" href="https://img.i2i.jp/css/reset.css"> <link rel="stylesheet" href="https://s.i2i.jp/document/css/common.css"> <!--[if IE]><link rel="stylesheet" href="/document/css/common-fixedIE.css"><![endif]--> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="https://img.i2i.jp/js/jquery.scrollTo.js"></script> <![if !IE]><script src="https://img.i2i.jp/js/jquery.fixscroll.js"></script><![endif]> <script src="/document/js/common.js"></script> <link rel="stylesheet" href="https://img.i2i.jp/js/shadowbox-3.0.3/shadowbox.css"> <link rel="stylesheet" href="/document/css/shadowbox-supportDocument.css"> <script src="https://img.i2i.jp/js/shadowbox-3.0.3/shadowbox.js"></script> <script src="/document/js/catID5.entry.js"></script> <script src="/document/js/mt-blog.js"></script> </head> <body id="catID5" class="entryArchive" > <span id="noscripttags"><noscript><a href="http://ac9.i2i.jp/bin/nojslink?00800004" target="_blank"><img src="http://ac9.i2i.jp/bin/nojs.php?00800004&guid=ON" border="0" /></a></noscript></span><span id="prtaglink"><a href="http://www.rock-bom.info/professional.html" target="_blank"><img src="http://image.rock-bom.info/bnr.gif?00800004" border="0" alt="結婚式の余興を盛り上げたい" /></a></span> <script type="text/javascript" src="http://ac9.i2i.jp/bin/2nd_gets.php?00800004"></script> <header> <h1><a href="https://s.i2i.jp/document/"><img src="https://img.i2i.jp/www/document/siteid.png" alt="各種ブログへの設置"></a></h1> </header> <div id="wrap"> <aside id="sideNav"> <ul id="nav"> </ul> </aside> <!-- #sideNav --> <div id="content"> <div id="search"> <ul> <li>全部</li> <li>マニュアル</li> <li class="currentTab">ブログ設置</li> <li>よくある質問</li> <li>お知らせ</li> </ul> <img src="http://img.i2i.jp/www/document/searchDelete.png" class="searchDelete" title="消去"> <form method="get" action="https://s.i2i.jp/document/admin/search.cgi" class="searchTarget2"> <input type="hidden" name="IncludeBlogs" value="5"> <input type="hidden" name="limit" value="20"> <input type="text" name="search" value="" class="searchBox"><!-- --><button type="submit">検索</button> </form> </div> <div class="contentInner"> <div class="catPanel catList"> <div style="font-size:13pt;font-weight: bold;">※【重要】一部サービス提供終了のご案内</div> 誠に勝手ながら2024年08月30日にアクセス解析以外のパーツを終了させて頂きました。詳細は<a href="https://s.i2i.jp/document/info/news/202408/30-258.html">こちら</a>をご確認下さい。 </div> </div> <div class="contentInner"> <figure><a href="https://s.i2i.jp/document/tutorial/"><img src="https://img.i2i.jp/www/document/categoryHeader-id5.png"></a></figure> <time pubdate datetime="2012-01-13">このページの内容は2012/01/13時点の情報であり、最新の情報とは異なる場合がございます。</time> <section class="catPanel"> <article class="entry"> <header> <figure><img src="https://img.i2i.jp/www/document/tutorialHeaderIco-sp.png"></figure> <h1>FC2ブログ(WEB拍手ランキング)</h1> <aside> <ul> <li>【 ブログサービスサイト 】<a href="http://blog.fc2.com/">http://blog.fc2.com/</a></li> <li>【 ブログサービスヘルプ 】<a href="http://fc2blogmanual.blog60.fc2.com/">http://fc2blogmanual.blog60.fc2.com/</a></li> </ul> </aside> <aside> <p><img src="https://img.i2i.jp/www/document/ico-fc2.png" title="fc2" alt="fc2">PCテンプレートへ設置＋</p> <ul> <li class="fc2"><a href="https://s.i2i.jp/document/tutorial/pc/pc45.html">FC2ブログ(WEB拍手ランキング)</a></li> <li class="fc2"><a href="https://s.i2i.jp/document/tutorial/pc/pc34.html">FC2ブログ(アクセスランキング)</a></li> <li class="fc2"><a href="https://s.i2i.jp/document/tutorial/pc/pc11.html">FC2ブログ(アクセス解析)</a></li> </ul> </aside> <aside> <p><img src="https://img.i2i.jp/www/document/ico-fc2.png" title="fc2" alt="fc2">スマホテンプレートへ設置＋</p> <ul> <li class="fc2 thisPage">FC2ブログ(WEB拍手ランキング)</li> <li class="fc2"><a href="https://s.i2i.jp/document/tutorial/sp/sp50.html">FC2ブログ(アクセスランキング)</a></li> <li class="fc2"><a href="https://s.i2i.jp/document/tutorial/sp/sp33.html">FC2ブログ(アクセス解析)</a></li> </ul> </aside> </header> <div id="entryInner"> <h2>①ブログ管理画面「テンプレートの設定」</h2> <figure><img alt="fc2スマホ①" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-img1.jpg"></figure> <p>ブログ管理画面にログインし、左メニュー「テンプレートの設定」を選びます。</p> <h2>②「スマートフォン用テンプレート」の追加</h2> <figure> <img alt="fc2スマホ②-1" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-img2-1.jpg"> <img alt="fc2スマホ②-2" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-img2-2.jpg"> <img alt="fc2スマホ②-3" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-img2-3.jpg"> </figure> <p>スマートフォンで閲覧した際、「スマートフォン用テンプレート」を利用できるように設定します。<br> 「公式テンプレート追加」あるいは「共有テンプレート追加」から利用したいテンプレートを選びます。<br><br> 利用したいテンプレートの「詳細」ボタンを押します。<br><br> 内容を確認して「ダウンロード」ボタンを押すとテンプレートの追加が完了します。 </p> <h2>③テンプレートの適用</h2> <figure> <img alt="fc2スマホ③-1" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-img3-1.jpg"> <img alt="fc2スマホ④" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-img4.jpg"> </figure> <p> タグ設置用に編集を行います。スマートフォン用の「テンプレート管理」を選択してください。<br><br> 適用させたいテンプレートにチェックを入れ、「適用」ボタンを押します。<br><br> </p> <h2>④スマートフォン用テンプレートへのi2iタグ挿入</h2> <figure> <img alt="fc2スマホ③-2" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-img3-2.jpg"> </figure> <p> 利用するテンプレートのHTML CSSの「編集」を選択します。<br><br> </p> <h2>⑤取得タグをコピーする</h2> <figure> <img alt="FC2スマホWEB拍手ランキング⑤" src="https://s.i2i.jp/document/tutorial/img/fc2/pc-clap-img5.jpg"> </figure> <p> ブログ管理画面はそのままで、次にi2iWEB拍手ランキングパーツの管理画面にログインします。<br> 左メニュー「タグ発行」より『取得タグ(ランキング表示兼用)』をコピーします。 </p> <h2>⑥取得タグを設置する</h2> <figure> <img alt="FC2スマホWEB拍手ランキング⑥" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-clap-img6.jpg"> </figure> <p> ここでは拍手のランキング(取得タグ)をスマートフォンページ最下段に表示するように設置します。<br> ※i2iweb拍手は仕様上、「ランキング(取得タグ)」と「拍手ボタンタグ」は同一ページ上に必要な為、プラグインは使わずに、すべてのページにランキング(取得タグ)が表示される形とします。<br><br> ⑤でコピーした『取得タグ(ランキング表示兼用)』を貼り付けます。<br> 例では「<div class="ad_footer"><%ad2></div>」というFC2ブログ規定の下段広告が表示される部分の上部に設置しています。<br><br> また、ページの真ん中に表示するために、例では直接CSSの記述を追加しています。<br> <span style="padding:5px;border:1px dotted #666;background:#fff;"> <span style="color:Crimson;display:block;font-size:86%;"><div style="clear:both;width:157px;margin:auto;"></span> <span style="color:#999;">取得タグ(ランキングタグ)</span> <span style="color:Crimson;display:block;font-size:86%;"></div></span> </span> ※取得タグ自体の変更はご利用規約違反となります。ご注意ください。 <br><br> この時点ではまだ「更新」を押さないでください。 </p> <h2>⑦拍手ボタンタグをコピーする</h2> <figure> <img alt="FC2スマホWEB拍手ランキング⑩" src="https://s.i2i.jp/document/tutorial/img/fc2/pc-clap-img10.jpg"> </figure> <p> 通常はi2iWEB拍手ランキングパーツの「タグ発行」より『拍手ボタンタグ』の設定を、ブログ記事を投稿する度にする必要がありますが、 FC2ブログで利用する場合にはその設定は必要ありません。<br><br> FC2ブログではテンプレート内で使える変数として、ブログエントリー毎に異なる数字を自動で出力する機能を備えています。<br>今回はこの機能を利用して設置を行います。<br><br> <span style="color: #fff;background: Orange;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;text-align:center;padding: 5px 0;"> <span style="font-weight:700;">FC2ブログ用拍手ボタンタグ</span> <textarea onclick="this.select()" readOnly="true"><div id='i2i_h_web_hakusyu' hakusyu_id='<%topentry_no>'> </div></textarea> </span> </p> <h2>⑧拍手ボタンを設置する</h2> <figure> <img alt="FC2スマホWEB拍手ランキング⑧" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-clap-img8.jpg"> </figure> <p> 今回は設置例として、ブログエントリーの本文の下に拍手ボタンタグが表示されるように設置します。<br><br> テンプレート内から『 <%topentry_body> 』という記述を探します。<br> そのすぐ下に⑦でコピーしたFC2ブログ用の拍手ボタンタグを挿入します。<br> 「更新」を押して完了です。 </p> <h2>⑨今回の表示例確認</h2> <figure> <img alt="FC2スマホWEB拍手ランキング⑨" src="https://s.i2i.jp/document/tutorial/img/fc2/sp-clap-img9.jpg"> </figure> <p> 今回の設置例ではこのように表示されます。 </p> </div> <footer> <figure> <img src="https://img.i2i.jp/www/document/partsAvailableHeader.png" alt="同様の操作で設置可能なパーツ"> <img src="https://img.i2i.jp/www/document/ico-acc-notAvailable.png" title="アクセス解析利用できません"> <img src="https://img.i2i.jp/www/document/ico-accm-notAvailable.png" title="携帯サイト用アクセス解析利用できません"> <img src="https://img.i2i.jp/www/document/ico-rank-notAvailable.png" title="アクセスランキング利用できません"> <img src="https://img.i2i.jp/www/document/ico-count-notAvailable.png" title="アクセスカウンター利用できません"> <img src="https://img.i2i.jp/www/document/ico-clap-notAvailable.png" title="Web拍手ランキング利用できません"> <img src="https://img.i2i.jp/www/document/ico-sd-notAvailable.png" title="節電ブログパーツ利用できません"> <img src="https://img.i2i.jp/www/document/ico-sogo-notAvailable.png" title="相互ランキングメイカー利用できません"> <img src="https://img.i2i.jp/www/document/ico-ticker-notAvailable.png" title="Flashティッカー利用できません"> <img src="https://img.i2i.jp/www/document/ico-searcheck-notAvailable.png" title="検索順位チェッカー利用できません"> </figure> </footer> </article> </section> <section class="catPanel tutorialShortCut"> <form action="" method="get" id="pageSelect"> <h1><a href="https://s.i2i.jp/document/tutorial/pc">PCテンプレートへ設置</a></h1> <select name="pagesele"> <option value="javascript:void(0)">▼ PCテンプレートへ設置</option> <option class="ameba" value="https://s.i2i.jp/document/tutorial/pc/pc54.html"><img src="http://img.i2i.jp/www/document/ico-ameba.png">Amebaブログ(アクセスランキング)</option> <option class="ameba" value="https://s.i2i.jp/document/tutorial/pc/pc12.html"><img src="http://img.i2i.jp/www/document/ico-ameba.png">Amebaブログ(アクセス解析)</option> <option class="blogger" value="https://s.i2i.jp/document/tutorial/pc/pc63.html"><img src="http://img.i2i.jp/www/document/ico-blogger.png">Blogger(アクセスランキング)</option> <option class="blogger" value="https://s.i2i.jp/document/tutorial/pc/pc64.html"><img src="http://img.i2i.jp/www/document/ico-blogger.png">Blogger(アクセス解析)</option> <option class="dti" value="https://s.i2i.jp/document/tutorial/pc/pc47.html"><img src="http://img.i2i.jp/www/document/ico-dti.png">DTIブログ(アクセスランキング)</option> <option class="dti" value="https://s.i2i.jp/document/tutorial/pc/pc46.html"><img src="http://img.i2i.jp/www/document/ico-dti.png">DTIブログ(アクセス解析)</option> <option class="fc2" value="https://s.i2i.jp/document/tutorial/pc/pc45.html"><img src="http://img.i2i.jp/www/document/ico-fc2.png">FC2ブログ(WEB拍手ランキング)</option> <option class="fc2" value="https://s.i2i.jp/document/tutorial/pc/pc34.html"><img src="http://img.i2i.jp/www/document/ico-fc2.png">FC2ブログ(アクセスランキング)</option> <option class="fc2" value="https://s.i2i.jp/document/tutorial/pc/pc11.html"><img src="http://img.i2i.jp/www/document/ico-fc2.png">FC2ブログ(アクセス解析)</option> <option class="jugem" value="https://s.i2i.jp/document/tutorial/pc/pc59.html"><img src="http://img.i2i.jp/www/document/ico-jugem.png">JUGEM(WEB拍手ランキング)</option> <option class="jugem" value="https://s.i2i.jp/document/tutorial/pc/pc38.html"><img src="http://img.i2i.jp/www/document/ico-jugem.png">JUGEM(アクセスランキング)</option> <option class="jugem" value="https://s.i2i.jp/document/tutorial/pc/pc36.html"><img src="http://img.i2i.jp/www/document/ico-jugem.png">JUGEM(アクセス解析)</option> <option class="seesaa" value="https://s.i2i.jp/document/tutorial/pc/pc41.html"><img src="http://img.i2i.jp/www/document/ico-seesaa.png">Seesaaブログ(アクセスランキング)</option> <option class="seesaa" value="https://s.i2i.jp/document/tutorial/pc/pc39.html"><img src="http://img.i2i.jp/www/document/ico-seesaa.png">Seesaaブログ(アクセス解析)</option> <option class="excite" value="https://s.i2i.jp/document/tutorial/pc/pc53.html"><img src="http://img.i2i.jp/www/document/ico-excite.png">exciteブログ(アクセスランキング)</option> <option class="excite" value="https://s.i2i.jp/document/tutorial/pc/pc52.html"><img src="http://img.i2i.jp/www/document/ico-excite.png">exciteブログ(アクセス解析)</option> <option class="livedoor" value="https://s.i2i.jp/document/tutorial/pc/pc44.html"><img src="http://img.i2i.jp/www/document/ico-livedoor.png">livedoorBlog(WEB拍手ランキング)</option> <option class="livedoor" value="https://s.i2i.jp/document/tutorial/pc/pc62.html"><img src="http://img.i2i.jp/www/document/ico-livedoor.png">livedoorBlog(アクセスランキング)</option> <option class="livedoor" value="https://s.i2i.jp/document/tutorial/pc/pc43.html"><img src="http://img.i2i.jp/www/document/ico-livedoor.png">livedoorBlog(アクセス解析)</option> <option class="yaplog" value="https://s.i2i.jp/document/tutorial/pc/pc60.html"><img src="http://img.i2i.jp/www/document/ico-yaplog.png">yaplog!(アクセスランキング)</option> <option class="yaplog" value="https://s.i2i.jp/document/tutorial/pc/pc42.html"><img src="http://img.i2i.jp/www/document/ico-yaplog.png">yaplog!(アクセス解析)</option> <option class="cocolog" value="https://s.i2i.jp/document/tutorial/pc/pc35.html"><img src="http://img.i2i.jp/www/document/ico-cocolog.png">ココログ(アクセス解析)</option> <option class="cocolog" value="https://s.i2i.jp/document/tutorial/pc/pc61.html"><img src="http://img.i2i.jp/www/document/ico-cocolog.png">ココログ(アクセランキング)</option> <option class="ninja" value="https://s.i2i.jp/document/tutorial/pc/pc56.html"><img src="http://img.i2i.jp/www/document/ico-ninja.png">忍者ブログ(WEB拍手ランキング)</option> <option class="ninja" value="https://s.i2i.jp/document/tutorial/pc/pc48.html"><img src="http://img.i2i.jp/www/document/ico-ninja.png">忍者ブログ(アクセス解析)</option> </select> <h1><a href="https://s.i2i.jp/document/tutorial/sp">スマホテンプレートへ設置</a></h1> <select name="pagesele"> <option value="javascript:void(0)">▼ スマホテンプレートへ設置</option> <option class="ninja" value="https://s.i2i.jp/document/tutorial/sp/sp213.html"><img src="http://img.i2i.jp/www/document/ico-ninja.png">DTIブログ(アクセスランキング)</option> <option class="ninja" value="https://s.i2i.jp/document/tutorial/sp/sp212.html"><img src="http://img.i2i.jp/www/document/ico-ninja.png">DTIブログ(アクセス解析)</option> <option class="fc2" value="https://s.i2i.jp/document/tutorial/sp/sp51.html"><img src="http://img.i2i.jp/www/document/ico-fc2.png">FC2ブログ(WEB拍手ランキング)</option> <option class="fc2" value="https://s.i2i.jp/document/tutorial/sp/sp50.html"><img src="http://img.i2i.jp/www/document/ico-fc2.png">FC2ブログ(アクセスランキング)</option> <option class="fc2" value="https://s.i2i.jp/document/tutorial/sp/sp33.html"><img src="http://img.i2i.jp/www/document/ico-fc2.png">FC2ブログ(アクセス解析)</option> <option class="seesaa" value="https://s.i2i.jp/document/tutorial/sp/sp57.html"><img src="http://img.i2i.jp/www/document/ico-seesaa.png">Seesaaブログ(アクセスランキング)</option> <option class="seesaa" value="https://s.i2i.jp/document/tutorial/sp/sp58.html"><img src="http://img.i2i.jp/www/document/ico-seesaa.png">Seesaaブログ(アクセス解析)</option> <option class="seesaa" value="https://s.i2i.jp/document/tutorial/sp/sp214.html"><img src="http://img.i2i.jp/www/document/ico-seesaa.png">忍者ブログ(アクセスランキング)</option> <option class="ninja" value="https://s.i2i.jp/document/tutorial/sp/sp95.html"><img src="http://img.i2i.jp/www/document/ico-ninja.png">忍者ブログ(アクセス解析)</option> </select> </form> <script type="text/javascript"> $(function(){ $('#pageSelect select[name="pagesele"]').change(function(){ var url = $(this).val(); //$('form#pageSelect').attr('action',url).submit(); location.href = url; }); var url = document.URL; $('select[name="pagesele"] option').each(function(){ var v = $(this).val(); if( url == v ) { $(this).attr('selected','selected'); } }); }); </script> </section> <section class="catPanel catNav"> <h1><a href="https://s.i2i.jp/document/tutorial/"><img src="http://img.i2i.jp/www/document/menuCategoryHeader-id5.png" alt="各種ブログへの設置"></a></h1> <ul> <li><a href="https://s.i2i.jp/document/tutorial/pc/">PCテンプレート設置可能</a>(25)</li> <li><a href="https://s.i2i.jp/document/tutorial/sp/">スマホテンプレート設置可能</a>(9)</li> </ul> </section> </div> <!-- .contentInner --> </div> <!-- #content --> </div> <!-- #wrap --> <footer> <aside> <figure><a href="/document/"><img src="https://img.i2i.jp/www/document/siteid-footerDocument.png"></a></figure> <figure><a href="/" target="_blank"><img src="https://img.i2i.jp/www/document/siteid-footeri2i.png"></a></figure> <ul> <li><a href="//s.i2i.jp/inquiry/support.php " target="_blank" title="お問い合わせ"><img src="https://img.i2i.jp/www/document/headerLink-contactUs.png"></a></li> <li><a href="//www.i2i.jp/account/register.php" target="_blank" title="無料新規登録"><img src="https://img.i2i.jp/www/document/headerLink-newRegistration.png"></a></li> <li><a href="//www.i2i.jp/admin2/" target="_blank" title="管理画面ログイン"><img src="https://img.i2i.jp/www/document/headerLink-login.png"></a></li> </ul> <div id="snsBadge"> <g:plusone></g:plusone> <div class="fb-like" data-href="http://s.i2i.jp/document/tutorial/sp/sp51.html" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-action="recommend" data-colorscheme="light" data-font="verdana"></div> </div> <p>Copyright © 2005-2025 i2i.jp All Right Reserved.</p> </aside> </footer> <aside id="breadCrumb"> <ul> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://s.i2i.jp/document/">HOME</a></li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="https://s.i2i.jp/document/tutorial/">各種ブログへの設置</a></li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="https://s.i2i.jp/document/tutorial/sp/">スマホテンプレート</a></li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">FC2ブログ(WEB拍手ランキング)</li> </ul> </aside> </body> </html>