【WordPress】『記事を読む』ボタンをカスタマイズ【Simplicity2】
こんにちは、マーチンです。
WordPressのテーマ「Simplicity2」のカスタマイズを紹介します。
『記事を読む』ボタンを装飾する
デフォルトではこんな感じなので装飾していきます。
子テーマのスタイルシート（style.css）にコードを追加していきます。
/* 記事を読むボタン */
.entry-read a{
color:#fff;
font-size:14px;
background-color:#6090ef;
border:1px solid #6090ef;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
}
.entry-read a:hover{
color:#fff;
background-color:#FFC3BF;
border:1px solid #FFC3BF;
}
色はお好みで変更して下さい。
『記事を読む』ボタンを右側に移動する
左側にある『記事を読む』ボタンは右側にある方が良いと思うので移動します。
子テーマのスタイルシート（style.css）にコードをさらに追加していきます。
/* 右側に移動 */
.entry-read {
text-align: right;
margin-right: 10px;
}
関連記事の『記事を読む』ボタンも装飾
子テーマのスタイルシート（style.css）にコードを同じように追加していきます。
/* 関連記事の読むボタン */
.related-entry-read a{
color:#fff;
font-size:14px;
background-color:#6090ef;
border:1px solid #6090ef;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
}
.related-entry-read a:hover{
color:#fff;
background-color:#FFC3BF;
border:1px solid #FFC3BF;
}
関連記事の『記事を読む』ボタンも右側に移動
同じように、関連記事の『記事を読む』ボタンを右側に移動させたい場合は、同じように次のコードを子テーマのスタイルシート（style.css）追加してください。
/* 右側に移動 */
.related-entry-read {
text-align: right;
margin-right: 10px;
}