WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
「続きを読む」をCSSでボタン化する
画面制御ボタンのカスタマイズ
「続きを読む」をCSSでボタン化する
style.css を編集するだけで、「続きを読む」をボタンにすることが出来る。
以下に、「続きを読む」ボタンのCSSを記録。
スポンサー リンク
style.css に追記
style.css に下記ソースコードを追記するだけでよい。
/*-----------------------------------------------------------*/
/* 「続きを読む」リンクのボタン化 */
/*-----------------------------------------------------------*/
a.more-link{
display: inline-block;
font-size: 14px;
color: #fff !important;
background-color: #444;
text-align: center;
text-decoration: none;
line-height: 0;
padding: 0 10px 15px 10px;
margin: 10px 0 0 0;
box-sizing: border-box;
border-radius: 5px;
float: right;
}
a.more-link:after {
content: '';
display: block;
clear: both;
}
/* ホバー時にボタンを薄くする */
a.more-link:hover{
color: #fff;
background-color: #DA4453;
text-decoration: none;
}
/* 「続きを読む」リンクのボタン化 ここまで */
参考:「続きを読む」ボタンのサイズ(高さ)について。
以上。
(2017.11.06)
スポンサー リンク