【CSS・はてなブログ】「コメントを書く」ボタンの外観を変えてみた！
どうも！LSSです！！
今回は、昨日の記事のコメント欄にリクエスト？いただいた事をやってみますｗ
421miyako(id:m421miyako)様、いつもありがとうございます^^
こんなボタンにしてみました！
↑ダミーサンプルです（クリックしてもコメント画面になりませんｗ）
やってみると楽しくなってしまい、ちょっと凝りすぎたかも^^;;;
コード
はてなブログの「デザインCSS」に、以下のコードをコピペします。
.leave-comment-title:before{content:"( ..)φ "!important;}
.leave-comment-title{
display:block!important;
width:250px!important;
margin:1em!important;
font-weight:bold!important;
border-radius:22px!important;
background-image:radial-gradient(circle 100px at 65% 35%,#ffffff,#666666)!important;
border:7px outset #dddddd!important;
}
.leave-comment-title:hover{
background-image:radial-gradient(circle 120px at 65% 35%,#ffffff,#aaaaaa)!important;
}
解説
.leave-comment-title:before{content:"( ..)φ "!important;}
冒頭１行目、これは昨日の記事に書いた、「コメントを書く」の前に文言を付け足す指定です。
メモメモ、のアスキーアートをつけてみました^^
また、後ろに!importantをつけています。
!importantをつけたCSS指定は、優先度が高くなります。
（!important同士がバッティングする事もあるので「絶対」ではありません）
今回の記事で扱う内容は、はてなブログの「テーマ」による指定とバッティングしやすく、テーマによっては上手くいかない！という事になる可能性を下げようと足掻いています^^;
.leave-comment-title{
display:block!important;
width:250px!important;
margin:1em!important;
続いてこの部分。
これは、後に出てくるborder幅の分、コメント欄にボタンの表示が重なってしまう事を避けるための指定です。
font-weight:bold!important;
「コメントを書く」の文字を太字にする指定です。
border-radius:22px!important;
ボタンの角を丸くする指定です^^
ここの数値を小さくすると角丸が小さくなります。
background-image:radial-gradient(circle 100px at 65% 35%,#ffffff,#666666)!important;
背景を「円形グラデーション」にして、自分好みな感じに仕上げましたｗ
「円形グラデーション」については、以前の記事で解説しています。
詳しく知りたい方は↓こちら！
border:7px outset #dddddd!important;
ボタンの周りを 7px幅の枠線で囲んでいます。
色は#dddddd（灰色）で、outoset（盛り上がっているように見える）タイプの枠線を指定しています。
.leave-comment-title:hover{
background-image:radial-gradient(circle 120px at 65% 35%,#ffffff,#aaaaaa)!important;
}
最後のこれ。
:hoverは「マウスカーソルが乗った時に」変化する指定を書く、という指定です。
内容としては「円形グラデーション」の光の広がりが違って見えるような指定にしています。
改変ポイント
.leave-comment-title:before{content:"( ..)φ "!important;}
.leave-comment-title{
display:block!important;
width:250px!important;
margin:1em!important;
font-weight:bold!important;
border-radius:22px!important;
background-image:radial-gradient(circle 100px at 65% 35%,#ffffff,#666666)!important;
border:7px outset #dddddd!important;
}
.leave-comment-title:hover{
background-image:radial-gradient(circle 120px at 65% 35%,#ffffff,#aaaaaa)!important;
}
もし「自分のブログで使ってみたいけど、自分好みに変えてみたい！」と思った方がおられた時のために、手軽に改造できる部分に色をつけてみました。
赤文字は色を指定している部分です。
ボタンの背景は#ffffffから#666666に変化するグラデーション、枠線の色は、#ddddddといった具合です。
オレンジ文字はパーツの大きさを指定している部分です。
ボタンの横幅は250px、角の丸みは22px、枠線の太さは7pxといった具合です。
デザインCSSにコピペしてから、書き換えてみて効果を確認していって好みのタイプに近づけていくのがいいかと思います^^
シンプル版
ちょっと調子に乗ってややこしくしすぎたかも^^;
なので、ごくごくシンプルに「角を丸くして、ボタンの色を変えたい」だけなら、
.leave-comment-title:before{content:"( ..)φ "!important;}
.leave-comment-title{
border-radius:22px!important;
background-color:lightblue!important;
}
ってコードで、
↑こんなボタンになります^^
…というのも書いておきますねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
