SWELL「投稿リスト」の文字色を変更する方法について解説します。
以下では定番の白文字以外にも任意の色に変更方法についても併せてご紹介!黒背景など濃いカラーの背景使用の際におすすめのカスタマイズです。
Contents
カスタマイズ使用例とプレビュー
変更前と変更後を比べてみよう!
Post
変更前
濃いカラー背景+黒文字だと読みづらい…
投稿リストの文字色を
変更する方法
カスタマイズ手順
投稿編集画面にて追加CSSクラスに入力 追加CSSにCSSを入力
追加CSS
/*---text color white---*/
.white-color {
color: #FDFDFD;/*任意のカラーに変更できます*/
}
上記CSSコードを「追加CSS」に追記してください。
「追加CSS」の場所がわからない場合は以下をご覧ください。
【追加CSS】の場所を見る
CSSコードの貼り付け場所
![](https://css-eblog.com/wp-content/uploads/2024/06/2024-06-02_14h56_05.png)
![](https://css-eblog.com/wp-content/uploads/2024/06/2024-06-02_14h56_05.png)
ダッシュボード 外観 カスタマイズ 追加CSS の手順で「追加CSS」を開き、CSSコードを追加してください。
追加 CSS クラスに入力
![](https://css-eblog.com/wp-content/uploads/2024/06/2024-06-23_14h36_49.png)
![](https://css-eblog.com/wp-content/uploads/2024/06/2024-06-23_14h36_49.png)
投稿編集画面にて、呼び出したSWELLブロック「投稿リスト」を選択した状態で追加 CSS クラス(設定(右横)|ブロック) 高度な設定 追加CSSクラスに「white-color」と入力
![](https://css-eblog.com/wp-content/uploads/2024/06/2024-06-23_10h06_05.png)
![](https://css-eblog.com/wp-content/uploads/2024/06/2024-06-23_10h06_05.png)
![](https://css-eblog.com/wp-content/uploads/2024/06/名称未設定-2-復元-1.png)
![](https://css-eblog.com/wp-content/uploads/2024/06/名称未設定-2-復元-1.png)
入力後プレビュー画面にて文字の色が変更されているか確認してください。
※投稿編集画面上では反映されません
【コピー用に使用してください】
white-color
追加CSSクラスに既に文字が入力されている場合の注意点
すでに追加CSSに何かしら入力されている場合はその後ろに「半角スペース+white-color」と入力し、半角スペースで複数クラスを区切る必要があります。
Comment