WordPressナビゲーションメニューのカスタマイズ

WordPressナビゲーションメニューのカスタマイズWordPressブログ

今回はWordPressのナビゲーションのメニュー部分をカスタマイズとしていきます。具体的にはメニュー部分の色や高さ、文字の大きさと色、それから背景色などを変更していきます。

また、リクエストの多かった、「ナビゲーションメニューを均等に配置する方法」や「サブメニューのカスタマイズ」も紹介していきます。基本的なナビゲーションメニューの設定などは別記事です。

WordPressのナビゲーションメニューの使い方と設定

メニュー部分というのは最初このようになっていると思います。

メニュー部分-1

私の場合はこのナビメニューの高さを低くして背景色と文字色を変更しています。

メニュー部分-2

ナビゲーションメニューのカスタマイズ

私の利用しているTwentyTwelveで説明していきます。子テーマで作成したスタイルシート (style.css)を使います。私の変更箇所のコードはこのようになっています。

/* ナビメニュー */
.main-navigation li a {
color: #fff; /* 文字色(白) */
font-weight:bold; /* 太字にして */
line-height: 25px; /* 高さ */
font-size: 15px;} /* 文字の大きさ */

.main-navigation ul {
margin: 0; /* 余白をなくす */
background: #1F5E73; /* 背景色 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

この各項目の好きな部分を変更して使ってみて下さい。文字の左に余白が欲しい場合(右にずらしたい場合)には「padding-left: ●●px;」を追加して下さい。

それからリンクのカスタマイズでも解説しましたが、カーソルが乗った時の色と訪問済みの色を指定する事ができますので、これも設定しておくといいでしょう。

.main-navigation li a:visited {color: #fff;}
.main-navigation li a:hover{color: #7a8285;}

「a:visited」が訪問済みの色で「a:hover」がカーソルを載せた時の色です。それぞれ設定しておきましょう。

ナビゲーションのメニューを均等に並べる方法

ナビゲーションのメニューは通常は「左揃え」のような状態になっているので、右側に余白ができてしまう場合があります。こんな感じです。

均等-1

なので、メニューに設置した項目を均等に並べるようにしていきます。テーマTwenty Twelveでのサンプルですが子テーマのスタイルシートに次のコードを追加して下さい。

@media screen and (min-width: 960px) {
.main-navigation ul.nav-menu {
 display: table !important;
 table-layout: fixed;
 text-align: center;
 width: 100%;}

 .main-navigation li {
 display: table-cell;
 vertical-align: middle;}
}

ulには「display:table」、liには「display:table-cell」を指定する事で均等にする事ができますので試して見て下さい。

サブメニューをカスタマイズする場合

このWordPressのメニューナビにサブアイテム(サブメニュー)を設置している方もいるかと思います。WordPressの管理画面から「外観」⇒「メニュー」と進んでメニューを右にずらしてみるとサブメニューになります。

サブメニュー-2

これで保存して確認するとサブメニューこんな感じに縦に開きます。

サブメニュー-1

このサブメニューのカスタマイズも一緒にやってしまいましょう。スタイルシートに次のコードを追加するだけ。

/* ナビゲーションサブメニュ- */
ul.sub-menu li a{
color:#fff !important;  /* サブメニュー文字色 */
background-color:#1F5E73 !important;  /* サブメニューの背景色 */
font-size:12px !important;  /* 文字の大きさ */
font-weight:bold !important;  /* 文字を太字に */
}
 
ul.sub-menu li {
margin-right:0px !important; /* サブメニューの右の余白を0に */
}

後はカラーや文字の大きさを自分好みに変更して利用して下さい。

以上WordPressナビゲーションメニューのカスタマイズでした。

コメント

  1. りた より:

    しげぞう様

    ご返信、誠にありがとうございます。
    「商品タイトル(リンク)」と「posted with カエレバ」の間隔です。誤解をお招きするような記述で大変申し訳ございません。

    何卒、宜しくお願い致します。

  2. しげぞう より:

    りた様

    報告ありがとうございます。一応確認なんですが、カエレバの画像の右に「商品タイトル(リンク)」「posted with カエレバ」「商品の詳細」「ボタン」の順に並んでいると思います。これの一番上の「商品タイトル」と「posted with カエレバ」の部分でしょうか?それともその下の「商品の詳細」との余白でしょうか?

  3. りた より:

    しげぞう様

    ご回答、誠にありがとうございます。また、ご紹介の件、承知しました笑
    また、良記事と言って下さったこと、本当に励みになります。モチベーションがさらに上昇しました。これからも、頑張ります!!

    質問した件ですが
    しげぞう様からご教授して頂いたコードを挿入しましたところ、ボタン同士の余白は解決致しました!!スマホでも確認しましたが、形も崩れておりませんでした。
    誠にありがとうございます。

    商品タイトルと【posted with かえれば】における改行分の余白ですが、反映されませんでした。個人的に少し気になってしまい、質問させて頂きました。
    もし他に考えられる要因があれば、教えて頂きたいです。

    何卒、宜しくお願い致します。

  4. しげぞう より:

    りた様

    返信ありがとうございます。記事の内容はお世辞抜きに良いと思いますし、きっと他の方の参考にもなると思います。このブログの紹介は特に意識しなくても大丈夫です(笑)。りた様のような良記事ばかりのサイトからリンク張られるのはちょっとプレッシャー(笑)。なので特に気にしなくてもOKですよ!

    さて、カエレバの件ですが、先にボタン同士の余白です。

    .shoplinkamazon {
        margin-right: 10px;
    }

    この数値は変更しても構いませんが、数値を大きくし過ぎると横に並ばないかも知れませんので注意です。また、一応スマートフォンなどでも確認してみて、このコードを追加してレイアウトが崩れるようであれば条件分岐も必要かも知れません。その時は再度コメント下さい。

    それからカエレバの商品タイトル部分は今りた様のブログで確認しましたが、特に問題ない気がします。もしかすると文字大きさだけをちょっと変更したら解決するかもしれません。

    一応現在の文字の大きさは15pxになってますので、数値を14にしてみました。必要であれば13とかでも試して見てください。

    .kaerebalink-name {
        font-size: 14px;
    }

    もしこの部分ではないという場合にも再度コメントお願いします。

  5. りた より:

    しげぞう様

    りたです。お褒めのお言葉ありがとうございます。非常に嬉しい限りです。
    短時間といっても、しげぞう様のコードを丸パクリしただけですし、エラー修正もしげぞう様に質問してばっかで私自身がブログ設定関連で自ら学んだことはほんのごく一部です(恥)
    しげぞう様のブログには一千光年たっても届かないです笑

    しげぞう様のブログに巡り会えたからこそ、ここまで進めることができました。私は他ブログでも同様に参照や質問することがありますが、ここまで手厚いサポートをして頂けるブログはありませんでした。これからも勉強させて頂きます笑

    アマゾンアソシエイトの記事に触れて頂き、誠にありがとうございます!もう1度自身で確認したら、重要なポイントを記述し忘れていたことに気付きました笑 重ねてお礼申し上げます。

    200記事だとまだ先は長いですが、コツコツ積み重ねていきます。書きたい記事は山ほどあるのですが、私の場合書く時間やタイトル設定時間が非常にかかるので、非常にもどかしいです泣 そのため、少なくとも3ヶ月は辛抱します。これからも、頑張ります!!

    ここでまさかの質問なんですが、宜しいですか?泣 締りが悪くてすみません。
    最近【かえれば】を使用して、しげぞう様の記事にありましたカスタマイズを使用しています。
    すると、商品タイトルと【posted with かえれば】に改行分の余白が生まれるのですが、どのようなコードを挿入すれば宜しいでしょうか?
    また、アマゾンボタンと楽天ボタン同士の余白を増やすには、どのコードを変更すれば宜しいでしょうか?

    本当にいつも質問ばかりしてすみません。しげぞう様にお世話になりすぎて、私のブログにある程度のアクセス数が集まったら、必ずしげぞう様のブログを紹介しよう!!!という夢が生まれました(本当です、信じて下さい!)それまで、気長にお待ちして下さい。

  6. しげぞう より:

    りた様

    無事に反映されたようで良かったです。また、りた様のブログも拝見しましたが、記事が秀逸で驚きました。きっととても賢い方なんだろうと思います。短時間でこれだけの内容ができていくというは正直凄いと思います。

    特にAmazonアソシエイトの記事などは私も勉強になりましたし、内容も凄く分かりやすいです。強力なライバル出現(笑)。私も過去記事を修正しなくては!と思いました。

    ちょっと余談なんですが、りた様のブログは新規のドメインだと思いますが、できれば記事数200記事程度頑張って見ることをおすすめします。現在私も新規ブログを新規ドメインで作成して100記事入れましたが、まだ開設して2ヶ月ちょっとのため、まだ訪問者があまりいませんし、狙っているキーワードでも2ページ目とか3ページ目という状況です。

    クロールの状況などをみてもやはり新規ドメインでは100記事では時間がかかる感じがしますので、200記事まで増やそうかと検討中です。あくまで私の場合なのですが、そのような状況なので一応情報を追記してみました。

  7. りた より:

    しげぞう様

    無事所望していたところに設置できました!!!
    本当にいつもありがとうございます。お陰様で、大体のブログのセッティングが完成致しました。
    たった3週間でここまでできたのは、しげぞう様のお陰です。そして、アドバイスも頂けたこと、重ねてお礼申し上げます

    これからもブログを拝見し、勉強させて頂きます。
    今後とも宜しくお願い致します。

  8. しげぞう より:

    りた様

    報告ありがとうございます。やり方は2通りです。「SNSボタンの下に余白を作る」もしくは「関連記事の上に余白を作る」これはどちらでもできると思いますので、スタイルシートにどちらかを追加して見てください。

    .share {
        margin-bottom: 30px;
    }
    
    .yarpp-related {
        margin-top: 30px;
    }
  9. りた より:

    しげぞう様

    無事にアドセンスの直後にSNSボタンを設置出来ました!
    SNSボタンとグーグルアドセンスの幅は.share {margin-top : 10px;}で変更できたのすが
    直後にある関連記事【こちらの記事もオススメです】との余白が全くないので現在変更しようとしているのですが、中々できません泣

    こちらのコードも教えて頂けないでしょうか?
    何度もお願いしてしまい恐縮ですが、何卒、宜しくお願い致します。

  10. しげぞう より:

    りた様

    解決できて良かったです。アドセンスの下にSNSボタンという事ですが、アドセンスのコードを貼り付けたファイルを探して、そのコードの直前にSNSボタンを呼び出すコードを移動させればOKです。アドセンスがおそらく「single.php」とか「page.php」とか「content-page.php」にあると思いますので、その辺探すとアドセンスのコードは見つかるかと思います。

タイトルとURLをコピーしました