モバイル用ミドルメニューとアコーディオンメニューの設定

投稿日:2018年3月1日

今回のブログカスタマイズは、前々回の「ヘッダー画像の完成」の記事の終わりにチラッと書いた、サイトのモバイル版表示を考えていきます。
 

私が使っているWordPressテーマ『AFFINGER4』「レスポンシブウェブデザイン」とかいうのに対応しているため、スマホやタブレットからサイトを閲覧すると、自動でその端末のモニターサイズに合わせたデザインになってくれるという優れものです。
まー今の時代としては当たり前となりましたね。

私もその機能に甘んじまして、PC用としてのデザインをまず優先して考え、他の端末から見たモバイル表示に関しては今まで特に考えてきませんでした。
PC版の表示デザインすらまだ完成していませんでしたから。
 

しかし、この『ガンプラ気分』を仮運営し始めてから2月26日を以って1年が経過したというところでどうにかこうにかヘッダー画像・ロゴ画像と制作できたので、そろそろモバイル表示にも手を付けていく頃合いかなと。

 

まずはこれからのカスタマイズ作業の目的を明確にするために、現在のガンプラ気分のモバイル表示を確認しておきましょう。

こちらは前回の「ロゴ画像の完成」記事以前の状態↓

モバイル用ヘッダー完成時

モバイル用のヘッダー画像が完成した当時のものですね。
 

そしてこちらが前回完成させたロゴ画像を反映させた状態↓

ロゴ画像完成時

ロゴ画像完成時(横向き)
横向き

せこせこと手書きで自作した我が家のロゴ画像、スマホからは初めて見ましたが、適度に縮小されてて思ったよりもいい感じな気がします。
…PC表示だとけっこう粗が目立つんでね(-∀-`;)

ついでにフッターエリアのロゴ画像も。

フッターエリアロゴ画像

 

モバイル用ロゴ画像の設定

さて、現状も確認したところで今回のカスタマイズ内容なんですが、以前にも書いたように、ロゴ画像の上、アコーディオンメニュー(三本線マーク)の左のエリアが空白となっていてもったいないので、このエリアを活用していこうと思います。
 

このアコーディオンメニュー横のエリアへは、去年の6月のAFFINGERアップデートにより「モバイル用タイトル」を使用することで、ここにサイトタイトルを表示させることができるようになりました。

とりあえずやってみましょうかね。

「モバイル用タイトル」使用

おぉ…! ロゴ画像を表示していた[ヘッダーエリア]が無くなり、アコーディオンメニュー横にサイトタイトルが表示されました。
今はテキストですが、ちゃんとホームへのリンクも付いています。
 

それでは今度はここのサイトタイトルをテキストから先ほどの自作ロゴ画像に置き換えてみましょう。

モバイル用ロゴ画像

小っっさ!!
えぇ~…なんか思ってたのと違う…(´-ω-`)

いちおう横向きでも。

モバイル用ロゴ画像(横向き)

やっぱ小さいなぁ…
 

これは困りました。
予定ではこの作業で今回のカスタマイズはほぼ完了だったはずが…

公式サイトを見てみると、このモバイル用ロゴ画像の推奨サイズは 250~300×40px とのことだったので、そのようにリサイズしてみましたが、変化無し。
まあPC用の大きめのロゴ画像を使って横幅いっぱいに表示されてる感じだったので、これはロゴ画像の大きさの問題ではなく縦横比の関係な気がします。
 

とっ散らかった公式マニュアルを手繰っていくと、こうなることを想定していたかのようにモバイル用ロゴ画像を大きく表示するCSSが記載されていましたが、久しくコードとか触れていなかったもので、何だか面倒くさくなってしまったのでここは後回しにして他の作業を先に片付けることにします。

 

スマホ・タブレット用ミドルメニューの設定

モバイル用ロゴ画像は上手くいかなかったので一旦置いといて、先に「スマホ・タブレット用ミドルメニュー」を作成していこうと思います。
 

このミドルメニュー機能は去年の3月のAFFINGERアップデートにて追加された機能ですね。
もう1年前になるのかー。
 

設定自体は[メニュー]画面から「スマートフォン用ミドルメニュー」として作成すればいいだけ。

ちょっと面倒なのが、[AFFINGER4管理]画面から「スマートフォン用ミドルメニューを表示する」にチェックを入れないといけない点ですね。
 

そうして完成したのがこちら。

スマートフォン用ミドルメニュー

最初に思ったのが「ダッセェ」ですねw

PC用ヘッダーメニューと同じカラーが反映されてるようですが、グラデーションは反映されない様子。
一応上記のものは多少手を加えた後なんですが、私にはこれが限界。
 

モバイル用ロゴ画像と併用してみたものがこちら↓

スマートフォン用ミドルメニュー+モバイル用ロゴ画像

まーしばらく使ってりゃー見慣れてくるもんですかね?

 

悩んだのは設定するメニューの数と種類ですね。

配置的に数は偶数で決まりなんでしょうが、2個か4個か6個か。

まず6個はナシかなと。
6個だと3段になるので、スマホからだと多分中段が押しにくくなると思うんですよね。

そうなると2個か4個ってことになるんですが、私が元々PC用に表示させていたヘッダーメニューは6個。
なのでこの中から2個か4個を厳選しなくちゃいけないわけなんですが…

