Xeory Base の「続きを読む」の色をカスタマイズする方法

Xeory Base の「続きを読む」の色をカスタマイズする方法

今回は、Xeory Base の「続きを読む」の色をカスタマイズする方法だ。とても簡単なので是非、チャレンジしてほしい。

まず、Xeory Base の「続きを読む」について解説していこう。

Xeory Base の「続きを読む」は、記事作成時に以下の画像の『続きを読むダグを挿入する』を追加したときのみに一覧表に表示されるものだ。

Xeory Base の「続きを読む」の色をカスタマイズする方法

このタグを追加したら、一覧表には以下のように表示されている。

Xeory Base の「続きを読む」の色をカスタマイズする方法2

このようにデフォルトでは青色のボーダーで、カーソルを合わせると枠内の背景が青色に変化、そして文字色も白に変わる。これが Xeory Base の基本的な設定だ。

しかし、このような色合いでは目立たない気がする。なので、もう少し目立つように「続きを読む」の背景を青色にしようと思う。

「続きを読む」の色を3ステップでカスタマイズ

まず、テーマ編集からスタイルシートに移行し、「.more-link」を探す。

テーマ編集 > スタイルシート (style.css) > .more-link

探しだしたら以下の3ステップでカスタマイズしていく。

  1. 『続きを読む』の背景タグを追加
  2. 文字を白色に変更
  3. ホバー色を設定

以上だ。以下、画像付きで解説していこう。

1,『続きを読む』の背景タグを追加

まず、以下の部分に背景タグ「 background: 」を追加する。今回は色をデフォルトと同じ「#2581c4」にしてみた。追加するタグは以下の通りだ。

background: #2581c4;

Xeory Base の「続きを読む」の色をカスタマイズする方法6

このままだと「続きを読む」という文字が見えないので文字色のカスタマイズを行う。

2,文字を白色に変更

次に文字色のカスタマイズだ。今回は背景が青色(#2581c4)なので文字の色は白にしたいと思う。カスタマイズする箇所は「.more-link」部分の「color: #2581c4; 」を「color: #fff;」に変更する

Xeory Base の「続きを読む」の色をカスタマイズする方法7

3,ホバー色を設定

次にホバー色の背景を変更する。ホバー色は何でもいいと思うが、個人的には同系の色が好みなので、ここでも青色系で設定していく。ホバー色の変更は以下の箇所で行う。

background: #3770ad;

Xeory Base の「続きを読む」の色をカスタマイズする方法8

以上のカスタマイズを行ったら「ファイルを更新」をクリックし、更新する。そうすると一覧表では青色に変更されている(好みによって背景色を変えても良い)。

Xeory Base の「続きを読む」の色をカスタマイズする方法10

因みに、このカスタマイズは僕のサイトでの話しだ。つまり、ワードプレスのテンプレートがXeory Baseであることが前提だし、色も僕自身が決めたもの。であるから、テンプレートが違っていればまた違うだろうし、色の場合も今回は青だったけど、もしも赤色とか緑色にしたい場合はそれに適応したタグを使用すべきだ。まぁ、色のタグを変更するだけなので簡単なのだが。

なお、Xeory Base をインストールしたい方はこちら「Xeory Baseのインストール方法」の記事を参考にしてほしい。

SPONSORED LINK

SNSでもご購読できます。