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アイコンは、開発元の許可をいただき、ダウンロードしたテーマから引用させていただきました。

    お役に立てたら幸いです
    • URLをコピーしました!
    • URLをコピーしました!
    目次