この記事では「デフォルトのメニューの文字色の変更方法」と「メニューの文字色を自分の好きな文字色に変更する方法」を紹介します。
このブログのメニューの文字色、プルダウンの背景、文字サイズはデフォルトと違います。
この記事では、メニューのカスタマイズの方法を紹介します(^^♪
コードの使用は自己判断でお願いします。
この記事ではプラグインは使いません。
いつものごとく、コピペ作業です。
しかし、今回コピペする場所は、「テキスト」画面ではありません。
「外観」→「カスタマイズ」→「追加css」に コピペます。
- 1 【THE THOR】デフォルトのグローバルメニューバーの文字色種
- 2 【THE THOR】グローバルメニューの文字色を２色から選んで変更
- 3 【THE THOR】グローバルメニューをカスタマイズ
- 4 【THE THOR】グローバルメニューバー文字色カスタマイズ設定
- 5 【THE THOR】グローバルメニュー文字色カスタマイズ コピペ文説明
- 6 【THE THOR】グローバルメニューの自分好みの文字色に
- 7 【THE THOR】グローバルメニューバーに背景色を付ける
- 8 【THE THOR】グローバルメニューバーを画面いっぱいに広げる
- 9 THE THOR【ザ・トール】グローバルメニューの文字色をカスタマイズ♪まとめ
【THE THOR】デフォルトのグローバルメニューバーの文字色種
【THE THOR】ザ・トールでは、黒文字と白文字の２種類が用意されています。
【THE THOR】グローバルメニューの文字色を２色から選んで変更
【THE THOR】ザ・トールでメニューの文字色は 「黒文字（デフォルト）」「白文字」 の2色を選択できるようになっています。
【THE THOR】グローバルメニューをカスタマイズ
「外観」 → 「カスタマイズ」をクリックしてください。
【THE THOR】グローバルメニューをヘッダーエリアに表示する場合
「外観」→「カスタマイズ」→「共通エリア」→「ヘッダーエリア設定」と順にクリックしてください。
「ヘッダーエリア」設定が表示されます。
■ ヘッダーのテキストカラーを選択
この場所で、文字色を変更することが出来ます。
「黒文字」の横の「ｖ」をクリックして、 「白文字」「黒文字」を選択した後、 画面上部のオレンジボタン「公開」をクリックしてください。
【THE THOR】グローバルメニューバー文字色カスタマイズ設定
ここからはデフォルトの文字色を、好きな色にカスタマイズしていく紹介になります。
【THE THOR】グローバルメニューの文字色をカスタマイズ
「外観」 → 「カスタマイズ」をクリックしてください。
【THE THOR】グローバルメニュー文字色変更♪追加CSSにコードを張り付ける
下にスクロールさせて、「追加CSS」をクリックしてください。
この「追加CSS」の場所にコピペします♪
【THE THOR】グローバルメニュー文字色カスタマイズ コピペ文説明
4個の数字が並んでいる部分がメニューバーの文字色の指定してある場所になります。
上から順に、
| ・何もしてない時の文字色
・マウスが乗った時の線の色 ・マウスが乗った時の文字色 |
となっております。
この ” , ” で区切られた４個の数字で色を指定しています。
これは色の３原色の指定+透明度（ 0.1 ～ 0.9 ）の指定をしてあるのです。
下の文は私の設定になります。
文字色はグレーでよかったのですが、マウスが乗った時の色を黒から茶に変更しました。
この数値のいみですが、 （0,0,0）で黒になります。
この数値の後ろにあるのが、透明度になります。
黒に水を入れた時、黒からグレーになりますよね？
この透明度の割合は、3個の数字の色を水でどれだけ薄めますか？
という感じの割合の数値と考えてください。
↓↓↓ コピペ文 ↓↓↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*メニューの文字色変更*/ .globalNavi{ color:rgba(0,0,0,0.5); } /*リンクとホバーの文字色変更*/ .globalNavi__list .current_page_item > a, .globalNavi__list .current-menu-item > 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】グローバルメニューバーに背景色を付ける
私のメニューバーの色の設定になっています。
文字色のコードに、1文追加します。
「#fccdbb」をお好きな色に変更してください。
|
1 2 3 4 5 6 |
/*メニューバーの背景*/ .globalNavi{ background:#fccdbb; color:rgba(0,0,0,0.5); } |
【THE THOR】グローバルメニューバーを画面いっぱいに広げる
背景色を付けると、画面いっぱいにメニューバーが広がらないと見た目が好きではないのでカスタマイズしちゃいます。
|
1 2 3 4 5 |
.t-headerCenter .container-header { padding-left: 0; padding-right: 0; max-width: 100%; } |
THE THOR【ザ・トール】グローバルメニューの文字色をカスタマイズ♪まとめ
メニューバーの文字色、無事変更できましたでしょうか？
もし、文字色が変更できなかった場合は、コメントで教えていただけると嬉しいです(^^♪
ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
私が無料で登録している2つのアフェリエイトの会社です。
どちらもメリットがあるので、アフェリエイトに興味があるなら登録をお勧めします。
私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。
物販のアフェリエイトに興味がある方は、アソシエイトに応募と同時に（保険として）もしもからも申請することをお勧めします♪
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。
ここは取り扱っている商品が沢山あります！無料の初心者用のアフィリエイトブログ作成の無料セミナーがあるので、ここに登録してセミナーに参加することをオススメします！
アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/