MENU

【SWELL】虫眼鏡アイコンとページ送り番号の文字色を変更する

【SWELL】虫眼鏡アイコンとページ送り番号の文字色を変更する

 SWELLで基本カラーに淡い色を使うと、標準の文字色が白く、読みづらくなってしまう場所があります。この記事では、淡い基本カラーを使う際に、カスタマイズすべき設定をご案内します。

 

淡い背景色に白文字が読みづらくなってしまいます。
どうしたらよいのでしょう?

 

追加CSSでカスタマイズすればOKです!

この記事でわかること
  • 虫眼鏡アイコンの色を変える方法
  • ページ送り番号の文字色を変える方法
目次

基本カラーや、見出しの文字色の設定方法

 まず、基本カラーや見出しの文字色の設定方法は、別の記事でご案内しています。

 リンク先をご覧ください。

追加CSSでカスタマイズ

 アーカイブの虫眼鏡アイコン・ページ送りの文字色は、追加CSSを使って変更できます。

変更前

追加CSSでカスタマイズ(変更前)
虫眼鏡アイコン(変更前)
追加CSSでカスタマイズ(変更前)
ページ送り(変更前)
 

少し読みづらい。。。

変更手順

  1. 「外観」→「カスタマイズ」をクリック
  2. 「追加CSS」をクリック
  3. 下記のCSSをコピー&ペーストする
  4. 「公開」をクリック
/* 虫眼鏡 */
.c-searchForm__submit::before {
    color:#333;
}

/* ページ送り */
.page-numbers,.page-numbers.current, .page-numbers:hover {
    color: #333;
}

「#333」の部分は、好きな文字色を16進数で入力してください。

変更後

追加CSSでカスタマイズ(変更後)
虫眼鏡アイコン(変更後)
追加CSSでカスタマイズ(変更後)
ページ送り(変更後)
 

できた!
前よりも読みやすくなりました。

まとめ

 細かな部分ですが、今までよりも読みやすくなりました。

 読みやすく、居心地の良いサイトを目指して、一部カスタマイズをしてみました。

 最後まで読んでいただき、ありがとうございます。
 みなさまの暮らしがより良くなりますように。

アイキャッチに使用したSWELLアイコンは、開発元の許可をいただき、ダウンロードしたテーマから引用させていただきました。

お役に立てたら幸いです
目次
閉じる