Home > FC2ブログ > basic_white > basic_whiteテンプレート コメントフォームの表示項目とデザイン変更

basic_whiteテンプレート コメントフォームの表示項目とデザイン変更

 basic_whiteテンプレートのコメントフォームの表示項目とデザインを変更する方法です。

 「名前」「タイトル」といったテキストを変更したり、メールアドレスや絵文字アイコンなど不要な項目を削除します。

 上記コードをスタイルシートに追加すると、左側に名前などのラベル、右側にテキストボックスが配置されるデザインになります。

タイトルの入力項目を削除する

 場所はCtrl+Fキーで『for="sub』を検索。以下2つの部分を丸ごと削除してください。

<dt><label for="subject"><%template_title></label></dt>
<dd><input id="subject" name="comment[title]" type="text" size="30" value="No title" onblur="if(this.value == '') this.value='No title';" onfocus="if(this.value == 'No title') this.value='';" /></dd>

<dt><label for="subject"><%template_title></label></dt>
<dd><input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" /></dd>

メールの入力項目を削除する

 場所はCtrl+Fキーで『for="ma』を検索。以下2つの部分を丸ごと削除してください。

<dt><label for="mail"><%template_address></label></dt>
<dd><input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" /></dd>

<dt><label for="mail"><%template_address></label></dt>
<dd><input id="mail" type="text" name="edit[mail]" size="30" value="<%edit_mail>" /></dd>

URLの入力項目を削除する

 場所はCtrl+Fキーで『for="ur』を検索。以下2つの部分を丸ごと削除してください。

<dt><label for="url">URL</label></dt>
<dd><input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" /></dd>

<dt><label for="url">URL</label></dt>
<dd><input id="url" type="text" name="edit[url]" size="30" value="<%edit_url>" /></dd>

装飾文字・絵文字アイコンを削除する

 場所はCtrl+Fキーで『dd><script』を検索。以下の部分を丸ごと削除してください。全く同じコードが2ヶ所ありますが、2つとも削除します。

<dd><script type="text/javascript" src="<%template_comment_js>"></script></dd>

パスワードの入力項目を削除する

 場所はCtrl+Fキーで『for="pa』を検索。以下2つの部分を丸ごと削除してください。

<dt><label for="pass"><%template_password></label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="20" /></dd>

<dt><label for="pass"><%template_password></label></dt>
<dd><input id="pass" type="password" name="edit[pass]" size="20" /></dd>

非公開コメントの入力項目を削除する

 場所はCtrl+Fキーで『dt><%template_p』を検索。以下2つの部分を丸ごと削除してください。

<dt><%template_private></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" /><label for="himitu"><%template_private_check></label></dd>

<dt><%template_private></dt>
<dd><input id="himitu" type="checkbox" name="edit[himitu]" /><label for="himitu"><%template_private_check></label></dd>

名前・タイトルなどの見出しテキストを変更

 以下の部分を変更してください。それぞれ2ヶ所あるのでどちらも変更してください。

<label for="name"><%template_name></label>
↓変更例「名前」→「Name」
<label for="name">Name</label>

<label for="subject"><%template_title></label>
↓変更例「タイトル」→「Title」
<label for="subject">Title</label>

 デフォルトの「No title」を「無題」などに変更する時は以下の部分を全て同じテキストに変更してください。

value="無題" onblur="if(this.value == '') this.value='無題';" onfocus="if(this.value == '無題') this.value='';"

<label for="mail"><%template_address></label>
↓変更例「メールアドレス」→「Mail」
<label for="mail">Mail</label>

<label for="comment"><%template_body></label>
↓変更例「本文」→「Message」
<label for="comment">Message</label>

<label for="pass"><%template_password></label>
↓変更例「パスワード」→「Password」
<label for="pass">Password</label>

<dt><%template_private></dt>
↓変更例「非公開コメント」→「Private」
<dt>Private</dt>

<label for="himitu"><%template_private_check></label>
↓変更例「管理者にだけ表示を許可する」→「管理者にのみ通知」
<label for="himitu">管理者にのみ通知</label>

