JetThemeのアイコンの色は、初期状態だと背景色と似ていて見えにくいことがあります。
特に戻るボタンは分かりにくいかなと感じます。
|
|
これを任意の色に変更する方法を解説します！
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
アイコンカラー変更CSS
アイコンの色を変更するCSSは以下の通りです。
/*ライトモードアイコン色CSS*/
.jt-btn-light{
background: #F46013;
color: #ffffff;
}
.jt-btn-light:hover {
background: #F67938;
color: #ffffff;
}
/*ダークモードアイコン色CSS*/
.jt-btn-dark{
background: #F67938;
color: #ffffff;
}
.jt-btn-ldark:hover {
background: #F46013;
color: #ffffff;
}
上記はJetThemeのオレンジ色を指定していますが、お好きな色に変更してください。
backgroundは背景色、colorは文字色です。
hoverはオンマウス（カーソルを合わせた）時に色を変化させる場合に指定してください。不要な場合は削除して構いません。
上記を反映させると、アイコンの色は以下のように変更されます。
|
|
このコードはアイコン類一括の色変更コードです。
ハッシュタグやフッターのフォローアイコンなども同じ色に変更されるので、ブログのメインカラーを指定するのが良いと思います。
記事内のシェアボタンは別で色指定してあるので変更されないのでご安心ください。
アイコンカラーをメインカラーに変更しよう！
初期状態でも見えないことはありませんが、せっかくならブログに合わせた色に変更してみましょう！
