スマホでcocoonブログを開いた時、グローバルメニュー(ナビ)を横にスクロール、スライドできる機能があると便利ですよね。あまり情報がなく難しかったですが、調べた結果簡単にできることが判明しました。やり方を紹介します。
グーロバルメニュー(ナビ)はこの部分！
この部分がグローバルメニューです。
これを右へスクロールすることが簡単にできちゃいます！
トーマのグローバルメニューはすっきりしてますが、たくさんカテゴリーがある人も多いですよね！そんな方は絶対使った方が良いですよ。
コードを貼り付けるだけで作れます
コードを貼り付けるって絶対難しいじゃん！
こんな風に難しく考える必要はありません。
このまま貼り付ければ本当にできます。もし、心配ならバックアップを取っておけば万が一があっても元通りです。
手順
- ワードプレスの編集画面を開く
- 外観
- テーマエディター
- スタイルシート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設定
- ヘッダー
- グローバルメニュー
トーマは背景の色、文字の大きさを少し変更したくらいです。
本気でオリジナルのデザインを変更したい！っていう方は本で勉強することをオススメします。
スクロールに変更するメリット
正直、pvアップなどは横スクロールになったぐらいでは関係ないんじゃないかな？と思います。
しかし、かっこよくなった自分のブログを見るとまた頑張ろうとモチベーション上がりますよ！
本当にモチベーションアップするよーー
- モチベーションアップ
- 自己満足度のアップ
- cssに詳しくなった気がする
やっぱりCOOLなスクロール
グローバルメニュー(ナビ)でスクロールできるのってカッコイイ！
こんなところに時間を使い必要もないのかもしれませんが、ブログを執筆するのに疲れた時や、モチベーションが下がってる時にかっこよくするとモチベーション上がりますよ！
1人でスクロールして満足してるトーマでした。