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

2021-08-15

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

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

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

この記事でわかること

基本カラーの設定方法

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

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

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

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

カンタン！

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

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

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

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

/* 見出し */
.post_content h2 {
 color:#333;
}
/* キャプションタイトル */
.cap_box_ttl {
 color:#333;
}
/* 記事内のカテゴリ */
.c-categoryList__link {
 color:#333;
}

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

読みやすくなりました！

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

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

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

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

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

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

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

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