送信ボタンの隣に投票ボタンを配置

スポンサーリンク

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

ファンブログで、コメント欄の送信ボタンの隣に
ブログランキングの投票ボタンを配置する方法です。

前準備

ランキングの投票ボタンのソースをそのまま使うと、下のように２行になります。

にほんブログ村 ＩＴ技術ブログ HTML/CSSへ
にほんブログ村
ウェブデザイン ブログランキングへ

これだと、レイアウトが崩れるので、２行目の文字を削除します。
削除するのは<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となっていない時は、
その数字に合わせて直してください。

実際にどう表示されているかは、この下のコメント欄を見てください。

関連コンテンツ

スポンサーリンク

「送信ボタンの隣に投票ボタンを配置」への11件のフィードバック

  1. これいいですね！
    早速真似させていただきました♪
    Tomさんのソース説明分かりやすくて助かります。
    簡単にできました！ありがとうです！

    返信

  5. Tomさー。昔、記事ごとにランキングボタンがあるのは
    どうかと思う、とかって記事書いてなかった？

    返信

  7. 記事の最後に、こびるようにボタンがあるのはキライだって
    「ポテッとボタン挿入モジュール」の記事で最初書いていた。

    それが、何か？

    昔の話です。

    返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。