こんにちわ。

元SEOコンサルタントであり、現在web集客のコンサル企業で働きながら副業でアフィリエイターをしている秋田 健です。

 

アフィ子アフィ子

賢威でどうやったらグローバルメニューをカスタマイズできるの?

アフィ男アフィ男

訪問してくれたユーザーが見る部分だから意識して作成したいよね!

秋田 健秋田 健

その通りですね!「サイトの案内板」とも言えますからね!では賢威で設定する方法を解説していきましょう!

 

※あきけん(@akitaken0530

 

グローバルメニューとは?

グローバルメニューとは、簡単に言うと、各ページに共通して表示されている案内メニューのことです。

サイトの主要なコンテンツへとリンクが繋がれている場合がほとんどで、訪問したユーザーに「見やすく・わかりやすく」「どんなサイトなのか」を把握することができるものがグローバルメニューになります。

 

ホームページのTOP画像下などにナビゲーションなどが表示されていると思いますが、それがグローバルメニューです。

企業サイトの場合は会社情報や事業内容、サービス、沿革などがグローバルメニューに該当します。

 

「あなた」のサイトをレストランに例えると、グローバルメニューはメニュー票になります。

その中でも主食や副菜、デザートやドリンクなどにわかれて見やすく表示されているのが理想的なグローバルメニューの役割になります。

 

例えば、当サイトの場合では・・・

賢威でグローバルメニューをカスタマイズ(文字・色・幅など)する設定

 

アフィ男アフィ男

確かに訪問してくれたユーザーにとって、どんなことが書いてあるのか一目瞭然になるね!

秋田 健秋田 健

さらに、見たい記事をすぐに探せる役割もあって、ユーザーを迷わせない、言わばユーザビリティ向上にも繋がるんです1

 

それでは賢威8のグローバルメニューのカスタマイズ方法について以下で詳しくご紹介していきます。

 

文字色のカスタマイズ設定

賢威8の文字色のカスタマイズ設定について紹介します。

まずグローバルメニューをカスタマイズするには、「追加CSSにコードを記載またはコピペ」する必要があります。

 

WordPressにログインして、「外観→カスタマイズ→追加CSS」に進んでください。

賢威でグローバルメニューをカスタマイズ(文字・色・幅など)する設定

賢威でグローバルメニューをカスタマイズ(文字・色・幅など)する設定

 

追加CSSに進みましたら、以下のコードをコピペして追加CSSに貼り付けてください。

 

賢威でグローバルメニューをカスタマイズ(文字・色・幅など)する設定

/* グローバルメニューの文字のカスタマイズ */

.keni-gnav_inner li a {

/* 文字色を変更する */

color: #e00000;

}

上記コードの「color:」部分の「#e00000;」と記載されている箇所が色を決めるコードになります。

 

以下がカラーコードのほんの一例になりますので、いろいろカスタマイズしてみてください。

 

カラーコード参考例#008000:緑

#ff0000:赤

#0000ff:青

「HTML カラーコード」と検索すると、たくさんの色のコードを調べることができますので、活用してみてくださいね!!

 

また色を変える場合は「color: #e00000;」このコードの「color: #→e00000←;」

矢印の内側を変更したいカラーコードに変えてくださいね!

 

「color: #008000;」

 

こんな感じです!

CSSが苦手でも、コピペするだけなのでとても簡単に変更することが可能です!

 

文字幅のカスタマイズ設定

次はグローバルメニューの文字幅を変更するカスタマイズ方法になります。

こちらで紹介する文字幅のカスタマイズ設定は、「一箇所のグローバルメニューの文字幅だけを変更したい」という設定には考慮されていませんのでご注意ください。

 

「グローバルメニューすべての文字幅を変更するカスタマイズ方法」になりますので、変更したい方は以下を御覧ください。

 

文字色のカスタマイズ方法と同じように「外観→カスタマイズ→追加CSS」に進んでください。

追加CSS欄に以下のコードをコピペしてください。

.keni-gnav_inner li {

letter-spacing:2.7em;

text-align:center;

text-indent:1em;

}

}

