スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

コメント装飾機能の追加方法

この記事は060517以前のものが対象です。
現在公開しているものには最初からコメント装飾機能がはいっています。
絵文字まわりも修正しました。

コメント装飾機能を利用するための修正方法です。
まだ共有登録しているものは修正していませんが(プラグインにどう対応するか、まだもやもや悩んでいるためです…)、こちらで公開しているものは対応版に修正しました。
よろしければお持ち帰りください。
※ サーバー番号は、できるだけご自分のブログのサーバー番号に修正してください。
(そのほうが動作が早いとおもいます。)

これまで絵文字の表示が微妙だったのですが;;、それも改善しました。
CSSだけの修正でも問題ありませんので、CSSだけでもごそっとお持ち帰り(または一部修正)していただけると嬉しいです。すみません…;;

どうぞよろしくおねがいします。
■ HTML
テンプレートHTMLの、コメントフォームの部分を修正します。
コメント投稿フォームと、コメント編集フォームの2ヵ所。どちらもHTMLの真ん中あたりです。

<!-- コメントフォーム -->
<form method="post" action="./" id="comment_post" name="comment_form">
   - 省略 -
<dt><label for="comment">Comment&nbsp;:</label></dt>
<dd><textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea></dd>
   - 省略 -
</form>

<!-- コメント編集フォーム -->
<form method="post" action="./" id="comment_edit">
   - 省略 -
<dt><label for="comment">Comment&nbsp;:</label></dt>
<dd><textarea id="comment" cols="50" rows="5" name="edit[body]"><%edit_body></textarea></dd>
   - 省略 -
</form>

この部分を、以下のように修正します。
フォームの開始タグにname属性を追加して、テキストエリアのタグの前にスクリプトと改行を埋め込みます。

<!-- コメントフォーム -->
<form method="post" action="./" id="comment_post" name="comment_form">
   - 省略 -
<dt><label for="comment">Comment&nbsp;:</label></dt>
<dd><script type="text/javascript" src="http://blogx.fc2.com/load.js"></script><br />
<textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea></dd>
   - 省略 -
</form>

<!-- コメント編集フォーム -->
<form method="post" action="./" id="comment_edit" name="comment_form">
   - 省略 -
<dt><label for="comment">Comment&nbsp;:</label></dt>
<dd><script type="text/javascript" src="http://blogx.fc2.com/load.js"></script><br />
<textarea id="comment" cols="50" rows="5" name="edit[body]"><%edit_body></textarea></dd>
   - 省略 -
</form>

「http://blogx.fc2.com/load.js」の「x」には、ご自分のブログサーバー番号を入れてください。
ex) ウチの場合は第10サーバーなので「http://blog10.fc2.com/load.js」となります。
このままでも問題なく動きますが、ご自分のブログのサーバー番号に変えたほうが、動作がはやいのではとおもわれます。


■ CSS
まず、絵文字の表示についての指定を修正します。
CSSの下のほうにある、「テキスト・画像表示設定」部分の「絵文字」の箇所。

img.emoji {
 background-color: transparent;
 margin: 0px;
 vertical-align: middle;
 float: none;
}

この部分を、以下のように書きかえてください。

img.emoji, div.entry_body img.emoji {
 background-color: transparent;
 margin: 1px 2px 4px 2px;
 padding: 0px;
 border: none;
 vertical-align: middle;
 float: none;
}

ここを修正することで、絵文字をいっぱい並べても、変な空間があかなくなります。
絵文字を使うかたは、コメント装飾機能を使わない場合でも、これだけ修正していただけると嬉しいです。すみません;;;。
ここの「margin」をいじることで、絵文字の間隔を変えることができます。
お好みに合わせて調節してください。値は左から「上、右、下、左」の順番です。
次に、CSSのさらに下のほう、「コメント用フォーム」部分の設定箇所にすこし追加します。
ここに、以下を追加します。「div#main form」より下がいいと思いますが、迷ったらCSSのいちばん下で問題ないと思います。
これは、コメントフォームに表示される、コメント装飾機能のボタン画像用の設定です。

div#main form img {
 margin: 0px; padding: 0px; border: 0px;
}



修正箇所は以上です。コメントフォームに装飾用の画像ボタンが表示されていれば成功です。
スポンサーサイト

Comment

管理者だけに表示を許可する

Trackback

Trackback URL:

http://peacockblue.blog10.fc2.com/tb.php/77-ce6c36a6
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。