コピペOK【ザ・トール】メニューバーの文字色をカスタマイズ♪ 

【THE THOR】ザ・トールのメニューバーの文字色のカスタマイズ方法を紹介します♪

【THE THOR】ザ・トールでは、黒文字と白文字の2種類が用意されています。

この文字色の変更の方法と、好きな色にカスタイズする方法も紹介します(^^♪

この記事ではプラグインは使いません。 いつものごとく、コピペ作業です。

しかし、今回コピペする場所は、「テキスト」画面ではありません。

「追加css」に コピペして変更します。

記事ページのみの変更なら、「テキスト」画面でHTMLを追加して~等するのですが メニューとなると、記事ページではなく、 サイト全体のメニューの文字色を変更になりますので HTMLでちょこっと変更とはいかないんです( ̄▽ ̄;)

そら
コピペなので、難しくありません。
初心者さんでもコピペ出来ればOK♪

【THE THOR】メニューの文字色を2色から選んで設定カスタマイズ

 【THE THOR】ザ・トールでメニューの文字色は 「黒文字(デフォルト)」「白文字」  の2色を選択できるようになっています。

【THE THOR】メニューをカスタマイズ

外観 → カスタマイズをクリックしてください。

【THE THOR】ヘッダーエリア表示

ヘッダーエリア設定 をクリックしてください。

「ヘッダーエリア」設定が表示されます。

■ ヘッダーのテキストカラーを選択 

この場所で、文字色を変更することが出来ます。

「黒文字」の横の「v」をクリックして、 「白文字」「黒文字」を選択した後、 画面上部のオレンジボタン「公開」をクリックしてください。

【THE THOR】メニューの自分好みの文字色にカスタマイズ

【THE THOR】ザ・トールでは文字色が2種類用意されています。

「黒文字」を選択時の 通常表示色・マウスがのった時の表示色が 「白文字」を選択時の 通常表示色・マウスがのった時の表示色が用意されています。 この設定を自分好みにカスタマイズしちゃいます♪

【THE THOR】メニューの文字色をカスタマイズ

「外観」 → 「カスタマイズ」をクリックしてください。

【THE THOR】メニューの文字色変更♪追加CSSを表示

下にスクロールさせて、「追加CSS」をクリックしてください。

この「追加CSS」の場所にコピペします♪

【THE THOR】メニューの自分好みの文字色にカスタマイズ コピペ文説明

元々の設定を上書きさせるので、色以外の設定も書いてあります。

黄色のラインを引いてある箇所が3行あります。

この部分がメニューバーの文字色の指定してある場所になります。

上から順に、

・何もしてない時の文字色

・マウスが乗った時の線の色

・マウスが乗った時の文字色

となっております。

この ” , ” で区切られた4個の数字で色を指定しています。

これは色の3原色の指定+透明度( 0.1 ~ 0.9 )の指定をしてあるのです。

下の文は私の設定になります。

文字色はグレーでよかったのですが、マウスが乗った時の色を黒から茶に変更しました。

この数値のいみですが、 (0,0,0)で黒になります。

この数値の後ろにあるのが、透明度になります。

黒に水を入れた時、黒からグレーになりますよね?

この透明度の割合は、3個の数字の色を水でどれだけ薄めますか?

という感じの割合の数値と考えてください。

↓↓↓ コピペ文 ↓↓↓

/*メニューの文字色*/

.globalNavi__list li a{ margin-right:20px; display:block; float:left; white-space: nowrap; color:rgba(0,0,0,0.5);  font-weight:bold; transition: .15s; }

/*現在地・マウスオーバー時の変化*/

.globalNavi__list .current_page_item > a, .globalNavi__list .current-menu-item > a, .globalNavi__list .current-menu-parent > a, .globalNavi__list .page_item a:hover, .globalNavi__list .menu-item a:hover { border-bottom:2px solid rgba(153,51,51,0.9); color:rgba(153,51,51,0.9); }

【THE THOR】メニューの自分好みの文字色選択

上のコピペ文を「追加CSS」にコピペしてきてください。

次に、黄色のラインの数字を下の記事の中の カラーコード表の「RGB]欄の数字をコピペしてきてください。

そのままだと、数字が3個です。

最後に、3個の数字の後ろに、好みの透明度の数値を付け足してください。

>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

最後の数字を小さくするほど、色は薄くなります。

【THE THOR】メニューバーの文字色をカスタマイズ♪まとめ

メニューバーの文字色、無事変更できましたでしょうか?

もし、文字色が変更できなかった場合は、コメントで教えていただけると嬉しいです(^^♪

 

/Decoration/TOOL/TOP/THE THOR/AFEREIT/

最新情報をチェックしよう!