コメントボタンをカスタマイズ

サイトのデザインを変えた後、ぱっと見て分かる修正が必要な箇所はよいのですが、暫く使ってみないと気付かない部分というのも結構あります。

今回はコメントボタン。

カスタマイズする前の状態

先日、コメントを頂いたので、確認したら、こんな感じで表示されてました（画像は実物大ではありません）。

頂いたコメントに対してこちらからもコメントを書いたら、コメントボタンとidの間のスペースがほとんどなく、今にも重なりそうです。

変更箇所

はてなブログのデフォルトのコメントボタンはサイズも小さめで、あまり目立ちません。

そこで、ボタンの配置と一緒にデザインやサイズも変更しました。

参考にしたサイト

このサイトさんを参考にさせて頂きました。
blog.minimal-green.com

書き加えたCSS

/*-------------------------
  コメントボタン
 -------------------------*/
.leave-comment-title {
display: inline-block;
*display: inline;
*zoom: 1;
padding: 10px;
margin-bottom: 10px;
line-height: 20px;
color: #996655 !important;
background-color: #ffecf5 !important;
text-align: center;
vertical-align: middle;
border-radius: 4px;
background-clip: padding-box;
cursor: pointer;
font-size: 14px;
text-decoration: none;
font-weight: bold;
border: 1px solid #454545;
text-decoration: none !important;
}
.leave-comment-title::before {
font-family: "blogicon";
content: "\f01d";
padding-right: 5px;
}
.leave-comment-title:hover {
color:#666 !important;
background-color: #f9fafb !important;
text-decoration: none !important;
}

①ボタンとid間のスペース
margin-bottomを10pxに変更

②テキスト、リンク、背景の色
参考にした要素をCSSにそのまま貼りつけてみると、テーマ自体に設定されている色が有効となり、貼り付けた要素内の色は反映されません。
なので、要素内の色を指定する箇所を希望の色に書き換え、更に!importantを書き加えました。

これで、コメントボタンのデザイン、サイズ、配置、色の変更完了です。