このブログは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”を忘れないでね。
ありがとうございました。
マンガで一息どうぞ↓↓↓
