どうも、マルコです^^

【賢威7】の初期設定では、グローバルメニューが等間隔に設置されるようになっていますが、これを、メニューの文字数に合わせて自動的に調整してくれるようにする方法を解説したいと思います。

 

【グローバルメニュー】ってどこかわかりますか?

下の画像の赤枠の部分です♪♪
↓↓↓

このグローバルメニューは、どの記事にも表示されるので、

ブログを訪問してくださった方に【これは是非見て欲しい!】というコンテンツへのリンクを設置しておくと良いですね。

そして、【お問合せフォーム】や【サイトマップ(目次)】等へのリンクを貼っておけば、読者さんも、どのページからでもお問合せができるし、サイトマップを確認して興味のある記事を探せるので便利です。

グローバルメニューの設置は、ブログ運営者にとっても、読者さんにとってもメリットがあるのです(#^.^#)

 

さて、このグローバルメニュー、【賢威7】では等間隔に設置されるように設定されているので、メニューが増えてくると、こんな感じになってしまう事があります。
↓↓↓

違いがわかりますでしょうか?

メニュータイトルの長いものが、自動的に改行されて2行になっているんですね。

もっと長いと3行、4行と改行されてしまい、やたらと【太い】メニューが出来上がってしまうのです。

ブログを作り始めたばかりでメニューが少ない時は気にならないのですが、メニューがある程度増えてくると、これがどうも気になる・・・”(-“”-)”

 

ということで、今回は、この【グローバルメニュー幅】の調整方法についての解説です♪♪

グローバルメニューの幅を文字数に合わせる方法

まずは調整前の状態。

1つ1つのメニューが等間隔になるように設定されているので、文字数の多いメニューは勝手に改行されてしまいます。

これを、このように変更していきます。

メニューの文字数にあわせて幅が変わるので、改行されずにスッキリしていますね♪

 

それでは、作業に入っていきましょう♪♪

WordPressのダッシュボードにログインしておきます。

①【外観】にマウスを合わせ

②【テーマの編集】をクリック。

 

画面が切り替わったら、下へスクロールして、

右側の【base.css】をクリックします。

 

【base.css】が開いたら、

下の画像の赤枠の部分を探します。

 

見つかったら、下の画像のように書き変えます。

こちらのコードをコピーして貼り付けてください♪♪

 

出来ましたでしょうか?書き変え後の状態です^^

 

コードの書き換えが出来たら、

画面を下へスクロールして、【ファイルを更新】をクリックします。

 

ここまで出来たら、サイトを表示させてみましょう。

表示がかわっていますでしょうか?

 

ここで、

・・・・あれっ?何も変わらない!!!???

という時は、【キャッシュの削除】を行ってみましょう。

Google Chromeの場合で説明しますね。

※無事に表示が変わっている場合は、この部分は飛ばして先へ進んでください。

カスタマイズが反映されない時はキャッシュの削除をしてみよう

画面右上の【Google Chromeの設定】ボタンをクリックします。

 

【設定】をクリック。

 

設定画面が開くので、一番下までスクロールして【詳細設定】をクリックします。

 

さらに下へスクロールして【閲覧履歴データを消去する】をクリックします。

 

下のような画面が表示されるので、

①上の3つにチェックを入れて

②【閲覧履歴データを消去する】をクリックします。

 

ブログの画面に戻って、左上の【このページを再読み込みします】というボタンをクリックします。

これで、カスタマイズが反映されるはずです♪♪♪

では、キャッシュの削除が出来たら次へ行きましょう(^O^)/

 

グローバルメニューの余白を調整する方法

さて、ここでもう一度、グローバルメニューの状態を確認します。

ちょっとメニュー全体が左に寄っていて、右側の余白が気になりますね・・・・

次はこれを調整していきたいと思います!

方法は・・・・

1つ1つのメニューの左右の【余白】を調整していきます!

 

では早速作業へ。

もう一度、【base.css】を開きます。手順は先程と同じですね。

 

次に、下の画像と同じ記述を探します。

【padding: 1.3em】という部分が余白の幅を表しています。

 

この数字の部分を、今回は【1.6em 】に、少し大きくしてみました。

※数字は画面を見ながら調整してくださいね。メニューが長すぎる場合は逆に小さくする事もあります。

 

さて、これでサイトを表示させてみると・・・・

左右の余白が同じくらいになって見栄えが良くなりました♪♪

めでたしめでたしです(#^.^#)

まとめ

いかがでしたでしょうか?

今回は、【賢威7】でグローバルメニューの幅を変更する方法でした^^

どうぞ、お試しくださいね。

最初は、CSSのコードを変更するのは勇気が要ると思います。

間違えた!って時に元に戻せるように、あらかじめ変更前のコードをメモ帳などに保存しておきましょう。

 

そして、CSSをカスタマイズしたときには、しばしば【カスタマイズが反映されないっ!?】と焦ることがあります。

そんな時は【キャッシュの削除】を試してみましょう♪♪

 

自分なりにカスタマイズをしていくと、ますます自分のブログに愛着が湧いて、記事を更新するのが楽しくなりますよ♪♪

ではでは、今回は、このへんで。