【SWELLカスタマイズ】ステップブロックのステップ番号の文字色を変更する方法

ネットで上手く答えが見つからなかったので、備忘録として記事を作成しました。

同じ課題を抱えた誰かの役に立つと嬉しいデス。

目次

ステップブロックのステップ番号の文字色変更方法

Swellの設定ではステップブロックの文字色を変更することは出来ません。

変更したければ、追加でCSSのコードを導入する必要があります。(やり方さえ分かれば簡単です)

ステップは以下の通り。

STEP
CSSコードを入手

Swellのステップブロックのステップ番号の文字色を変更する為のCSSコードを入手する。(当サイトにあります)

STEP
コードをSwellに適用して完了

入手したコードを、Swellに入力して保存すればOK。超簡単です。

※ちなみにこのサイトの上記のステップボックスの文字色も、このCSSコードを使用して変更しています。

【SWELL】ステップブロックのステップ番号の文字色を変更するCSSコード

以下のCSSコードを使用して、ステップブロックのステップ番号の文字色を変更する。

.swell-block-step__number {
  color: #FF0000 !important;
}

念の為に簡単に以下で解説しておきます。

文字色の変更は文字色のコードを書き換える

「#FF0000」は文字色を定義するカラーコードです。ちなみに、このカラーコードが示す色は赤。

からーコードを任意のコードに書き換えれば、希望の色を実現出来ます。

例えば、文字色を青(#0000cd)にしたければ、以下のようにコードを修正してください。

.swell-block-step__number {
  color: #0000cd !important;
}

カラーコードを提供しているサイトは沢山ありますので、使いやすいサイトを使ってカラーコードを調べてください。

>>>WEB色見本 現職大辞典-HTMLカラーコード

CSSコードの設置先

その記事のみの範囲としてカスタマイズを適用したいのであれば、記事エディタ下段の「CSS用コード」欄に貼り付けておけば良し。

これが↑

こう↓

ちなみに、「#000000」は黒色のカラーコード。

ブログ全体としてステップボックスの文字色カスタマイズを適用したいのであれば、「外観→カスタマイズ」でSwellのカスタマイズメニューを開き、最下段にある「追加CSS」を開く。

追加CSSの入力欄が開いたら、CSSを貼り付ける。その際に、何をカスタマイズしているCSSなのかをコメントとして差し込んでおくと後で見たときに便利。

コメントを残す場合は、コメントアウトを示すコードを正しく入力しよう。

コメントアウトの行い方についてはMENTERを見た方が分かりやすいのでリンクしておきます。

>>>HTML実践学習15 CSSコメントアウト

ご武運を!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次