THE THOR ザ・トール 【 ハンバーガー 】【 虫眼鏡 】色を変更(メニューアイコンとサーチアイコン)

THE THOR のプチカスタマイズ。【 ハンバーガー 】と【 虫眼鏡 】の色を変更しました。

 

 

前回のプチカスタム↓

THE THOR ブログカード/サイトカードの背景色を変更する

簡単プチカスタム

THR THOR の便利な機能のひとつ ショートコードで挿入ができる内部リンク用のサイトカードと外部リンク用のブログカードがあります。   とても便利な機能ですがサイトカード(ブログカード)は背景がうっすら透明に[…]

ブログカードのカスタマイズ背景色

 

メニューアイコンとサーチアイコンの色を変える( ハンバーガー & 虫眼鏡 )

 

対象物はこちらです↓

THOR ハンバーガー 虫眼鏡 色を変更

 

 

画像ではわかりづらいですが、この2つのアイコンは真っ黒です。(設定で選べるのは黒か白です)

 

ブラックという色は常用するには強すぎる色です。

どんな背景色を選んでもこやつらが浮いて見えてしまうので色を変更しました。

 

別冊Lightning Vol.160 ハンバーガー本[雑誌]

別冊Lightning Vol.160 ハンバーガー本[雑誌]

916円(09/23 01:59時点)
発売日: 2016/12/31
Amazonの情報を掲載しています

 

ハンバーガー 虫眼鏡 色の変更は追加css

 

※カスタマイズは自己責任でお願いします。

操作手順
外観 → カスタマイズ → 追加CSS

 

以下のコードを追加します。

/*ハンバーガーと虫眼鏡の色*/
.menuBtn {
    color: #666666;
}
.icon-search {
    color: #666666;
}

#666666の部分を変更すると色が変わります。

 

THE THORの設定によりclass名が違う可能性があります。その時は自サイトを調べてみてください。

class名を調べるにはブラウザの検証モードを使用します。
PCのブラウザで調べたいモノのあたりにカーソルを置き右クリック、検証を選択。
ブラウザのメニューより検証を選択。
などなどブラウザにより操作手順が異なりますのでPCブラウザで検証という項目を探してみてください。

 

意図しない部分のアイコンカラーが変わってしまう可能性もあるので注意!

ざっと見た感じは問題なさそうでした。

 

上記cssで変更できない場合【追記】

「ハンバーガーメニューの色が変わらない」という連絡を頂きました。

調べたところ以下のcssで変更ができましたので上記cssで変更できない場合は、こちらもお試しください。

 

トオル
ご連絡ありがとうございます。

※カスタマイズは自己責任でお願いします。

操作手順
外観 → カスタマイズ → 追加CSS

 

以下のコードを追加します。

.t-headerColor .menuBtn__link {
    color: #666666!important;
}

#666666の部分を変更すると色が変わります。

.t-headerColor.menuBtn__linkのあいだには半角スペースがあります。

 

以上です。

 

トオル
設定などによっては変更出来ない場合があるかもしれません。

 

変更した色を比較 & あとがき

THE THOR 色変更の比較

比較してみても僅かな違いですが印象は大きく変わると思います。

 

全体のカラーとも馴染んでとても良くなりました(個人的感想)またひとつ気になっていた部分が修正できたのでスッキリです。

 

気になりがピークに達したツイート↑

 

これで見た目が良くなってPVアップ・・・

とはならないので完全に自己満足なカスタマイズでした。

 

THE THOR 記事一覧

\当サイトのおすすめ/

>