ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

HP・ブログ関連

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

2019年4月8日

ブログでよく見るような、閲覧者が投稿したコメントがフィードバックされて表示されていくコメントフォームをホームページに設置する簡単な方法についてご紹介します!
※このページの下部のようなコメント欄が設置されます(試しにコメントしてみて下さい)。

ちなみに以前の記事でもコメントフォームの設置方法について紹介しましたが今回は、より簡単に、より多機能な コメント欄を設置することができます。

① 提供サイトへのアクセス&ログイン

今回のコメントフォームの設置には、「HTML COMMENT BOX」さんのサイトが提供するサービスを利用します。
※コメントフォーム管理の為に「Googleアカウント」が必要です。
(アカウントの運用は自己責任で行ってください)

サイトURL(海外サイト): https://www.htmlcommentbox.com/

上記のサイトにアクセスし、右上の「LOGIN/JOIN」ボタンを押して、お持ちの「Googleアカウント」でログインしてください。

もしGoogleアカウントをお持ちでない方は「Googleアカウントの作成」 でアカウントを作成してください。

② コメントフォームの作成

ログインが完了したら、左上の「GET THE CODE」をクリックしてください

すると上の画像のページが出るので、「+options」ボタンを押して、下の画像のようなオプション一覧を開いてください。

ここで設置するコメントフォームのレイアウト・機能の設定を行います。
(ちなみに画像は私の設定状況です)

■ 各設定の説明

  1. コメント欄のスタイルを4種類の中から選択できます(CSSで装飾することもできます)
  2. 一度に表示されるコメント数の上限を設定します。コメント数が この値を超えると「next page」ボタンが表示されるようになります。
  3. コメントフォームを設置するページのURLを入力してください。 ページごとにコメントを管理するためです。
  4. メールアドレス入力欄を表示するか否かです。
    ・don`t show: 表示しない
    ・show: 表示する(入力は任意)
    ・require: 表示する(入力必須)
    アドレスを入力し、「email me replies」にチェックを入れてコメントを投稿すると 返信があった際にそのアドレスに通知がきます。

【その他の設定項目】

・Collapse Comment Box
チェックを入れると、最初コメントフォームが表示されない状態でページが開きます
(折り畳み表示)。

・Put Comment Box At Top
コメント入力欄を上・下いずれの位置に設置するかの設定です。

・Use watermark labels
名前やコメント等の入力欄に薄く「Name」「Enter your comment here」と 表示されるようになります。

・Show Submission Date of Comments
コメントの投稿日を表示するか否か。

・Gravatar
「Gravatat」というアバター作成サービスで作成したアバターを 表示できるようにするか否か。

・Profanity Filter
NGワードを設定するか否か。(設定したい場合はアカウントの「Settings」ページの 「Filter Bad Words」の欄にNGワードを入力してください。)

・Show RSS Feed
RSSフィードボタンを表示するか否か。

・Show website field
WebサイトのURL入力欄を表示するか否か。

・Allow Replies.
コメントへの返信を許可するか否か。

・Allow Subscriptions.
サブスクリプションを許可するか否か。

・Ignore Query String
クエリ文字列を考慮するか否か。

・Prevent New Comments
コメントを締め切るか否か。

・Show entire site's comments
コメント全体を表示するか否か?(正直オンとオフで違いが分かりませんでした)。

③ コメントフォームの設置

手順②でコメントフォームの作成を終えたら、同ページに表示されているHTML文をコピーし、 設置したいページHTMLの設置したい箇所に貼り付ければ、実装は完了です。

※コメント欄の大きさやデザイン、言語に等の設定方法に関しては以下の記事をご覧ください。

これでブログのようなコメントフォームを簡単に設置することができました! もしもご不明な点がありましたら下のコメントフォームにお願いします。

-HP・ブログ関連
-, , , , , ,

Copyright© ゲマステ!- Gamers Station , 2019 All Rights Reserved.