このサイトのアーカイブページで「この記事を読む」のスタイルをフィルターフックと CSS でカスタマイズしました。

  • 背景色と左ボーダーがない、シンプルなスタイルにしました。（フォントサイズは大きめ）
  • 文言を「この記事を読む」から「続きを読む」に変更しました。
  • Font Awesome のアイコンに変更しました。

カスタマイズ前

カスタマイズ前

カスタマイズ後

カスタマイズ後

カスタマイズ手順

カスタマイズ手順は以下の通りです。

フィルターフック

function ujs_read_more_txt( $read_more_txt ) {
	$read_more_txt = '続きを読む';
	return $read_more_txt;
}
add_filter('read_more_txt', 'ujs_read_more_txt');

CSS

body .moreLink a {
    border-left: none;
    background-color: transparent;
    margin-top: 5px;
    font-size: 14px;
}
body .moreLink a:hover {
    background-color: transparent;
}
body .moreLink a:hover {
    color: #666;
}
body .moreLink a::after {
    font-family: "Font Awesome 7 Free";
    content: "\f105";
    font-weight: bold;
    padding-left: 8px;
    padding-right: 3px;
    transition: all .3s ease;
}
body .moreLink a:hover::after {
    color: #023859;
    padding-left: 10px;
    padding-right: 1px;
}
投稿タグ
,