RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.41 ~ No.50 > 記事No.44

『HCB Comment Box』コメントフォームの詳細カスタマイズ方法

← 前の記事

次の記事 →

hcb_comment_form_custom

こんにちは、ふかふかです!

以前の記事で、非Wordpressサイト(HTMLベースで構築されたサイト)に、ブログのようなコメント欄を簡単に設置する方法について紹介しました。

参考:ホームページにブログのようなフィードバックコメント欄を簡単に設置する方法

ですがこのとき設置したコメントフォームは海外サイトの「HCB Comment Box」というサービスを利用したものなので、サイトにコードをコピペし、 コメントフォームを設置しただけでは各所の文字が英語のままになっていたり、納得のいくスタイルでなかったりして不満点も多いかと思います。

そこで今回は、設置したHCBコメントフォームの詳細なスタイルをカスタマイズする方法について解説していきたいと思います!

※コメントフォームの設置方法については以前の記事をご覧ください。

スタイルの設定(CSSの編集)

まずコメント欄の枠の大きさや文字色など、スタイルに関する設定方法について解説します。

設置したHCB Comment BoxのスタイルはCSSで調整されており、各部分にid属性が割り振られています。

例えば...

  • コメントフォーム全体: #HCB_comment_box
  • 名前入力エリア: #HCB_comment_box #hcb_form_name
  • コメント入力エリア: #HCB_comment_box textarea
  • 投稿されたコメント文: #HCB_comment_box blockquote

...のように、id属性が割り振られています。なのでスタイルを変更したい個所のid属性をCSSで指定して、スタイルを自分で編集することができます。

ちなみに各部分のid属性に関しては、HCB Comment Boxのサイトの"THEMES"のページで解説されているので、そちらをご覧になってください。

http://www.htmlcommentbox.com/css-guide.html


※しかしCSSで編集する際に注意点があります。HCB Comment Boxのコメントフォームのスタイルは元々Web上のCSSを読み込んでいるので、 今回のようにCSSでスタイルを再設定する際は、こちらの設定を優先させるためにCSS記述分の後ろに !important を記述しないと変更が反映されない場合があります。

例:#HCB_comment_box textarea{
height:150px !important; font-size:17px !important; padding:10px !important; border:1px solid #888 !important;
}


表示上の設定(スクリプト文の編集)

次にコメントフォームの言語などに関する、表示上の設定を行います。

実はHCB Comment Boxのサイトには、より詳細にカスタマイズするためのスクリプト文が配布されています。

このスクリプト文をコピーして、HTMLのコメントフォームを設置している箇所の上に張り付けてください。

スクリプト文が載っているページは、メニューバーの"THEMES"のページを下にスクロールしていくと"advanced options"と記述された部分があるので、そこをクリックすると表示されます。

http://www.htmlcommentbox.com/advanced.html

THEMES のページの一番下にある advanced options をクリック
出現したスクリプト文を全てコピーし、コメントフォームより上に張り付ける

張り付けたスクリプト文を編集することにより、言語など各部分を編集することができます。

例えば、コメント送信ボタンには最初 "Comment" と書かれていますが、これを好きな日本語に直したい場合には...

  • 元 submit : 'Comment',
  • 変更後 submit : 'コメントを送信',

のように変更することで、コメントフォームの表示も変わります。

例として、私の使用しているスクリプト文を公開します。


自分で編集するのが面倒な方は、上のスクリプト文を張り付けるだけで私のコメントフォームと同じ表示になるはずです(ちなみに私のコメントフォームの種類は"Twitter Bootstrap"です)

解説は以上です。ご質問のある方は下のコメントフォームよりお願いします。みなさんも色々編集して、おしゃれなコメントフォームを作ってみてくださいね!

関連記事はこちら

この記事に対するコメント

Comment Form is loading comments...

過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