前回はメニューの形だけとりあえず作りました。今回もメニューのことについて考えてみようと思います。
（前回：『まずはメニューから ～Blogger テンプレートを作るよ！ (18)～』）
メニューをモバイル表示の時だけ非表示にする
コンテンツを右側に詰めて左側にメニューを追加する方法では、モバイル表示の時はとんでもなく邪魔なことが判明しました！
脇役が主役より目立ってどうするんですかとツッコミを入れたくなりますが、作ったのは自分です。ごめんなさい。
これを踏まえ、メニューはモバイル表示の時は非表示にしたいのですが、これにはいくつかの方法があります。
 |
| モバイル表示のプレビュー。コンテンツ領域が狭すぎる |
脇役が主役より目立ってどうするんですかとツッコミを入れたくなりますが、作ったのは自分です。ごめんなさい。
これを踏まえ、メニューはモバイル表示の時は非表示にしたいのですが、これにはいくつかの方法があります。
css だけで対応する
モバイル表示の時、body には .mobile クラスが付与されます。ですので、 .mobile クラスが先祖にいる場合は設定を上書きしてメニューを非表示にしてしまおう！という方法です。デフォルトのテンプレートでも、基本は PC 版で書いておいてモバイル表示の時だけ .mobile とかを使用して設定を上書きする方法をとっていますので、デフォルト準拠の方法だと思います。
.content {
padding-left: 240px;
}
.navigation-outer {
position: absolute;
width: 240px;
margin-left: -240px;
height: 100%;
background: #f4f4f4;
padding: 24px 0 24px 0;
}
.navigation-title {
font-size: 48px;
text-align: center;
color: #404040;
}
.mobile .content {
padding-left: 0;
}
.mobile .navigation-outer {
display:none;
}css だけで対応するが、上書きはしたくない
ちなみに、上書きしなくて済むように 「モバイル表示の時以外」 と書く方法もあります。body:not(.mobile) .content {
padding-left: 240px;
}
.navigation-outer {
position: absolute;
width: 240px;
margin-left: -240px;
height: 100%;
background: #f4f4f4;
padding: 24px 0 24px 0;
}
.navigation-title {
font-size: 48px;
text-align: center;
color: #404040;
}
.mobile .navigation-outer {
display:none;
}PC表示用に pc クラスを追加し、 css で対応する
上記の方法の別解ですが、モバイル表示の時以外は <body> に pc というクラスを設定するという方法も考えてみました。<body> の定義を以下のように変更します。ここでは、 blog.isMobile が真のときは今まで通り 「mobile」 が追加され、偽のときは 「pc」 が追加されます。
<body expr:class='"loading" + (data:blog.isMobile ? data:blog.mobileClass : " pc")'>.pc .content {
padding-left: 240px;
}
.navigation-outer {
position: absolute;
width: 240px;
margin-left: -240px;
height: 100%;
background: #f4f4f4;
padding: 24px 0 24px 0;
}
.navigation-title {
font-size: 48px;
text-align: center;
color: #404040;
}
.mobile .navigation-outer {
display:none;
}<b:if> を併用して不要なデータを残さない
モバイル表示の時は絶対にメニューを使用しないのであれば、HTMLの中に Navigation が残っているのは無駄ですよね。そんな無駄を削減するためには <b:if> を使用します。<b:if cond='data:blog.isMobile'>
<b:else/>
<div class='navigation-outer'>
<div class='navigation-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left navigation-fauxborder-left'>
<div class='fauxborder-right navigation-fauxborder-right'/>
<div class='navigation-inner'>
<div class='navigation-title'>メニュー</div>
<b:section class='navigation' id='navigation'>
～省略～
</b:section>
</div>
</div>
<div class='navigation-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</b:if>.mobile .navigation-outer {
display:none;
}これらの方法を使えば、モバイル表示のみ左側のメニューが無くすことができます。
 |
| 画面を圧迫していたメニューが見えなくなった。 |
これで、メニューがあるせいで使い勝手が悪くなるという本末転倒な事態は避けることができました。めでたしめでたし。
おまけ。他にもあるけど今回は詳しく書かないこと
レスポンシブ風に書く
ブラウザの幅に応じてメニューが表示されたりされなかったり、というデザインも稀に見かけます。確かにこれはこれで理に適っていて便利ですが、今回の目的はあくまで 「モバイル表示の時」 ですので、PC表示の時はどれだけ幅が狭くとも表示させるつもりです。ちなみに、この方法を実現するためには、「メディアクエリ」 という css の機能を使用するか、その代わりに Javascript を使うことになると思います。気になる方は検索してみてください。
レスポンシブデザインのことは、まず今考えているデザインが完成してから考えてみたいと思います。
ボタンを使ってメニューを表示したり隠したりする
先程 <body> が mobile クラスかでメニューの有無を切り替える方法を紹介しましたが、たとえばそれとは別に menu-open とか menu-closed とかのクラスを新たに作り、それの付け替えによってメニューの表示非表示を切り替えるという方法もあります。
この方法の良いところは、例えばモバイルであれば menu-closed を初期状態にして、ボタンを押したら javascript で <body> のクラスを menu-open に変えるという方法をとることができることです！
また、 pc と mobile の方法と組み合わせることで、同じ menu-open であってもモバイルとPCでメニューのデザインを変える、ということもできます。
このような複雑な処理をする場合、直接 javascript でスタイルを指定するよりも、javascript では body のクラスを付け替えるだけにして細かいデザインは css で書いた方が、デザインとスクリプトの役割の違いを明確にできて良いと思います。
以上です！
この方法の良いところは、例えばモバイルであれば menu-closed を初期状態にして、ボタンを押したら javascript で <body> のクラスを menu-open に変えるという方法をとることができることです！
また、 pc と mobile の方法と組み合わせることで、同じ menu-open であってもモバイルとPCでメニューのデザインを変える、ということもできます。
このような複雑な処理をする場合、直接 javascript でスタイルを指定するよりも、javascript では body のクラスを付け替えるだけにして細かいデザインは css で書いた方が、デザインとスクリプトの役割の違いを明確にできて良いと思います。
以上です！
仕様モバイル
返信削除Try this too :
xiaomi
Nokia
Samsung
Apple
Oppo
Realme