今回は、Xeory Base の「続きを読む」の色をカスタマイズする方法を紹介します。とても簡単なので是非、チャレンジしてみてください。
Xeory Baseの「続きを読む（more-link タグ）」とは何か
まず、Xeory Base の「続きを読む」について解説していきます。
Xeory Base の「続きを読む」とは、記事作成時に以下の画像の『続きを読むダグ（more-link）を挿入する』を追加したときのみに一覧表に表示されるものです。
このタグを追加したら、一覧表には以下のように表示されます。
上の画像の赤枠のように、デフォルトでは青色のボーダーで、カーソルを合わせると枠内の背景が青色に変化し、文字色も白に変わります。これが Xeory Base の「続きを読む」の基本的なデザインです。
個人的には、このような色合いは目立たない気がしています。なので、もう少し目立つように「続きを読む」の部分のカスタマイズをしようと思います。
「続きを読む」の色を3ステップでカスタマイズ
まず、テーマ編集からスタイルシートに移行し、「.more-link」を探します。
テーマ編集 ＞ スタイルシート (style.css) ＞ .more-link
探しだしたら以下の3ステップでカスタマイズしていきます。
- 『続きを読む』の背景タグを追加
- 文字を白色に変更
- ホバー色を設定
以上です。以下、画像付きで解説していきます。
1,『続きを読む』の背景タグを追加
まず、以下の部分に背景タグ「 background: 」を追加します。今回は色をデフォルトと同じ「#2581c4」にしてみました。追加するタグは以下の通りです。
background: #2581c4;
このままだと「続きを読む」という文字が見えないので文字色のカスタマイズを行います。
2,文字を白色に変更
先ほどのカスタマイズで背景が青色（#2581c4）になったので、文字の色を白にしたいと思います。カスタマイズする箇所は「.more-link」部分の「color: #2581c4; 」を「color: #fff;」に変更していきます。
3,ホバー色を設定
次にホバー色の背景を変更します。ホバーとはカーソルを合わせたときにデザインや色が変わることをいいます。Xeory Base のホバー色は、デフォルトで青です。
このホバー色のカスタマイズは何でもいいと思いますが、個人的には同系（今回は青）の色が好みなので、ここでも青色系で設定していきます。ホバー色の変更は以下の箇所で行いましょう。
background: #3770ad;
以上のカスタマイズを行ったら「ファイルを更新」をクリックし、更新します。
そうすると一覧表やTOPページでは「続きを読む」が青色に変更されています（好みによって背景色を変えても良い）。
以上で、この記事は終了です。
因みに今回の記事は、テンプレート「Xeory Base」にちなんだものというのをお忘れなく。なお、Xeory Base のインストールがまだの方はこちら「Xeory Baseのインストール方法」の記事からどうぞ。