テーマLuxeritas(ルクセリタス)でＰＣの「続きを読む」をカスタマイズしてみる

「続きを読む」をカスタマイズする

通常表示

変更前


変更後

カード型表示（最大２列）

変更前


変更後

タイル型（最大２列）

記事のタイトルが長いと「記事を読む」という文字列がタイトルに重なって表示されてしまうため、非表示にすることをおすすめします。（※次項参照）

「記事を読む」の文字列を変更する

開く「Luxeritas」「カスタマイズ(外観)」「グリッドレイアウト」

子テーマのCSSに追記する

CSS子テーマのスタイルシートに追記します。
[highlight_css]/* PCの続きを読む */
.read-more-link, .read-more-link i {
text-decoration: none;
border: solid 1px;
padding: 2px 80px;
border-radius: 10px;
font-size:12px;
color:#333;
}
.read-more > a:hover{
text-decoration:none;
}[/highlight_css]

このままスマホで見ると表示が変なのでスマホ用のCSSを追記します。

[highlight_css]/* スマホの続きを読む */
@media only screen and (max-device-width: 575px) {
.read-more-link, .read-more-link i {
padding: 10px 30px;
}
}[/highlight_css]

あとがき

私の環境でしかチェックしていませんので、コピペされる場合は、ご自身の責任でお願いします。
またCSSについては、自己流ですのでご了承ください。