「letter-spacing:2.7em;」の2.7という数字の部分を変更することで文字幅を変更することができます。

1にすることで文字幅は狭くなり、数字を増やしていくごとに文字幅は広くなっていきます。

調整しながら自分の好みの文字幅にカスタマイズしていってくださいね!

 

背景色のカスタマイズ設定

「外観→カスタマイズ→色→カラーパターン→カラー2」を変更することで、ホバーエフェクト時の色のみ変更することができます。

 

ホバーエフェクトとはマウスポイントがグローバルメニューに乗った際の色

このカスタマイズ設定だと簡単な色の変更はできますが、背景色の変更や細かな設定の変更がすることができないデメリットがあります。

 

CSSなど慣れ親しんでいない初心者の方がサクッとカスタマイズしたい場合には、すごく簡単でわかりやすいので良いのですが、凝ったデザインにしたい場合には、あまりデザインを変えることができません。

 

その場合には以下でさらに細かいカスタマイズ設定を紹介していきます。

初心者の方でも簡単に変更できますのでもっと自分の色をサイトに出したい方は必見です。

 

グローバルメニューの背景色を全てカスタマイズしたい方の設定方法は以下のコードになります。

※カラーコードは適当に当てはめていますのでお好きな色に変更してご利用ください。

 

「外観→カスタマイズ→追加CSS」に進んでください。

以下コードをコピペしてカラーコードを変更してください。

※#から始まり;で終わる部分(例:#008080;)がカラーコードになります。

 

.keni-gnav_wrap {

/*グローバル_メニューの背景色*/

background-color: #008080;

}

 

.keni-gnav_inner li a {

/*グローバル_ボタンの背景色*/

background:#ff0000;

/*グローバル_ボタン下の色*/

border-bottom-color: #ffffff;

}

 

.keni-gnav_inner li a:hover {

/*グローバル_ホバー時のボタン背景色*/

background:#4169e1;

/*グローバル_ホバー時のボタン下色*/

border-bottom-color: #ffff00;

}

 

1つ1つ部分的に解説していきます。

まず始めに以下のコードから解説していきます。

 