<input type="submit" value="<%template_send>" />
↓変更例「送信」→「投稿」
<input type="submit" value="投稿" />

コメント本文の入力エリアの横幅と高さを調整

 追加したスタイルシートの次の部分の数値を増減させてください。「65」が横幅で「8」が高さです。増やすと広がり、減らすと狭まります。

#comment {width: 65%; height: 8em;}

ラベルとテキストボックスの間隔を調整

 追加したスタイルシートの次の部分の数値を増減させてください。数値には同じ値を入れます。

#comment_form dt {
  float: left;
  clear: both;
  width: 8.0em;
  padding:0 0 8px;
  font-size: 90%;
}
#comment_form dd {
  margin-left: 8.0em;
  padding:0 0 10px;
}

 次のように数値を減らすとテキストボックスが左に寄ります。減らしすぎるとラベルの横幅が小さくなり、テキストが改行されてしまうので注意してください。

width: 6.9em;

margin-left: 6.9em;

テキストボックスの背景色と枠線を変更

 スタイルシートに以下のコードを追加してください。

#comment_form input[type="text"], #comment_form input[type="password"],
#comment { /* コメントフォーム背景枠線 */
  background: #f6f6f6;
  border: 1px #999999 solid;
  padding: 4px;
}

 背景色は「f6f6f6」の部分で、枠線色は「999999」の部分で変更できます。

関連記事
スポンサー リンク
コメント
#165 : No title
#153です。
おかげさまでコメント欄がスッキリいたしましたです!
それ以外にも色んな情報を教えていただき感謝です!
ありがとうございました(*^_^*)
#250 : No title
コメントに記事事の通し番号をつけたいのですが、やり方が分りません。
場所は、タイトル位置がいいです。
このブログのようにつけれたら、コメントに対する回答等が見易くなるので、
申し訳ないですが、是非教えて下さい。
宜しくお願いします。
#253 : Re250: コメント番号
コンバンハ。
変数「<%comment_no>」でコメント固有の番号が表示されます。
テンプレートHTMLにある「<h4 class="sub_title"><%comment_title></h4>」を
<h4 class="sub_title"><%comment_no>:<%comment_title></h4>
とすれば番号がタイトルの前に表示されます。前に「No.」を入れて「No.<%comment_no>」にすれば「No.番号」になります。

番号は記事毎ではなくコメント固有です。記事毎でも出来ない事はありませんが、コメントを削除されてしまうと番号がずれてしまうのとデザインに影響を及ぼす事からオススメできません。
#259 : No title
ありがとうございます!
早速、コメントに番号つけました。
#303 : No title
<%comment_no>を使ってコメントに番号をつけることは出来たのですが記事毎のコメントに1から番号をつける方法を教えていただけないでしょうか?

http://voidspace.web.fc2.com/silentminority/appendix/p152.html#REF.APP152.C2
このサイトを参考に試してみたのですが番号が表示されずうまくいきませんでした。
よろしくおねがいします。
#304 : No title
#303の者です。

すみません、自己解決しました。
#314 : No title
はじめまして~<(_ _)>
ライトブルーと申します~∑(≧▽≦)!!
ベーシック ホワイトのテンプレート利用者でシンプル ホワイトにカスタムしようと思ってました~( ̄ー ̄)ノ
自分が要らないと思うものは全て削除した設定にしてましたが・・・
設定が出来ない所もありmayさんのブログのおかげで、かなり思った様にカスタムが出来ました~(*゚▽゚*)
とても、助かりました ありがとうございます~<(_ _)>

CM:0 l TB:0の表示をコメント:0 l トラックバック:0に変更する方法と
右サイドバーを左側に移動する方法を教えてもらえないでしょうか~(゜ー゜)??
あつかましくてゴメンナサイ~( ̄◇ ̄;)
#347 : No title
質問お願いいたします。コメントフォーム自体を全て削除する方法はございますか??よろしくお願い致します。
#359 : No title
ありがとうございます!!

まさに、コメント欄のウザさに悩んでいた所、たどり着きました

参考にしてコメントかなり すっきりしました

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered