MENU

    【SWELL】見出しの文字色をカスタマイズする

     

    SWELL標準では、見出しやカテゴリが白文字です。淡い背景色だと読みづらいため、CSSで文字色をカスタマイズしてみました。

     SWELLを使い始めたら、まずはサイトのメインカラーを変更しましょう。メインカラーは、見出しやカテゴリの背景色になり、サイトの雰囲気が大きく変わります。

     この記事では、淡いメインカラーを使いたいときに、オススメのカスタマイズ設定をご案内します。

    この記事でわかること
    • 基本カラーの設定方法
    • 見出しの文字色の変え方
    • キャプションつきブロックの文字色の変え方
    • カテゴリの文字色の変え方
    目次

    基本カラーの設定方法

     サイトの基本カラーは以下の手順で設定します。

    1. 「外観」→「カスタマイズ」をクリック
    2. 「サイト全体設定」をクリック
    3. 「基本カラー」をクリック
    4. 「メインカラー」を設定する

    ヘッダーや見出しの背景色は、ここで設定した「メインカラー」が反映されます。

     

    Classynodeのメインカラーは「#eae3da」です。
    淡い色なので、この背景色に白文字は読みづらいです。

    猫の挿絵

    標準機能でカスタマイズできる項目

     あらかじめ用意されているカスタマイズ項目で、文字色を変更できる箇所があります。

    ヘッダーバー・カテゴリーの文字色を変更する

    1. 「外観」→「カスタマイズ」をクリック
    2. 「ヘッダー」→「ヘッダーバー設定」→「ヘッダーバー文字色」を設定する
    3. 「記事一覧リスト」→「カテゴリの表示設定」→「カテゴリーの文字色」を設定する
    4. 「公開」をクリック
    ヘッダーバー・カテゴリーの文字色を変更する
    変更後
     

    カンタン!

    追加CSSでカスタマイズできる項目

     標準機能ではカスタマイズできない場所があります。

     これらは、追加CSSに追記して、カスタマイズすることができます。

     今回変更する箇所は、「カテゴリ」「キャプションつきブロックのタイトル」「見出し」の文字色です。

    追加CSSでカスタマイズできる項目
    変更前
     

    白文字が読みづらい。。。

    見出し・キャプションのタイトル・カテゴリの文字色を設定する

    1. 「外観」→「カスタマイズ」をクリック
    2. 「追加CSS」をクリック
    3. 下記のCSSをコピー&ペーストする
    4. 「公開」をクリック
    /* 見出し */
    .post_content h2 {
     color:#333;
    }
    /* キャプションタイトル */
    .cap_box_ttl {
     color:#333;
    }
    /* 記事内のカテゴリ */
    .c-categoryList__link {
     color:#333;
    }

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

    SWELLの見出しカスタマイズ結果
    変更後
     

    読みやすくなりました!

    キャプションタイトルとカテゴリの文字色は、#877661にしています。

    追加CSSで変更した箇所は、記事の編集画面では反映されません。

    あらかじめご了承ください。

    虫眼鏡アイコンとページ送り番号

     「アーカイブの虫眼鏡アイコン」と「新着記事一覧のページ送り番号」のカスタマイズ方法は、リンク先の記事をご覧ください。

    まとめ

     SWELLの使い方やカスタマイズ方法を勉強中です。
     「わかりやすい記事を作成」するために、役立つ情報を共有していきます。

     最後まで読んでいただき、ありがとうございました。

     みなさまの暮らしがより良くなりますように。

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

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