コメントを書く欄のデザインをカスタマイズする方法を紹介します。
デフォルトの「コメントを書く」は右寄せになっていて見えにくく、色もホバーすると緑になってしまいます。
そのため、「コメントを書く」をボックス型にして目立つようにし、マウスを上に乗せると指定の色へ変わるようにしました。
PC版コード
PC版は以下のコードをCSSへ挿入してください。
/*--------------------------------------
コメント欄
--------------------------------------*/
.leave-comment-title {
color: #ffffff !important;
padding: 25 25 25 25;
border: 2px solid #190710 !important;
background: #2A0A1B !important;
text-align:center !important;
border-radius: 5px / 5px !important;
width: 100% !important
}
.leave-comment-title:before {
color: #ffffff !important;
}
.leave-comment-title:hover {
color: #190710 !important;
background: #ffffff !important;
border: 2px solid #190710 !important;
transition: all .3s !important;
}
.leave-comment-title:hover:before {
color: #2A0A1B !important;
}
スマホ版コード
スマホ版は以下のコードをヘッダーへ挿入してください。
<style>
/*--------------------------------------
コメント欄
--------------------------------------*/
.leave-comment-title {
color: #ffffff !important;
border: 2px solid #190710 !important;
background: #2A0A1B !important;
text-align:center !important;
border-radius: 5px / 5px !important;
width: 93% !important;
margin:0 2 0 2 !important;
}
</style>
PC版、スマホ版ともに、色はそれぞれのブログの色と合うように変更してください。