【WordPress】『記事を読む』ボタンをカスタマイズ【Simplicity2】

2020年1月17日

Photo by Van Tay Media

こんにちは、マーチンです。

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; 
}

 

 

2020年1月17日WordPressweb

Posted by まーちん