【Luxeritas】記事下のコメント欄の見た目をぷちカスタマイズ

 
ブログにはユーザーが記事に対しての感想や意見などを書き込めるように「コメント機能」があります。
中にはコメントスパム防止のためにコメント欄を非表示にしている人もいると思いますが…コメント欄の必要性は人それぞれです。

私の場合はやはりコメントをいただけると嬉しいのでコメント機能を使用しています。

ですがWordPressテーマ「Luxeritas(ルクセリタス)」のデフォルトのコメント欄はコンな感じ。

きらり

きらり

なにか問題でもあるの?
結耶

結耶

んー問題というか…私的には入力枠をもう少しはっきりさせて、ウェブサイト(URL)入力欄を消したいかな?
それと「送信ボタン」の色をブログに合わせたいな~

 
送信ボタンの色は以前から変えたいと思っていました。
入力枠に関しては私が目が悪いということもありちょっとわかりづらいのでもう少しはっきりさせたいと思ったわけです。

というわけでコメント欄をぷちカスタマイズしてみようと思います。

 

スポンサーリンク

カスタマイズ後

私はコメント欄をぷちカスタマイズしてこんな感じにしました!

 

 

コメント欄をぷちカスタマイズ

では私がしたぷちカスタマイズをひとつずつご紹介します。

名前、メールアドレス入力枠のカスタマイズ

まずは名前やメールアドレス、コメント入力枠のカスタマイズです。

 
私がしたのは枠線を変更しただけですが、余白の調整や背景色を付けることも可能です。

#comments input」を使うと「#comments」内のinputタグに反映されます。
つまり、ウェブサイト(URL)入力欄がある場合はウェブサイト入力欄、送信ボタンにも適用されます。

※送信ボタンは後ほど別で背景色などを設定していきますので最終的にはそちらが反映されます。

 

コメント枠のカスタマイズ

次にコメントを入力してもらうコメント枠のカスタマイズです。

 
こちらも私がしたのは枠線を変更しただけです。
内側の余白の調整や背景色を付けることももちろんできます。

 

送信ボタンのカスタマイズ

送信ボタンは背景色をブログカラーにして、さらにボタンをクリックしたときに色が変わるようにしました。

 
上でも書きましたが、「#comments input」で指定した枠線が適用されます。
枠線を消したい場合は「borser:none;」を追加すれば消えます。

 

 

ウェブサイト、メールアドレスを消す

ウェブサイト入力欄を消す方法です。

消す方法は2通りありますが、ひとつはphoファイルをいじる方法なので、ここで紹介するのは安全なCSSで非表示にする方法を紹介します。

※この方法はLuxeritas以外のテーマつまりWordPressのコメントであれば適用されるようです。

ウェブサイト入力欄を消す

 

きらり

きらり

これだけで消えるの?
結耶

結耶

消えます!ちゃんとウェブサイトの入力枠と上の「ウェブサイト」という文字まで消えますw

 

メールアドレス入力欄を消す

メールアドレス入力欄があるとコメント書くのを躊躇するユーザーがいるかもしれません。
ユーザーに気軽にコメントをしてもらうために「メールアドレス入力欄を消したい」と思う人もいると思います。

なのでメールアドレス入力欄を消す方法も書いておきます。

 
メールアドレスを必須にしている場合は、[設定][ディスカッション]で「名前とメールアドレスを必須にする」のチェックを外してください。

 

 

最後に

今回は「Luxeritasでコメント欄の見た目ををぷちカスタマイズ」する方法をご紹介しました。
見た目をすこーし変えただけなのでぷちカスタマイズですw

ウェブサイト、メールアドレス入力欄を消す方法はWordPressのコメントであれば適用されるようですので「消したい」という方は試してみてください。

コメントをもらえると非常に嬉しいし、記事を書く励みにもなります。
ユーザーがコメントしやすくなるようにぷちカスタマイズしてみてください。

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。