【swellカスタマイズ】BOXナビを活用してかっこいいスマホメニューを作る。

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック10,000円」を進呈中！

スマホのメニューにBOXナビ他を突っ込んで他人と一味変えてみる

BLOG内の回遊率を上げるために内部リンク貼ったりTOPページから動線作ったりまぁ色々みなさん趣向を凝らすわけですがSWELLは簡単にウイジェットやBLOGパーツ化したモノなどを組み合わせて素敵なメニューを作ることができます。

思わず押してみたくなるBOXメニューやタグクラウドは用意しておくと良いと思います。

実際の使い方

私のBLOGはサイドバー付きの表示をおこなっているわけですが

1. 検索窓
2. ボックスナビ
3. タグ
4. 目次

これらは標準のウィジェットの組み合わせで実現可能でパソコンならこれで目的は達成できます。

しかしこれがスマホやタブレットだとメニュー形式も表示も変わります。

サイドバーが消失するので当然そのモバイル用のページに同じようなものを用意する必要があります。

なので 前述の SP/PC表示制御が可能なSWELL広告ウィジェットを利用してこれを実現いたします。

「広告ウィジェット」だから必ず広告を入れなければいけないわけじゃありません

PC/SP表示制御機能を活用すればなんでもできますね。

実際の画像見るとわかりやすいと思います。

ブログパーツのIDの4181は ボックスナビをブログパーツ化して 使用してます。

もちろんここで個別に必要なHTMLを記述しても良いのですが

もしもボックスナビを変更修正したいときに各部位バラバラに記述すると

メンテナンスがめんどくさいので ブログパーツ化して使います。

では上記を応用して実際のスマホ用の開閉メニューの変更

そのままだと普通にカテゴリーが表示されてメニューが自動で生成されてますが

このままだと味気ないので笑

STEP

空のメニューを作成する

空のメニューを作成する意味

本来ならこのような形式になるのですが

この自動で作られてる上のメニューを消すためにダミーを突っ込みます。

すると以下のようになる

STEP

ウィジェットの設定で「スマホ開閉メニュー下」

ここもBlogパーツIDで指定します。

私みたいにさらにタグクラウドもつけておくと回遊率上がると思います。

次の記事は実際のボックスメニューやナビゲーションメニューを解説します。

あわせて読みたい

ボックスナビと可愛らしいナビゲーションメニュー ボックスナビ と 可愛らしいナビゲーションメニューを試す ぽんひろさんのボックスナビ。kodocode.netさんのナビゲーションメニュー。 どちらもとても有名な方ですね。 …