機能解説twitter0facebook0hatenabookmark00lineスポンサーリンクグローバルメニューはどうする?WordPressテーマを作る上で大きな悩みの一つが、グローバルメニュー(ヘッダー下にある横並びのメニュー)をスマホ時にどうするか?です。だいたいはハンバーガーメニューをタップするとメニューがにゅるっと出て来るというのが多いです。個人的にはこれってどうなん??と思ってしまいます。PCビューだとグローバルメニューは非常に見栄えがいいし、メニュー然として佇んでくれます。スマホにした途端、脇役も脇役です。ほとんど誰も気にしてません。グローバルメニューがこんな扱いでいいのか?と思い悩みます。今やほとんどのアクセスがスマホからというサイトも珍しくありません。PCで見てる人はあまり居ません。「どうだ格好いいだろ。」とグローバルメニューをヘッダー下に置いても誰もPCで見てないんです。これは由々しき問題です。グローバルメニューはサイドバーにそこで、マテリアル2では思い切って、普通のグローバルメニューを取っ払いました。グローバルメニューはサイドバーに格納しました。サイドバーを、よりメニュー感を出すために左サイドに持っていきました。WordPressを始めほとんどのwebアプリケーションは左側にメニューバーがあります。多くの国産ブログ用WordPressテーマは右サイドバーが主流なのでちょっと見慣れないかも知れませんが、グローバルメニューを組み込んだ以上、サイドバーは左サイドです。グローバルスタンダードです。サイドバーをどうする?もう一つテーマを作る上での悩みは、スマホ時のサイドバーをどうするか?です。普通はメインカラムの下に回り込ませています。サイドバーをメインカラムの下に回り込ませてしまうと、異常に縦長のサイトになってしまい、見にくくなります。長すぎてサイドバー部分なんてじっくり見てられません。それと、横幅の広いデバイスで見た場合に、サイドバー部分がやたら横長になって不細工になります。個人的にはやたら横に伸び切ったサイドバーが許せません。タブレットでなんて見れたもんじゃない。前作マテリアルでは、それを解決するためにデバイスの横幅が広い場合はサイドバーは2列に分かれるようにしていました。2列に別れるというのは見栄えは多少良いかも知れませんが、見やすさという意味ではいまいちです。情報が多すぎて見にくいです。そんなサイドバー問題を一挙に解決してくれるのが、「スマホでもサイドバーはサイドバー」デザインです。マテリアル2のサイドバーマテリアル2では、スマホやタブレットで見た時、サイドバーは画面左に格納されています。画面左下にハンバーガーメニューボタンがあります。このボタンをタップすれば、横からにゅるっとサイドバーが丸ごと出てきます。PCビュー時のサイドバーがそのまま丸っとです。「そのまま」というのが大事な所です。PCでもスマホでも同じ位置に同じ情報が載っているというのは重要です。このサイドバー、どんなデバイスであろうと横幅は一定なんです。横にびよーんと伸びることはない。↑タブレットで見たら、こういう状態になります。「スマホでもサイドバーはサイドバー」デザインです。ありそうでなかった画期的なブログテーマです(自画自賛)。PCビューではサイドバー追尾PCビューではデフォルトでサイドバーが追尾します。※アドセンス広告は追尾NGなので、デフォルトではアドセンスはサイドバーには表示されません。参考マテリアル2のアドセンス広告の配置についてサイドバーの一番下に、アフィリエイト広告を貼っておけば、コンテンツを読み終わった時に横にその広告がある状態なので、自然とクリックされるかも知れません。postsプラグインを置けば回遊率が上がるかも知れません。サイドバーにはWordPressのウィジェット機能を使って、いろんなウィジェットを置くことができます。参考ウィジェットについてお試しあれこれらの機能を全部入れ込むのは大変でした。あちらを立てればこちらが立たずです。ハンバーガーメニューボタンの大きさも、大きすぎたら邪魔になるし、小さすぎたら気づいてもらえないし、非常にバランスが難しいです。ちなみにタブレットだと少しボタンが大きくなり、iPhone5だとかなり小さくなります。閉じるボタンの位置もスマホとタブレットでは違います。妥協したところもないとは言えませんが、まあなんとか自分では納得行く形になったと思っています。使い勝手はいかがでしょうか?是非試してみて下さい。詰め込んだのでマシンパワーがしょぼいと相当スクリプティングに時間を食うという大問題がなきにしもあらず。記事の装飾とAddQuicktagプラグインについてスポンサーリンクスポンサーリンクこの記事をシェアするtwitter0facebook0hatenabookmark00lineコメントマテリアル2の開発ありがとうございます。ブログに導入しました。サイドバーの表示、たいへん気に入っています。サイドバーですが、PCでブラウザの横幅を狭める→広げるを繰り返していると、拡げたときにサイドバーが非表示となる現象が起きました。スマホでも縦横表示の切り替えでサイドバーの表示がされない現象が発生しました(1度だけ再現)。次回改版する機会があれば、修正をご検討いただけるとありがたいです。マテリアル作者のNobuoさんがこちらでおっしゃられているように、グローバルメニューはPCから見るとかっこよくて分かりやすい。マテリアル作者のNobuoさんがこちらでおっしゃられているように、グローバルメニューはPCから見るとかっこよくて分かりやすい。左側にあり、ここにグローバルメニューが配置されています。これを読んでもらえば納得いただけると思います。化することは出来ません。』と、表示され何処をいじればいいのか分かりません。Principle、マテリアルの作者です。このたび、マテリアル2をリリースしました。多くの方に使っていただけると嬉しいです。フッターウィジェットWordPressのウィジェット機能を使って、ここに自由にテキストを置くこともできます。自分らしくカスタマイズしてみて下さい。Principle、マテリアルの作者です。このたび、マテリアル2をリリースしました。多くの方に使っていただけると嬉しいです。navigationarrowuphome。