THE THOR のプチカスタマイズ。【 ハンバーガー 】と【 虫眼鏡 】の色を変更しました。
前回のプチカスタム↓
・THE THOR ブログカード/サイトカードの背景色を変更する
メニューアイコンとサーチアイコンの色を変える（ ハンバーガー ＆ 虫眼鏡 ）
対象物はこちらです↓
画像ではわかりづらいですが、この2つのアイコンは真っ黒です。（設定で選べるのは黒か白です）
ブラックという色は常用するには強すぎる色です。
どんな背景色を選んでもこやつらが浮いて見えてしまうので色を変更しました。
[wpap service=”with” type=”detail” id=”B01N6RS29V” title=”別冊Lightning Vol.160 ハンバーガー本［雑誌］” search=”ハンバーガー本”]
ハンバーガー 虫眼鏡 色の変更は追加css
※カスタマイズは自己責任でお願いします。
外観 → カスタマイズ → 追加CSS
以下のコードを追加します。
/*ハンバーガーと虫眼鏡の色*/
.menuBtn {
color: #666666;
}
.icon-search {
color: #666666;
}
#666666の部分を変更すると色が変わります。
THE THORの設定によりclass名が違う可能性があります。その時は自サイトを調べてみてください。
PCのブラウザで調べたいモノのあたりにカーソルを置き右クリック、検証を選択。
ブラウザのメニューより検証を選択。
などなどブラウザにより操作手順が異なりますのでPCブラウザで検証という項目を探してみてください。
意図しない部分のアイコンカラーが変わってしまう可能性もあるので注意！
ざっと見た感じは問題なさそうでした。
上記cssで変更できない場合【追記】
「ハンバーガーメニューの色が変わらない」という連絡を頂きました。
調べたところ以下のcssで変更ができましたので上記cssで変更できない場合は、こちらもお試しください。
※カスタマイズは自己責任でお願いします。
外観 → カスタマイズ → 追加CSS
以下のコードを追加します。
.t-headerColor .menuBtn__link {
color: #666666!important;
}
#666666の部分を変更すると色が変わります。
.t-headerColorと.menuBtn__linkのあいだには半角スペースがあります。
以上です。
変更した色を比較 & あとがき
比較してみても僅かな違いですが印象は大きく変わると思います。
全体のカラーとも馴染んでとても良くなりました（個人的感想）またひとつ気になっていた部分が修正できたのでスッキリです。
虫眼鏡と三の色が黒すぎるので変更したい。
何言ってるかわかるかな～？#アタマオカシイノカモ#thor #テーマ— からあげ棒 (@karaagebow1214) February 13, 2019
気になりがピークに達したツイート↑
これで見た目が良くなってPVアップ・・・
とはならないので完全に自己満足なカスタマイズでした。
コメント