.keni-gnav_wrap {

/*グローバル_メニューの背景色*/

background-color: #008080;

 

上記コードはグローバルメニューの背景色を指定するコードになります。

グローバルメニューのボタン部分ではなく背景色に当たる部分ですので、ボタンを画面一杯に表示している場合はこの背景色は表示されません。

画面一杯に表示していない場合はグローバルメニュー右側の背景色がこの部分に該当します。

 

次のコードについて解説していきます。

 

.keni-gnav_inner li a {

/*グローバルボタンの背景色*/

background:#ff0000;

/*グローバル_ボタン下の色*/

border-bottom-color: #ffffff;

}

 

こちらのグローバルボタンの背景色というのは、読んで字のごとくグローバルメニューの背景色になります。

グローバルボタン下の色についてもグローバルメニューのボタンの下の色をしているしているコードになりますので、変更したい場合はカラーコードを変更してください。

 

次のコードの解説に移ります。

 

.keni-gnav_inner li a:hover {

/*グローバル_ホバー時のボタン背景色*/

background:#4169e1;

/*グローバル_ホバー時のボタン下色*/

border-bottom-color: #ffff00;

}

 

こちらはホバーエフェクト時の背景色の指定をしているコードになります。

ホバーエフェクト時とはマウスがグローバルメニューに乗っている状態のことになります。

マウスがグローバルメニューに乗った状態の時にどの背景色にするかのしている箇所になります。

 

背景色をゴチャゴチャ変えてしまうと落ち着きのないサイトになってしまいます。

そのため、背景色で悩んでいる方は、最後で紹介したホバーエフェクト時の背景色はボタン下のみだけ背景色を変えるコードにするとまとまりがあるサイトに見えるのでおすすめです!

 

.keni-gnav_inner li a:hover {

/*グローバル_ホバー時のボタン下色*/

border-bottom-color: #ffff00;

}

 

上記コードを使えばホバーエフェクト時にボタンの背景色を変えずに、ボタン下のみだけ背景色が変わるグローバルメニューの仕様になります。

 

また色で悩んでいる場合は検索窓に「配色 カラー」と検索していただくと参考になるカラーバリエーションが表示されますので、参考にしていただくとまとまりのあるサイトに仕上げることができます。

 

幅のカスタマイズ設定

賢威8のグローバルメニューの文字幅をカスタマイズするには上記と同じように、

「外観→カスタマイズ→追加CSS」に以下のコードをコピペしてください。

 

@media (min-width: 768px) {

.keni-gnav_inner li {

width: 200px;

text-align: center;

}

}

 

上記コードを追加することでグローバルメニューの幅を変更することができます。

上記コードの200pxと記載されている数字を変更することで幅が変更されます。

 

・数字を大きくすると幅は広がります。

・数字を小さくすることで幅は狭まります。

 

数字を変更すると右画面に変更された幅のグローバルメニューがありますので、右画面を見ながら調整することをおすすめします。

グローバルメニューの数や文字数によっても異なりますので微調整する必要がありますので自身で調整してみてくださいね!

 

☆アフィリエイトで稼ぐ「0Start」とは☆

 

まず「0Start」とは・・・

定して継続的に稼ぐ為の放置システムを最短最速で構築するためのアフィリエイト教材」になります。

 

<こんな不安を解決>

 

 

<如何にして放置で稼ぐか>

時間がない中で、最短最速で「稼ぐ仕組み=放置システム」を作り上げること。

 

※0Startで公開しています。

 

私は普段サラリーマンをしています。

つまり、日中はほぼ放置した状態で「月収100万円」を安定して継続的に稼いでいます。

 

<どんな方でも簡単実践可能!>

 

そんなことは一切関係ありません

 

ありがたいことに、数多くの方からご質問を頂く中で多かった質問が・・・

 

「どうやって月収100万を稼いだんですか?」

 

これに親身にご回答したいのは山々ですが、とんでもない文量になってしまいます。

そこで、「本当に知りたい」「本気で稼ぎたい」という方だけにお伝えしたいと考え、アフィリエイトのバイブル「0Start~放置システム最短サイト構築~」の販売に踏み切りました。

 

後悔はさせないほどの圧倒的なノウハウと特典の数々。

そして、手にして頂いたならば、実践し、極論真似してください

現時点で私が持ちうる全てのノウハウを「0Start」に注いでいます。

 

これからのアフィリエイトライフの一助に「0Start~放置システム最短サイト構築~」がなれば幸いです。

 

≪不労所得で月収100万円以上稼ぐ教科書「0 Start」≫

☑月収100万円以上を目指すための放置システムを構築

☑誰でも「稼ぐ仕組み」を徹底的に最短で作りあげられる

☑当サイト管理人の秋田健が長い歳月を掛け、本気で作成

☑24時間365日フル稼働で働くもう一人の自分を構築

☑放置で稼ぎ続ける「不変型」ノウハウを赤裸々に大公開

本気で稼ぎたい方だけ手に取ってみて下さい☆

【公式】0Start~放置システム最短サイト構築~

 

でわ!秋田 健でした!

 

≪使うべきNo1テーマついに決定!≫

☑デザイン性・自由カスタマイズ・簡単設定

☑会話・ボックス・ランキングで脅威のCTR

☑初心者~上級者まで圧倒的な利用者を誇る

☑秋田健が太鼓判を押す間違いないテーマ

☑2つの限定特典を付け初心者安心サポート

限定特典付き「AFFINGER5(WING)」購入はこちら

限定特典付きAFFINGER PACK3(WING対応)購入へ

 

 

≪無料メルマガ「アフィマガ」好評配信中≫

☑「月収100万円への道」をメルマガで無料配信!

☑SEO・ライティング・Googleアップデート情報!

☑アフィリで稼ぐ為の必要な情報を限定配信

☑サイト未完成の方・サイト完成後それぞれで配信!

☆「あなた」の状況に応じて選んでくださいね☆

メルマガ登録

無料メルマガ「アフィマガ」について

サイト未完成向けメルマガ登録ページ

サイト完成済み向けメルマガ登録ページ

 

 

<合わせて読まれている記事>