こんにちは、ふかふかです!
以前の記事で、非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" のページで解説されているので、そちらをご覧になってください。
⇒ https://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"と記述された部分があるので、そこをクリックすると表示されます。
https://www.htmlcommentbox.com/advanced.html
THEMES のページの一番下にある advanced options をクリック
出現したスクリプト文を全てコピーし、コメントフォームより上に張り付ける
張り付けたスクリプト文を編集することにより、言語など各部分を編集することができます。
例えば、コメント送信ボタンには最初 "Comment" と書かれていますが、これを好きな日本語に直したい場合には...
元 submit : 'Comment',
変更後 submit : 'コメントを送信',
のように変更することで、コメントフォームの表示も変わります。
例として、私の使用しているスクリプト文を公開します。
<!-- customize labels of htmlcommentbox.com -->
<script>
// This code goes ABOVE the main HTML Comment Box code!
// replace the text in the single quotes below to customize labels.
hcb_user = {
// L10N
comments_header : ' ',
name_label : '名無しさん',
content_label: 'コメントをどうぞ!',
submit : 'コメントを送信',
logout_link : '<img title="log out" src="//www.htmlcommentbox.com/static/images/door_out.png" alt="[logout]" class="hcb-icon"/>',
admin_link : '<img src="//www.htmlcommentbox.com/static/images/door_in.png" alt="[login]" class="hcb-icon"/>',
no_comments_msg: 'まだコメントはありません',
add:'コメントを追加する',
again: 'さらにコメントを投稿する',
rss:'<img src="//www.htmlcommentbox.com/static/images/feed.png" class="hcb-icon" alt="rss"/> ',
said:'さん',
prev_page:'<img src="//www.htmlcommentbox.com/static/images/arrow_left.png" class="hcb-icon" title="previous page" alt="[prev]"/>',
next_page:'<img src="//www.htmlcommentbox.com/static/images/arrow_right.png" class="hcb-icon" title="next page" alt="[next]"/>',
showing:'もっと見る',
to:'~',
website_label:'website (optional)',
email_label:'email',
anonymous:'名無し',
mod_label:'(管理人)',
subscribe:'返信をメールで知らせる',
are_you_sure:'不適切なコメントですか?',
reply:'<img src="//www.htmlcommentbox.com/static/images/reply.png"/> 返信',
flag:' ',
like:'<img src="//www.htmlcommentbox.com/static/images/like.png"/> いいね!',
//dates
days_ago:'日前',
hours_ago:'時間前',
minutes_ago:'分前',
within_the_last_minute:'数分前',
msg_thankyou:'コメントをありがとうございます!',
msg_approval:'(this comment is not published until approved)',
msg_approval_required:'Thank you for commenting! Your comment will appear once approved by a moderator.',
err_bad_html:'Your comment contained bad html.',
err_bad_email:'Please enter a valid email address.',
err_too_frequent:'連続投稿はできません、数十秒おいてください。',
err_comment_empty:'コメント欄が空です',
err_denied:'コメントの投稿に失敗しました',
//SETTINGS
MAX_CHARS: 8192,
PAGE:'', // ID of the webpage to show comments for. defaults to the webpage the user is currently visiting.
RELATIVE_DATES:true // show dates in the form "X hours ago." etc.
};
</script>
<!-- done customizing labels of htmlcommentbox.com -->
自分で編集するのが面倒な方は、上のスクリプト文を張り付けるだけで私のコメントフォームと同じ表示になるはずです(ちなみに私のコメントフォームの種類は"Twitter Bootstrap"です)
解説は以上です。ご質問のある方は下のコメントフォームよりお願いします。みなさんも色々編集して、おしゃれなコメントフォームを作ってみてくださいね!
HP・ブログ関連
『HCB Comment Box』コメントフォームの詳細カスタマイズ方法
2019年4月10日
こんにちは、ふかふかです!
以前の記事で、非Wordpressサイト(HTMLベースで構築されたサイト)に、ブログのようなコメント欄を簡単に設置する方法について紹介しました。
ホームページにブログのようなフィードバックコメント欄を簡単に設置する方法
ブログでよく見るような、閲覧者が投稿したコメントがフィードバックされて表示されていくコメントフォームをホームページに設置する簡単な方法についてご紹介します! ※このページの下部のようなコメント欄が設置 ...
続きを見る
ですがこのとき設置したコメントフォームは海外サイトの「HCB Comment Box」というサービスを利用したものなので、サイトにコードをコピペし、 コメントフォームを設置しただけでは各所の文字が英語のままになっていたり、納得のいくスタイルでなかったりして不満点も多いかと思います。
そこで今回は、設置したHCBコメントフォームの詳細なスタイルをカスタマイズする方法について解説していきたいと思います!
スタイルの設定(CSSの編集)
まずコメント欄の枠の大きさや文字色など、スタイルに関する設定方法について解説します。
設置したHCB Comment BoxのスタイルはCSSで調整されており、各部分にid属性が割り振られています。
例えば...
...のように、id属性が割り振られています。なのでスタイルを変更したい個所のid属性をCSSで指定して、スタイルを自分で編集することができます。
ちなみに各部分のid属性に関しては、HCB Comment Boxのサイトの"THEMES"のページで解説されているので、そちらをご覧になってください。
⇒ https://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"と記述された部分があるので、そこをクリックすると表示されます。
https://www.htmlcommentbox.com/advanced.html
張り付けたスクリプト文を編集することにより、言語など各部分を編集することができます。
例えば、コメント送信ボタンには最初 "Comment" と書かれていますが、これを好きな日本語に直したい場合には...
のように変更することで、コメントフォームの表示も変わります。
例として、私の使用しているスクリプト文を公開します。
<!-- customize labels of htmlcommentbox.com -->
<script>
// This code goes ABOVE the main HTML Comment Box code!
// replace the text in the single quotes below to customize labels.
hcb_user = {
// L10N
comments_header : ' ',
name_label : '名無しさん',
content_label: 'コメントをどうぞ!',
submit : 'コメントを送信',
logout_link : '<img title="log out" src="//www.htmlcommentbox.com/static/images/door_out.png" alt="[logout]" class="hcb-icon"/>',
admin_link : '<img src="//www.htmlcommentbox.com/static/images/door_in.png" alt="[login]" class="hcb-icon"/>',
no_comments_msg: 'まだコメントはありません',
add:'コメントを追加する',
again: 'さらにコメントを投稿する',
rss:'<img src="//www.htmlcommentbox.com/static/images/feed.png" class="hcb-icon" alt="rss"/> ',
said:'さん',
prev_page:'<img src="//www.htmlcommentbox.com/static/images/arrow_left.png" class="hcb-icon" title="previous page" alt="[prev]"/>',
next_page:'<img src="//www.htmlcommentbox.com/static/images/arrow_right.png" class="hcb-icon" title="next page" alt="[next]"/>',
showing:'もっと見る',
to:'~',
website_label:'website (optional)',
email_label:'email',
anonymous:'名無し',
mod_label:'(管理人)',
subscribe:'返信をメールで知らせる',
are_you_sure:'不適切なコメントですか?',
reply:'<img src="//www.htmlcommentbox.com/static/images/reply.png"/> 返信',
flag:' ',
like:'<img src="//www.htmlcommentbox.com/static/images/like.png"/> いいね!',
//dates
days_ago:'日前',
hours_ago:'時間前',
minutes_ago:'分前',
within_the_last_minute:'数分前',
msg_thankyou:'コメントをありがとうございます!',
msg_approval:'(this comment is not published until approved)',
msg_approval_required:'Thank you for commenting! Your comment will appear once approved by a moderator.',
err_bad_html:'Your comment contained bad html.',
err_bad_email:'Please enter a valid email address.',
err_too_frequent:'連続投稿はできません、数十秒おいてください。',
err_comment_empty:'コメント欄が空です',
err_denied:'コメントの投稿に失敗しました',
//SETTINGS
MAX_CHARS: 8192,
PAGE:'', // ID of the webpage to show comments for. defaults to the webpage the user is currently visiting.
RELATIVE_DATES:true // show dates in the form "X hours ago." etc.
};
</script>
<!-- done customizing labels of htmlcommentbox.com -->
自分で編集するのが面倒な方は、上のスクリプト文を張り付けるだけで私のコメントフォームと同じ表示になるはずです(ちなみに私のコメントフォームの種類は"Twitter Bootstrap"です)
解説は以上です。ご質問のある方は下のコメントフォームよりお願いします。みなさんも色々編集して、おしゃれなコメントフォームを作ってみてくださいね!
この記事をシェアする
こちらの記事も読まれています!
関連コンテンツ
ガジェットレビュー
ふかふか
SNSフォロワー13万人以上、ウェブコンテンツクリエイターとして活動しています!国内・海外の多数の企業と提携し、年間250以上のガジェットレビューを行っています。見やすく・分かりやすくがモットー!
-HP・ブログ関連
-box, comment, html, カスタマイズ, コメント, コメント欄, サイト, スタイル, フォーム, ホームページ, メッセージ, 設置, 非wordpress