このブログは8割の方が、スマホでご覧になっています。
スマホ表示では、サイドメニューが表示されないので、
ワードプレス、テーマはstinger+2で、
目次
グローバルメニューをつくろうと思います!
スマホだとハンバーガーメニューになります。右上にある横三本線のアレです。

「外観」→
「メニュー」→
「メニュー項目を追加」の「カテゴリー」(デフォルトはカテゴリーだけです)で「すべて表示」にして「すべて選択」でずべてにチェックを入れて「メニューに追加」→
「メニュー構造」で子カテゴリーは、ドラッグして右にちょびっとずらして→

「ヘッダー用メニュー」にチェックをいれて→
「メニューを保存」
はい!これでできあがり( ´ ▽ ` )!っと思ったら、左に寄ってるし…。

横幅いっぱいの均等割にしたいなー
あ…、その前に、HOMEボタンがない…。
HOMEボタン、作りましょう!
また
「外観」→
「メニュー」→
「メニュー名」のところは、今作ったグローバルメニューに追加したいので、それを選んで→
「メニュー項目を追加」の「カスタムリンク」で…
ちょっと待ったー!カスタムリンクなんてない!と思ったでしょう?私も思いました٩( ᐛ )و

右上に「表示オプション」とありますのでプルダウンひらいて、「カスタムリンク」にチェックいれましょー。

「メニュー項目を追加」の「カスタムリンク」の「URL」にブログのURLを入れて、「リンク文字列」に表示させたい文字を入れて→
「メニューに追加」→
HOMEなので一番上にドラッグでずらして
「メニューを保存」
よっしゃーーーーーーーー(≧▽≦)できたーーーーーーー!
均等割しましょう。
よし!最後、均等割だ!がんばるぞ!
cssいじるから、バックアップとっておきます。
私はBackWPupで。
「外観」→
「カスタマイズ」→
「追加css」で
/メニューバー調整/
header .smanone ul.menu{
display: flex;
text-align: center;
}
header .smanone ul.menu li{ width:200px;
}
デフォルトのwidthは1060pxなので、そこから、グローバルメニュー5項目を割って、1項目212pxなんですけど、パソコンで縮めてみた時、

上の図みたいに、5項目目が、下にまわっちゃてるから、200pxにして、下にまわらないよう調節しました。
はあーー、できたね。お疲れ様でした( ´ ▽ ` )
んー、ちょっと、なんか味気ないから、
バックグランドカラーを付けてみましょう。
/グローバルメニューの固定化・装飾–/
st-menubox {
background: #dd6286;
}
#dd6286という色は、タイトルの「ねこのこのこねたん」のピンクと同じ色にしたよ
私はフォトショでかいてるんだけど

フォトショで好きな色を選んで、カラーピッカーの数字をコピペしました。
いぇーーーーー!!できたーーー!
って、できたんだけど…
マウスホバーした時

ピンクに赤って…見にくすぎでしょーーー( ̄ー ̄ )
マウスホバーした時のテキストの色を変えましょう
「外観」→
「カスタマイズ」→
「追加css」に
st-menubox :hover{
color: #ffffff;
font-size: 16px;
}
を入力しましょう。
マウスホバー時のテキストの色を白(#ffffff)、フォントサイズをちょっと大きくしてみました。
テキストの色を変えて見ましょう

上のように、テキストの色を変えたいときは、
/グローバルメニューの固定化・装飾–/
st-menubox a {
color: #dd6286;
}
st-menubox のあとの、”a”を忘れないでね。
ありがとうございました。
マンガで一息どうぞ↓↓↓