ファンブログで、コメント欄の送信ボタンの隣に
ブログランキングの投票ボタンを配置する方法です。
前準備
ランキングの投票ボタンのソースをそのまま使うと、下のように２行になります。
 にほんブログ村 |
 ウェブデザイン ブログランキングへ |
これだと、レイアウトが崩れるので、２行目の文字を削除します。
削除するのは<br />以降のすべてです。
<a href="http://it.blogmura.com/html/"><img src="http://it.blogmura.com/html/img/html88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 ＩＴ技術ブログ HTML/CSSへ" /></a><br /><a href="http://it.blogmura.com/html/">にほんブログ村</a>この青文字部分をすべて削除
人気ブログランキングも２行ある場合は、同じように<br />以降のすべてを削除します。
ボタンの配置方法
まず、ファンブログの設定画面を開き、左側のスタイルの変更をクリック。
続いて「１記事」を選択。右側にソースが表示されるので、
下のようになっている場所を、「コメント」という文字を頼りに探します。
<h3 id="commentTitle">コメント</h3>
さらにそこから約６０行下、次の行を探します。
目印は「submit」と「送信する」という文字。（submitは送信するボタンにしか使わない文字です）
<div><input style="font-weight: bold;" type="submit" name="post" value="送信する" class="btn" /></div>この行を下のように変更します。
<p style="text-align:right"><input style="font-weight: bold;margin-top:-20px;" type="submit" name="post" value="送信する"/><span style="margin-left:1em;vertical-align:middle;">ここににほんブログ村のソース ここに人気ブログランキングのソース</span></p>
さらにその直後に１行追加して</div>と追加。
書き直した場所の数行上に、<textarea で始まる行があるので、
その上に、<div style="width:290px">と追加します。
完成形は下のようになります。
<div style="width:290px"> <textarea name="comment" rows="10" style="width:290px">{$CommentValueComment$}</textarea><br /> {$CommentErrMsgComment$} <div id="comment_preview" class="comment_layer"></div> <p></p> </table> <p style="text-align:right"><input style="font-weight: bold;margin-top:-20px;" type="submit" name="post" value="送信する"/><span style="margin-left:1em;vertical-align:middle;">ここににほんブログ村のソース ここに人気ブログランキングのソース</span></p> </div>
先ほど追加した<div style="width:290px">の、290ですが、
もし、textareaの行のwidth:290pxが290となっていない時は、
その数字に合わせて直してください。
実際にどう表示されているかは、この下のコメント欄を見てください。