HOME → 3 WordPress → 03 カスタマイズ → 

Twenty Seventeen 「続きを読む」をCSSでボタン化する

WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
「続きを読む」をCSSでボタン化する
 
style.css を編集するだけで、「続きを読む」をボタンにすることが出来る。
 
「続きを読む」を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;
}
/* 「続きを読む」リンクのボタン化 ここまで */
 
 
トップページでの「続きを読む」ボタン。
「続きを読む」をCSSでボタン化する
 
記事一覧での「続きを読む」ボタン。
「続きを読む」をCSSでボタン化する
 
参考:「続きを読む」ボタンのサイズ(高さ)について。
 
 

以上。
(2017.11.06)

 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください