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

tacsan

6年前

WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
「続きを読む」を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;
}
/* 「続きを読む」リンクのボタン化　ここまで */

トップページでの「続きを読む」ボタン。

記事一覧での「続きを読む」ボタン。

参考：「続きを読む」ボタンのサイズ（高さ）について。

twenty seventeen 「続きを読む」ボタンのサイズ（高さ）が合せられない

WordPress Twenty Seventeen ①．「続きを読む」ボタンのカスタマイズ：css【 entry-content 】の変更 ②．検索結果一覧を表示するテンプレートについて ③．

2018-01-02

2023-10-07

以上。
(2017.11.06)