最近、少しずつですが、CSSのことを理解し始めました。
とっつきにくいと思っても、面と向かって話してみると実は…みたいなノリですね。(ちがう)
そんな中で、続きを読むボタンのカスタマイズ方法です。
このボタンもないならないでいいのかもしれませんが、形を変えたり、色を変えたりとカスタマイズのしがいのある部分だと思います。個性が出るところですね。
やり方ですが、
デザイン→スパナアイコン→デザイン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で変更することができます。
続きを読むボタンのカスタマイズは、以下のサイトを参考にさせていただきました。
ここまで読んでいただき、ありがとうございました!