ドロワーメニューでヘッダー周りの無駄をなくす！シンプルを究めてみた

こんにちは！
BiND10テンプレートのデザインディレクターを担当している、デザイナーのオモトです。
今回は、ユーザーさんと共同制作している「オウンドメディア風サイトのテンプレート」を使ったカスタマイズ編です。

その名も「ドロワーメニュー」に挑戦！です。
名前をご存じでなくても見たことはあるはず、なこのデザイン。
スマホでよく見かける横3本線のメニューをクリックすると、メニューがふわっと広がる仕組み（ハンバーガーメニューとも言われていますね。）なので、ヘッダ周りをスッキリさせたいときに優れものです。

横3本線をクリックして、メニューが広がった状態の画面

ちょっと難易度高ですが、やりたい方はチャレンジしてみてくださいね！

（CSSがわからないとできない、難易度が非常に高い改造となりますので、分からない方はあくまで参考までに…！）
※ブログの内容についてはサポート対象外なので要注意！

これまでの記事はこちらから。
▼第1回リクエストから生まれた、ブログで更新できる最新テンプレート
▼第2回ミニマルなブログやオウンドメディアに最適！超シンプルなモノトーンのテンプレ登場

カスタマイズしたサイトはコレ！

PCサイトでも表示できるドロワーメニューを設定する

ユーザーさんからリクエストのあったデザインに近づけてみたのがこちらです。
よく見ないとわかりにくいですが、実はPCでも「横3本線」のメニューが左上に表示されています。
BiNDの場合、通常はスマホ・タブレットサイズでしか表示されませんが、PCでも表示できるようカスタマイズしています。

サンプルサイトをみる

イメージとしてリクエストいただいたデザインがこちらで、

これが、カスタマイズ前の元のBiNDの新作テンプレートです

BiNDの仕様上、泣く泣く断念してしまったところを「カスタマイズ」という形で再現してみました。
カスタマイズのポイントとしては、大きく３つ

• 左の黒帯の中にある三本線、「ドロワーメニュー」の設置
• ページタイトルとサイドAを同じ色に
• トップページのビルボードの要素、フッターの要素は思い切って全て非表示！（グローバルメニューは「スマホだけで表示」に設定）

です。

これを実現するには、ドロワーメニューをPC上でも表示する必要があるのですが、現状の仕様だと、ドロワーメニューはタブレットかスマホでしか使うことができません。
なので、BiNDでちゃんと動くことを考慮しつつ、CSSだけで表現したドロワーメニューのコードを「カスタマイズタグ」に入れることで実現しました。
（今回の趣旨は設定のご紹介です。全ブラウザ・機種で動くかは未チェックのため、自己責任で必要に応じて行ってください）

早速やってみよう

最初に、ポイントの２つめ「ページタイトルとサイドAを同じ色に」するDressの設定について解説したいと思います。
ドロワーメニューを追加したいだけであれば、「ドロワーメニュー設置」まで読み飛ばしてください！
まず、ポイント３つ目の「不要なブロックを非表示（または削除）」してからはじめしょう。

トップページのDressの設定

「ヘッダーエリア」 背景色：#e5e9eb
「ヘッダーエリア」＞「ページタイトル」 背景色：#414141、高さ：45px、最大幅：380px
「ヘッダーエリア」＞「ページタイトル」＞「リンク」文字色：#d1d1d1

「サイドAエリア」 背景色：#414141、ボーダー：なし
「サイドAエリア」＞「リスト式：マークなし」＞「リスト（li）」>「リンク」文字色：#d1d1d1

これで、トップページのDressの修正が終わりました。こんな感じになりましたか？
文字の色は、真っ白ではなくあえて薄いグレーにすることで高級感を出しました。
また、グレーの色は、普通のグレーではなく、もともと罫線に使っていた青みがかったグレーを入れています。
普通のグレーはダメという訳ではないのですが、グレーは基本的に黄色く濁って見えます。なので、少量の青を入れることでスッキリ見せることができるという、とても細かいところですが、デザインテクニックが入っているのです。

グレーの微妙な違いがデザインを少しだけかっこよくします

下層ページのDressの設定

本来のテンプレートであれば、１つのDressで全ページのデザインが同じように変わるのですが、このテンプレートはBiNDテンプレートの中でもかなり特殊な作りになっており、トップページとそれ以外の下層ページで違うDressを使用しています。

というのも、全てはSEOに最適化したブログテンプレートにするためにこうした仕様になっているのです。
詳しく解説すると、SEOで一番強いと言われる<h1>タグに何を入れるかによってページがSEOに大きな影響が出るのは、みなさんご存知かと思います。
一般的に「ブログ」と呼ばれるものは、特にそのSEOに対してセンシティブに気を配ってあげる必要があり、
トップページと下層ページでは、一番検索上位に引っかかって欲しいところがそれぞれ違います。

トップページのヘッダーの「サイトタイトル部分」が、記事ページでは、「記事のタイトル」が検索上位に引っかかって欲しいですよね？ですので、カスタマイズに多少の不便はありますが、トップとそれ以外のページで、あえて二つのDressを使い分ける作りになっているのです。

なので、下層ページ用のDressも先ほどと同じようにDressを修正する必要があります。

各ページの歯車マークをクリック、枠内の「ページDressの編集ボタン」をクリック。
先ほど、「ヘッダー」>「ページタイトル」の設定を、「ページタイトル」の部分を「リード」にして、「ヘッダー」>「リード」に同じように入れてください。他は同じお名前のところでOKです。

これで、下層ページにも同じようにDressが反映されました。

ドロワーメニューを設置

サイドAの一番上のブロックに、カスタマイズタグを追加。そのカスタマイズタグの中に、サンプルサイト下部のコードをコピーしてペーストしてください。

これでメニューの設置は完了です。
SNSボタンよりもクリックして欲しいので、こちらのボタンは白くして少し目立たせました。
細かい説明は省きますが、「nav-content」が、ハンバーガーメニューをクリックした後に表示される中身です。ほんとは自動で記事が切り替わるようにしたかったのですが、できなかったので、変更したい場合は、手動で中身を更新してください。
画像のリンク先はBDタグを使用して、BiNDのサイトデータ内にある「_userdata」　フォルダに格納されている画像を呼び出しています。リソースエディタからアップしましょう。

ドロワーメニューを入れたブロックの余白は、左18px、下3px、上右は0に設定するとちょうどいいです。
また、スマホで非表示にする設定をお忘れなく。これでドロワーメニューが表示されていれば成功です。

番外編：ビルボードもそのまま生かしたい時

上記の設定だけだと、ビルボードの左側が白い設定のままなので、さらにカスタマイズを加える必要があります。

CSS詳細設定の変更

ビルボードの１つめのブロック編集画面のCSS詳細設定タブを開きます。

背景色を、#414141、横幅を50pxに変更します。

同ブロックのブロックDressの設定を開き、「一つめのカラム」のボーダー（右）を「なし」、にします。

次に、ビルボードの２つめのブロック編集画面を開き、先ほどと同様に、左側のカラムの背景色を、#414141、横幅を50pxに設定します。
これで完成です。
フッターのPICK UPも生かしたい方は、同様の手順で変更を加えてください。

以上で、カスタマイズ完了となります。
こちらのテンプレートは、「BiND Site Box Vol.25」として発売中！！興味ある方は追加してみてくださいね。

最新の追加テンプレートをチェックする