Luxeritas(ルクセリタス)でコメントしやすい環境を作る方法

前回、まとめブログ運営においてコメントの重要性はお伝えしました。まだ読んでいない方はこちらの記事を読んでください。

あわせて読みたい

コメントの重要性 まとめブログにおいて、記事に対するコメントの書き込みは重要です。 SEO評価、再訪問率、PV数、全てに関係してきます。 今回はまとめブログのコメントに対する私の考え...

いかに読者がコメントをしやすい環境を作るか、WordPressでのサイトはこれが課題になります。

私が行っているコメント対策を説明します。

ディスカッション設定

WordPressのディスカッション設定について説明します。

コメントを承認制にしない

WordPressの初期設定でコメントは手動承認制になっています。これを変更します。

ダッシュボード→設定→ディスカッションと進みます。

コメント表示条件のチェックボックスを2つとも外します。

これでどんなコメントでも表示されるようになります。

そのうち外国人のコメント(スパム)がよく来るようになりますが、コメントブラックリストの設定をしたらこなくなります。

名前とメールアドレスは不要

コメントの投稿者名とメールアドレスは不要です。

ダッシュボード→設定→ディスカッションと進み、他のコメント設定からチェックを外しましょう。

コメントへのジャンプボタンを作る

ルクセリタスはコメントまでが遠いです。

記事下にすぐあれば良いのですが、関連記事があります。(回遊率を上げるためだと思います。)

なるべく読者がコメントしやすいようにコメントまでのジャンプボタンを作りましょう。CSSを編集しますが、ルクセリタスなら私と同じようにやれば問題なく作れます。

まずはジャンプボタンのデザインを決めます。毎度おなじみのサルワカさんのサイトから探しましょう。

サルワカ | サルでも分かる図解説...

CSSで作る！押したくなるボタンデザイン100（Web用） HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

今回もシンプルにこのデザインにします。

子テーマの編集からスタイルシートの追記

ダッシュボード→Luxeritas→子テーマの編集→style.cssに進みます。

そして、CSSの部分をコピペします。

.btn-square {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/ボタン色/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square:active {
/ボタンを押したとき/
-webkit-transform: translateY(4px);
transform: translateY(4px);/下に動く/
border-bottom: none;/線を消す/
}

せっかくなので、:activeを:hoverに変更してみました。そして、コピペした結果がこれです↓

これでジャンプボタンのスタイルシートは完成しました。次は記事下にジャンプボタンを設置します。

記事下ウィジェットにジャンプボタンを設置

外観→カスタマイズ→ウィジェット→記事下ウィジェットに移動します。(記事下ウィジェットは記事ページを表示している状態じゃないと出現しません。)

そして、記事下ウィジェットにテキストを追加します。

先ほどのサルワカさんのサイトからhtmlのコードをコピペします。(テキストモードの方にコピペしてください。)

これでボタンが表示されているはずです。

あとは、href=”#”をコメントへのリンクにすれば大丈夫です。

これも検証モードで調べたら簡単にわかります。

あわせて読みたい

お手軽CSS変更方法(サイドバー見出しのデザイン変更) CSSってなんか難しいイメージありませんか？ 自分のまとめブログを持っているなら、CSSに対する知識は多少は必要です。が、そこまで必死に勉強することはありません。 ...

divタグが#comments.gridとなっています。divタグは位置を表すのでここに飛ぶようにします。

href=”#comments“と記述します。.gridまで書くと、うまくジャンプしませんでした。

最後にBUTTONだとおかしいので、「コメントする」みたいな感じにすると良いでしょう。BUTTONを書き換えましょう。

どうでしょうか？これでジャンプボタンが設置できたはずです。

メールアドレス、ウェブサイト入力欄を消去

WordPressは初期状態で、コメント欄に名前・メールアドレス・ウェブサイトの入力欄が表示されています。

コメントする際、不要な情報は、コメントを入力するのに面倒なので、名前以外(メールアドレスとウェブサイト)は消去しましょう。

消去する部位の調べ方は、検証モードで簡単にわかります。ここでは省略します。

やり方はこちらに書いてますので、参考にどうぞ。

あわせて読みたい

お手軽CSS変更方法(サイドバー見出しのデザイン変更) CSSってなんか難しいイメージありませんか？ 自分のまとめブログを持っているなら、CSSに対する知識は多少は必要です。が、そこまで必死に勉強することはありません。 ...

以下のコードを「ダッシュボードメニュー」→「Luxeritas」→「子テーマの編集」→「スタイルシート」に追記してください。

p.comment-form-email {
display: none;
}

p.comment-form-url {
display: none;
}

これでメールアドレスとウェブサイトの入力欄が消えます。(これはルクセリタスのみです。)

noneというのがCSSでは見えなくするコードです。実際は見えなくなるだけで読み込まれています。

まとめ

私が思いついたコメントのしやすい環境設定を書きました。

また何か良い施策を思い出したら追記します。

CSSの編集は、とりあえず「自分のやりたいこと」を実装できれば良いと思っているので、私のやり方は専門家からすれば多分イマイチな方法だと思います。

上記コードをコピーする際は、それをわかった上で使ってください。