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

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

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

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

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

#comments input {
    border:1px solid crimson;
}

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

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

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

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

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

#comments textarea {
   border:1px solid crimson;
}

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

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

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

#comments [type="submit"] {
    padding:7px 10px;
    background: #ff6893;
    color:white;
}

/*クリックしたとき*/
#comments [type="submit"] :hover {
    background:lightpink;
    color:gray;
}

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

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

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

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

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

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

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

きらり

これだけで消えるの？

結耶

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

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

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

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

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

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

最後に

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

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

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

応援よろしくお願いします。

     

お問い合わせはこちら

この記事を書いた人

フォロー

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター

きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM