カスタマイズ日和

はてなブログをカスタマイズした記録をまとめていきます。ミジンコのようにちまちまとカスタマイズ中。

【はてなブログ】続きを読むボタンをカスタマイズするには

最近、少しずつですが、CSSのことを理解し始めました。

とっつきにくいと思っても、面と向かって話してみると実は…みたいなノリですね。(ちがう)

そんな中で、続きを読むボタンのカスタマイズ方法です。

f:id:darie1228:20160226010231p:plain

このボタンもないならないでいいのかもしれませんが、形を変えたり、色を変えたりとカスタマイズのしがいのある部分だと思います。個性が出るところですね。

 

やり方ですが、 

デザイン→スパナアイコン→デザインCSS に以下のコードをコピペ。

.entry-content .entry-see-more {
padding:0;
width: 110px;
height: 35px;
line-height: 35px;
color: #FFF;/*文字色*/
background-color:#FCDF1D;/*背景色*/
font-size: 15px;
font-weight: 500;
text-align: center;
display: inline-block;
text-decoration: none;
-webkit-border-radius: 20px;/*角丸はここを『30』*/
border-radius: 20px; /*角丸はここを『30』*/
transition: all .3s;
}

.entry-content .entry-see-more:hover {
color: #FFF;/*押した後の文字色*/
background-color: #009250;/*押した後の背景色*/
}

ボタンの形を変える場合は、width(ボタンの幅)height(ボタンの高さ)-webkit-border-radius, border-radius(ボタンの角の丸さ)の値を変更してください。

ボタンの形を変えると、中の文字位置が微妙に合わなくなったりしますので、line height(ボタン内の文字の位置)を変えたり(heightと同じ値にすると中央にきます)、font-size(ボタン内の文字の大きさ)を変えたりしてみてください。

 

ボタンの色は、/*背景色*/、/*押した後の背景色*/と書いてあるback-ground colorで変更することができます。

 

続きを読むボタンのカスタマイズは、以下のサイトを参考にさせていただきました。

georges.hatenablog.jp

ここまで読んでいただき、ありがとうございました!