グローバルメニューのカスタマイズ方法

投稿日:2020年2月25日 更新日:

このブログは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”を忘れないでね。

ありがとうございました。

マンガで一息どうぞ↓↓↓

-ワードプレスstinger+2

Copyright© ねこのこのこねたん , 2020 All Rights Reserved Powered by STINGER.