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

カスタマイズ

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

変更前

Read more before

変更後

Read more after

通常スタイルで抜粋表示している場合

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

Read more 01

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;
}
このままスマホで見ると表示が変なのでスマホ用のCSSを追記します。
/* スマホの続きを読む */
@media only screen and (max-device-width: 575px) {
.read-more-link, .read-more-link i {
    text-decoration: none;
	padding: 10px 30px;
	border-radius: 10px;
}
}

あとがき

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

0
この記事を書いた人
どらみ

パソコン歴はWindows98からの元パソコンインストラクターです。以前はMS Office系のソフトウェアを主に教えていました。 今はWordPressのテーマLuxeritasにはまっています♪ 質問されると、つい親身になってしまう自称「ポジネガ人間」です。

応援する にほんブログ村 ブログブログ ブログノウハウへ