スマホでブログを開いた時、グローバルメニュー(ナビ)を横にスクロール？スライド？できるってかっこいいと思いませんか？けっこう調べたんですが、あまり情報がなかったのでめっちゃ調べた結果出来ちゃったのでやり方を紹介します。
グーロバルメニュー(ナビ)はこの部分！
この部分がグローバルメニューです。
これを右へスクロールすることが簡単にできちゃいます！
トーマのグローバルメニューはすっきりしてますが、たくさんカテゴリーがある人も多いですよね！そんな方は絶対使った方が良いですよ。
コードを貼り付けるだけで作れます
コードを貼り付けるって絶対難しいじゃん！
こんな風に難しく考える必要はありません。
このまま貼り付ければ本当にできます。もし、心配ならバックアップを取っておけば万が一があっても元通りです。
手順
- ワードプレスの編集画面を開く
- 外観
- テーマエディター
- スタイルシートstyle.cssにコードを貼り付ける
本当にこれだけ！ style.cssに貼り付けるコードは下の通りに！
cocoonでスクロールメニューにしたいなら、思考停止でこのまま貼り付けよう！
トーマは、どうせ詳しく調べても忘れちゃうだろうしとワードにメモだけ書いてました。
「スクロールメニューのコード」をコピーして style.cssに貼り付けよう！
スクロールメニューのコード
/* モバイルトップメニュー */
@media screen and (max-width: 480px){
ul.menu-mobile{
overflow-x: auto;
overflow-y: hidden;
display: flex !important;
flex-wrap: nowrap;
font-size: 14px;
justify-content: flex-start;
padding: 0 1em;
-webkit-overflow-scrolling: touch;
position: relative;
}
ul.menu-mobile > li{
padding-right: 1em;
white-space: nowrap;
}
ul.menu-mobile .item-label{
white-space: nowrap;
font-size: 14px;
}
}
色や大きさの変更はCocoonの設定
- cocoon設定
- ヘッダー
- グローバルメニュー
便利なことにcocoonにはグローバルメニューの色や大きさを、cocoonの設定から変更できるので、細かい設定はそこからやりましょう。
トーマは背景の色、文字の大きさを少し変更したくらいです。
ガチでデザインの勉強したい人はこちら↓
スクロールに変更するメリット
正直、あまりpvアップなどは横スクロールになったぐらいでは関係ないんじゃないかな？と思います。
しかし、かっこよくなった自分のブログを見るとまた頑張ろうとモチベーション上がりますよ！
本当にモチベーションアップするよーー
- モチベーションアップ
- 自己満足度のアップ
- cssに詳しくなった気がする
やっぱりCOOLなスクロール
グローバルメニュー(ナビ)でスクロールできるのってカッコイイ！
こんなところに時間を使い必要もないのかもしれませんが、ブログを執筆するのに疲れた時や、モチベーションが下がってる時にかっこよくするとモチベーション上がりますよ！
1人でスクロールして満足してるトーマでした。
