注：コピペコードを写す前に、元々のhtmlやcssをメモ張にコピペするなど、必ずバックアップを取っておいてください！！
はてなブログで最近テーマストアを覗いたりしていると、本当に面白くオシャレなテーマが増えてきましたよね。
また多くのテーマがレスポンシブ対応をしてますが、現実にレスポンシブにしている方はあまり多くないと思います。
せっかく優秀なレスポンシブテーマがあるのに採用しない理由として、グローバルナビを後付けで行っているため、それがレスポンシブになっていないというのがあるかなあと。
もちろん、はてなデフォルトのスマホ表示が十分オシャレというのもありますが。
そこで今回は、よくあるWordPressのブログのように、グローバルナビをレスポンシブ対応させ、ブラウザ幅が縮んだらトグルメニューになるようなカスタマイズを紹介します。
ちょっと難易度が高いかもしれません。また、注意点として若干遅くなります(見た目ではほぼ変わりません)。
ドロップダウンメニュー付きの改良版は、
をご覧ください。
実装図
やりたいことは、まずは普通のブラウザサイズではグローバルメニューを表示させ
ブラウザサイズがタブレットぐらいになったらトグルメニューにする
というカスタマイズです。ちなみに上のボタンをクリックすると下のようにメニューがニューっと出てきて縦に表示されます。
当ブログでも現在この両立パターンを採用しているので、PCでみている方はブラウザのサイズを変えてみてください。
ちなみにはてなブログのスマホ表示のみなら、トグルメニューにするカスタマイズは既にコピペコードにしているので良かったら参考にしてみてください。
今回はこのグローバルメニューとトグルメニューをレスポンシブで表示させるというものです。
なんでこんなことをするのか？というのを簡単に説明します。めんどうな方は下にスキップしてカスタマイズしてみてください。
従来のグローバルメニューでありがちなこと
従来のグローバルメニューを採用し、ブログをレスポンシブ設定すると、以下のようなことがおこりがちです。
例えばグロメニュを以下のようにつけて（適当ですみません…）
これのブラウザ幅を縮めていきます。すると…
上の図のように、ブログ自体はレスポンシブでもグロメニュがレスポンシブでないため、横スクロールが発生してしまいます。（カテゴリ３以降が横に表示されます）
これではレスポンシブになっていませんし、スマホで見たとき最悪な結果に…。
このように横スクロールが生まれてしまう理由として、グローバルメニューの横幅指定にpxが使われていることがあげられます（例：width: 1024px とか）
では横幅指定を%にすれば？と思いますが、グローバルメニューで全ての横幅を%にすると、うまくやらないとデザインが崩れやすかったりします。
それぞれのブラウザでCSSを書き直せば解消できないことはないのですが、どうせならトグルメニューに変えてしまおう！と思いました。何より最近多いですよね、このタイプ。
カスタマイズ
前置きが長くなりましたが、実際のカスタマイズです。
で、いろいろと書いていたのですが、非常に難しい。というのも元々のグローバルメニューがどのように記述されているかは人によって違うからです。
htmlやcssなどよく分からない方は、今までのデザインが破棄されますが新しく書いていく方が無難です。
いつものようにコピペコードとはいかないかもしれませんが、なるべく説明を加えていきます。
コード１
最初にHTMLと、jQueryの読み込みとクリックしてトグルになるようにするコードです。コードは以下
このコードを「ヘッダ」→「タイトル下」に貼り付けてください。
このコードは先ほど書いたように３つの役割があって、
- リストのHTML(1~10行目)
- jQueryの読み込み（12行目）
- クリックしてスライドダウン表示する（13~28行目）
です。この内、元々グローバルナビを導入している人は１と似たようなコードがあると思うので、適宜不足している部分を追加してください。
で、4~8行目が実際に表示されるリストの名前とURLになるので、「TOP」「カテゴリ１」などと書いてある部分に名前を、「url」と書いてある部分に対応するURLを入れてください（うまくいくか分からないので最後にやった方がいいかも）
カテゴリが多い人は増やしてね。
ここまででは以下のように表示されると思います。
この時点でも「MENU」のボタンを押せば出たり引っ込んだりすると思います。
コード２
上に表示したものを、cssでやっていきます。
記述の内容の方向性としては、まずは普通にグローバルメニューになるようにcssを作っておいて、「ブラウザサイズが◯◯以下になったらこっちのcssを追加する」という指示を出し、cssコードを強引に書き換えていきます。
面倒な方やよく分からない方のために、コピペコードとして以下に用意しました。以下をそのまま貼り付けると、当ブログの色違いのような形になります。
ですが先に言っておくと、cssの知識のある方はコピペせずに下に書いた説明を読みながらの方が早いと思いますので一応。
ちなみに僕も適当にコード追加したりしてるので、ベストではないかもしれません。
上のコードを「デザインCSS」にコピペをすると、以下のようになると思います。
ブラウザの横幅が768px以上だとグローバルナビ
786pxより小さくなるとトグルメニュー
が表示されます。
ちなみに786pxはiPad縦持ちのサイズです。46行目の786という数字がグロメニュとトグルの境目になる横幅を表しているので、好みで変えていただけるとと思います。
これで一応完了ですが、上のコードの説明を簡単にしておきます。
- コード1~32行目→普通にグローバルメニューをつくるコードになります。なので、自分のグローバルメニューのデザインがすでにある方は、そのままタグ名だけ変えていただくと良いかと思います。
- コード34~36行目→「MENU」の文字はグローバルナビのときには必要ないので消去します
- コード38~43行目→当ブログの設定ですが、パソコンの１カラムになったときにグローバルメニューが横にはみ出してしまっていたため、「.menu-inner」の横幅を短くしています。それだけの役割なので不要でしたら消去してください。
- コード45行目以降→ここがタブレット以下のcssとなるので、トグルメニューになるように書き換えていきます。「height」が指定されていると動かないので「initial」で初期状態に戻したり、「MENU」の文字を表示させ、「#menu」以降はクリックしてから表示されるように「display:none;」で消しておきます
注意点なのですが、コピペでやらない人はコード45行目以下をコピペしてもうまくいかない可能性があります。
あくまでも45行目以下は1~32行目に追加して書き換えているコードなので、1~32行目に不必要なものがあるとトグルメニューのデザインがうまくいかないかもしれません。
なのでcssが分からない人は面倒でもコピペすることをオススメします。今まで各自でやってきたのが消えちゃうけど…。
その他のカスタマイズ
その他のカスタマイズとして、適宜追加していきます。むしろこっちのが重要かもしれません。
たくさんあるので組み合わせて使ってください。
色
色に関しては、コードの中でどれがどこに対応するのかを書いています。なのでそこを「原色大辞典」などで色を見つけるか、めんどうな人は「カテゴリー別配色アイデア100 | Webクリエイターボックス」を見るとカックイイ配色が見つかるかもしれません。
初期ではどくどくしい色にしてあるので変えた方が良いですw
意外と背景色を白にするとオシャレに見えたりします。
グローバルナビを横幅いっぱいにしない
上のコードだとグローバルナビが表示されますが、当ブログのを使ったので横幅いっぱいに色がついています。
これはコード２の６行目を、11行目と12行目の間に移していただくと解消され下のように横幅いっぱいでなくなります。
で、横幅を長くしたかったり短くしたい場合は９行目の数字を操作してください。
グローバルナビのリンクを均等にする
下のようにリンク幅を均等にしたい場合
以下のことをやってください
- 20-21行目のpaddingを消去
- 17行目の「left」を「center」に
- 17行目と18行目の間に、「width: ◯◯%;」をコピペ（◯◯は、「100÷リンクの個数」を入れてください。上の図ならリンクが５個なので半角で20と入れる）
トグルメニューを一番上にする
当ブログはトグルメニューを一番上に設定しています。だいたいのブログがこうですよね。
やり方は51行目と52行目の間に
position: absolute; top: 0;
を入れていただくとできます。
トグルメニューを上に固定する
当ブログでは現在タブレットサイズのときのみ、トグルメニューが上に固定されるようになっています。
やり方は51行目と52行目の間に
position: fixed; top: 0; z-index: 10;
を入れ、バランスをとるために90と91行目の間に
#blog-title{
margin-top: 30px;
}
を入れていただくとうまくできると思います。
ちなみにスマホサイズで固定を解除するには、
/*スマホ横サイズ*/
@media screen and (max-width:680px){
#top-editarea{
position: absolute;
}
#blog-title{
margin-top: 0;
}
}
を92行目以降に追加するとできます。ちとめんどうですね。
透けさせる
特にスマホ画面とかで、上のように固定すると結構じゃまだと思います。若干透けさせることで、窮屈さを解消しましょう。
こんな感じ
やり方は
- 51行目と52行目の間に「opacity: 0.9;」といれる
だけです。数字を小さくするほど透けますが、0.9ぐらいが妥当だと思います。
横幅を２分割スタイルにする
僕も今日やってみたばかりですがこんな感じです。
おお！いいじゃないですか。ということで追記です。
やり方はめちゃ簡単で
- 76行目の「100%」を「50%」に
- 74行目を消去
- 80行目の「left」を「center」に
白い枠をつけたい人は
- 86行目と87行目の間に「border: 1px solid #ffffff;」
と入れるとOKです。
ちなみに４分割にしたければ100%を25%にすればできます。
上の図では改行されていますが、これはちと面倒なので簡単に書くだけにします。
元々のhtmlの改行したいとこに<br>を差し込み、それを<span style="pc-none"></span>で挟みます。そしてPC版のみのcssに「.pc-none{ display: none;}」として改行を消し、タブレット以下で「.pc-none{ display: initial;}」で改行を復活させるという面倒なやり方をしています。
また改行により高さが２倍になるため、75行目の数字も倍にする必要があります。
まとめ
以上でカスタマイズ終了となります。今回はけっこう大変だったと思います。
質問・設置代行・ブログカスタム依頼などありましたら、お問い合わせからお気軽にどうぞ！
カスタマイズまとめ記事はこちら
