Luxeritasで「記事を読む」をcenterにする

4月 22, 2020css,Luxeritas

Luxeritasとは

LuxeritasとはWordPressのテーマの一つで、日本で一番人気があるテーマの一つです。
当ブログもLuxeritasを利用しています。

Luxeritasで「記事を読む」をcenter(中央寄せ)にするやり方

管理画面の右メニューから、Luxeritas　⇒　テーマエディタ　⇒　style.css　を選択します。

以下の一行をstyle.cssに記述します。

#list .read-more {text-align: center;}

ファイルを更新」を押下した後、「記事を読む」のリンクが中央寄せされていることを確認して下さい。

「記事を読む」を枠で囲んだデザインに変更する

以下のようにstyle.cssに記述します。

.read-more-link, .read-more-link i {
   text-decoration: none;
   border: solid 1px;
   padding: 2px 80px;
   border-radius: 10px;
	font-size: x-large;
	color:#333;
}
/* すべてのリンクの装飾を同じになるようにします   */
a:hover, a.read-more-link:hover, a.entry-link:hover{
	text-decoration:none;
	color: orange;
}

以下のような見た目になります。カーソルを乗せると文字がオレンジ色になります。
携帯やタブレットでも同様の表示になることも確認して下さい。

cssコードの解説

border: solid 1px;　を指定すると、1pxの細さで文字に枠が表示されます。
:hover　はリンクにカーソルが乗ったときの動作を指定します。
border-radius: 10px;　を指定すると、枠の角が丸くなります。