オモトこんにちは!BiND10テンプレートのデザインディレクターを担当している、デザイナーのオモトです。今回は、ユーザーさんと共同制作している「オウンドメディア風サイトのテンプレート」を使ったカスタマイズ編です。その名も「ドロワーメニュー」に挑戦!です。名前をご存じでなくても見たことはあるはず、なこのデザイン。スマホでよく見かける横3本線のメニューをクリックすると、メニューがふわっと広がる仕組み(ハンバーガーメニューとも言われていますね。)なので、ヘッダ周りをスッキリさせたいときに優れものです。横3本線をクリックして、メニューが広がった状態の画面ちょっと難易度高ですが、やりたい方はチャレンジしてみてくださいね!(CSSがわからないとできない、難易度が非常に高い改造となりますので、分からない方はあくまで参考までに...!)※ブログの内容についてはサポート対象外なので要注意!これまでの記事はこちらから。▼第1回リクエストから生まれた、ブログで更新できる最新テンプレート▼第2回ミニマルなブログやオウンドメディアに最適!超シンプルなモノトーンのテンプレ登場カスタマイズしたサイトはコレ!PCサイトでも表示できるドロワーメニューを設定するユーザーさんからリクエストのあったデザインに近づけてみたのがこちらです。見ないとわかりにくいですが、実はPCでも「横3本線」のメニューが左上に表示されています。BiNDの場合、通常はスマホ・タブレットサイズでしか表示されませんが、PCでも表示できるようカスタマイズしています。サンプルサイトをみるイメージとしてリクエストいただいたデザインがこちらで、これが、カスタマイズ前の元のBiNDの新作テンプレートですBiNDの仕様上、泣く泣く断念してしまったところを「カスタマイズ」という形で再現してみました。カスタマイズのポイントとしては、大きく3つ左の黒帯の中にある三本線、「ドロワーメニュー」の設置ページタイトルとサイドAを同じ色にトップページのビルボードの要素、フッターの要素は思い切って全て非表示!(グローバルメニューは「スマホだけで表示」に設定)です。これを実現するには、ドロワーメニューをPC上でも表示する必要があるのですが、現状の仕様だと、ドロワーメニューはタブレットかスマホでしか使うことができません。BiNDでちゃんと動くことを考慮しつつ、CSSだけで表現したドロワーメニューのコードを「カスタマイズタグ」に入れることで実現しました。(今回の趣旨は設定のご紹介です。全ブラウザ・機種で動くかは未チェックのため、自己責任で必要に応じて行ってください)早速やってみよう最初に、ポイントの2つめ「ページタイトルとサイドAを同じ色に」するDressの設定について解説したいと思います。ドロワーメニューを追加したいだけであれば、「ドロワーメニュー設置」まで読み飛ばしてください!まず、ポイント3つ目の「不要なブロックを非表示(または削除)」してからはじめしょう。背景色:#414141、ボーダー:なし「サイドAエリア」>「リスト式:マークなし」>「リスト(li)」>「リンク」文字色:#d1d1d1これで、トップページのDressの修正が終わりました。こんな感じになりましたか?文字の色は、真っ白ではなくあえて薄いグレーにすることで高級感を出しました。グレーの色は、普通のグレーではなく、もともと罫線に使っていた青みがかったグレーを入れています。普通のグレーはダメという訳ではないのですが、グレーは基本的に黄色く濁って見えます。少量の青を入れることでスッキリ見せることができるという、とても細かいところですが、デザインテクニックが入っているのです。本来のテンプレートであれば、1つのDressで全ページのデザインが同じように変わるのですが、このテンプレートはBiNDテンプレートの中でもかなり特殊な作りになっており、トップページとそれ以外の下層ページで違うDressを使用しています。いうのも、全てはSEOに最適化したブログテンプレートにするためにこうした仕様になっているのです。詳しく解説すると、SEOで一番強いと言われる<h1>タグに何を入れるかによってページがSEOに大きな影響が出るのは、みなさんご存知かと思います。一般的に「ブログ」と呼ばれるものは、特にそのSEOに対してセンシティブに気を配ってあげる必要があり、トップページと下層ページでは、一番検索上位に引っかかって欲しいところがそれぞれ違います。トップページのヘッダーの「サイトタイトル部分」が、記事ページでは、「記事のタイトル」が検索上位に引っかかって欲しいですよね?ですので、カスタマイズに多少の不便はありますが、トップとそれ以外のページで、あえて二つのDressを使い分ける作りになっているのです。下層ページ用のDressも先ほどと同じようにDressを修正する必要があります。各ページの歯車マークをクリック、枠内の「ページDressの編集ボタン」をクリック。先ほど、「ヘッダー」>「ページタイトル」の設定を、「ページタイトル」の部分を「リード」にして、「ヘッダー」>「リード」に同じように入れてください。他は同じお名前のところでOKです。これで、下層ページにも同じようにDressが反映されました。ドロワーメニューを設置サイドAの一番上のブロックに、カスタマイズタグを追加。そのカスタマイズタグの中に、サンプルサイト下部のコードをコピーしてペーストしてください。これでメニューの設置は完了です。SNSボタンよりもクリックして欲しいので、こちらのボタンは白くして少し目立たせました。細かい説明は省きますが、「nav-content」が、ハンバーガーメニューをクリックした後に表示される中身です。ほんとは自動で記事が切り替わるようにしたかったのですが、できなかったので、変更したい場合は、手動で中身を更新してください。フォルダに格納されている画像を呼び出しています。リソースエディタからアップしましょう。ドロワーメニューを入れたブロックの余白は、左18px、下3px、上右は0に設定するとちょうどいいです。スマホで非表示にする設定をお忘れなく。これでドロワーメニューが表示されていれば成功です。上記の設定だけだと、ビルボードの左側が白い設定のままなので、さらにカスタマイズを加える必要があります。CSS詳細設定の変更ビルボードの1つめのブロック編集画面のCSS詳細設定タブを開きます。背景色を、#414141、横幅を50pxに変更します。同ブロックのブロックDressの設定を開き、「一つめのカラム」のボーダー(右)を「なし」、にします。次に、ビルボードの2つめのブロック編集画面を開き、先ほどと同様に、左側のカラムの背景色を、#414141、横幅を50pxに設定します。UPも生かしたい方は、同様の手順で変更を加えてください。以上で、カスタマイズ完了となります。Vol.25」として発売中!!興味ある方は追加してみてくださいね。CAMPで最も読まれた記事は?コンセプト。