ちょっと優柔不断の私にはこの「厳選」という作業は苦手とするところ(;´ェ`)
こういうときはなるべく多めに選んでおけばいいかなと。
んで後からいらないと思ったら消していけばいいでしょう。
公式でも4個表示になってますし。

省いた2個は 「リンク」「お問い合わせ」 ページ。
まーまず見られることもないページでしょう。
 

しかしこれだとPC版とモバイル版で表示されるメニューに差ができてしまう…
モニターサイズも違うわけですし、そういうものだと割り切ってしまえなくもない話なんですが…

ここでちょっと思い出したことがあったんですよ。

今回の記事の最初で悩んでいたアコーディオンメニュー横の空白スペース。
あそこにAFFINGER4では2つまでメニューを追加できたはずなんですよ!

そこを活用できればモバイル版で切り捨てた2つのメニューを表示させることもできるはず…!!(どうせ誰も見ないページだという事は今は気にせず)

 

アコーディオンメニューの設定

というわけで、アコーディオンメニューのカスタマイズを行なっていきます。
 

アコーディオンメニュー横のスペースに設置するメニューは、「リンクボタン」だとか「追加メニュー」だとか名称がイマイチ定まっていないので設定箇所がやたら分かりにくくなっているのが難点ですね。

そんであっちゃこっちゃいじりまわって完成したのがこちら。

アコーディオンメニューリンクボタン

なかなか良いんじゃないですかね?
 

アコーディオンメニューリンクボタン(横向き)

横向き時
 

2つのメニューの境目に線が入っていなかったので、やむを得ず色分けすることになってしまいましたが、まあまあキレイにできた…と思う。

そうそう、PC時のメニューに表示していた「リンク」ページはほぼ無意味なページと化しているので、コレを機に取っ払いました。
ここには相互リンクしていただいたガンプラブロガー同志へのリンクを一覧できるページにする予定ですが、仮運営中の現『ガンプラ気分』には無用ですから。
いずれはそういうモデラー友達とかできたら嬉しす。
 

で、代わりに設置したのが「サイトマップ」ページへのリンクボタン。
このサイトマップはプラグインにより自動生成されたものですが、なかなかに利便性が高いんですよね。
このままだと整理されてなくて見づらいので、ここも後でカスタマイズしておく必要がありますな。
サイト完成への道のりは長い…

合わせてPC版ヘッダーメニューからも「リンク」を「サイトマップ」に置き換えて、とりあえずは完成です。
 

これにより、冒頭で中断していた「モバイル用ロゴ画像」は使用しない、という方向で行くことにしました。

 

ここからは、ついでなんでアコーディオンメニュー内のカスタマイズもしてしまいましょう。
 

こちらが現時点でのアコーディオンメニュー

アコーディオンメニュー

あ、リンクがまだサイトマップになっていないので、少し前の時点でのスクショになりますね。

この展開されたアコーディオンメニュー内に表示されるのは、デフォルトではヘッダーメニューと同じものが表示されています
 

ここに手を加えるのは初めてなのでいつからだったのかは分かりませんが、アコーディオンメニューは「スマートフォン用メニュー」として個別に設定可能となっているので、ここからメニューをカスタマイズしていきます。

上記の6つのメニューは、今回のカスタマイズによりモバイル表示時でもボタンとして表示されるようになったため、このままではこのアコーディオンメニューを展開する意味がありません。

そこでここには当サイトで閲覧可能な全ての固定ページへのリンクを含ませることにしました。
PC版だと「フッターメニュー」として私が設定していたものと同じものです。

で、改良したのがこちら↓

アコーディオンメニュー改良版

新たに「リンク」、そして「プライバシーポリシー」のページへのリンクを加えて、計8つのメニューが表示されるようになりました。
 

これで完成としてもいいのですが、公式サイトのサンプル画面ではアコーディオンメニュー内に「検索フォーム」が入っていて便利そうな感じがしたので、これを真似てみようと思います。

以前ならこの設定もAFFINGER4のデフォルト機能としてチェックボタン一つで設置可能だったのですが、去年の5月のAFFINGERアップデートによりこの機能が廃止され、代わりに「アコーディオンメニュー内に表示」ウィジェットが追加されました。
…なんかもう時代の変化についていくのであっぷあっぷです(ll゚д゚)
 

それではいよいよ完成です。

アコーディオンメニュー完成版

うん、これでモバイル表示時のメニューとの差別化もできたかな。

 

んじゃー今回のカスタマイズはこれにて完了(`・д・´)ゞ

モバイルロゴが使えなくて当初の計画とはだいぶ違う形となってしまいましたが、まー結果的には使いやすそうなデザインになってくれたんじゃないかなーと。
 

さて、では今後の目標なんですが…

とりあえずこのガンプラレビューブログの完成(本公開)の予定を以前『ビルドダイバーズ』の放送開始までと言ってしまった気がするので、今月中ってことになりますね…
いけるのか? いや、やるしかない!!
 

まだまだやることは残っているのですが、次回の予定としては「SNSボタン」の設置、「アクセスカウンター」の設置あたりを予定しています。

SNSボタンはAFFINGERが用意してくれているのでおそらくすぐにでもできるんじゃないかと思いますが…

アクセスカウンターってのはどうやるんでしょ?
PV重視の昨今のブログ業界ではとんと見かけなくなった機能ですが、私は付けたいんでね、まっやれるだけやってみましょうか。

では、今回はこれにてノシ

-ウェブサイト作成

Copyright© ガンプラ気分 , 2019 All Rights Reserved.