Pocket

今回は、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

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

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

以上で、この記事は終了です。

因みに今回の記事は、テンプレート「Xeory Base」にちなんだものというのをお忘れなく。なお、Xeory Base をインストールしたい方はこちら「Xeory Baseのインストール方法」の記事を参考にしてください。

Pocket

SPONSORED LINK