読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ

Web制作 メニュー
スポンサーリンク

注:コピペコードを写す前に、元々のhtmlやcssをメモ張にコピペするなど、必ずバックアップを取っておいてください!!

 

はてなブログで最近テーマストアを覗いたりしていると、本当に面白くオシャレなテーマが増えてきましたよね。

 

また多くのテーマがレスポンシブ対応をしてますが、現実にレスポンシブにしている方はあまり多くないと思います。

せっかく優秀なレスポンシブテーマがあるのに採用しない理由として、グローバルナビを後付けで行っているため、それがレスポンシブになっていないというのがあるかなあと。

もちろん、はてなデフォルトのスマホ表示が十分オシャレというのもありますが。

 

そこで今回は、よくあるWordPressのブログのように、グローバルナビをレスポンシブ対応させ、ブラウザ幅が縮んだらトグルメニューになるようなカスタマイズを紹介します。

ちょっと難易度が高いかもしれません。また、注意点として若干遅くなります(見た目ではほぼ変わりません)。

ドロップダウンメニュー付きの改良版は、

www.yukihy.com

をご覧ください。

 

実装図

やりたいことは、まずは普通のブラウザサイズではグローバルメニューを表示させ

f:id:ftmaccho:20150622103539j:plain

ブラウザサイズがタブレットぐらいになったらトグルメニューにする

f:id:ftmaccho:20150622101904j:plain

というカスタマイズです。ちなみに上のボタンをクリックすると下のようにメニューがニューっと出てきて縦に表示されます。

f:id:ftmaccho:20150622101839j:plain

当ブログでも現在この両立パターンを採用しているので、PCでみている方はブラウザのサイズを変えてみてください。

 

ちなみにはてなブログのスマホ表示のみなら、トグルメニューにするカスタマイズは既にコピペコードにしているので良かったら参考にしてみてください。

www.yukihy.com

 今回はこのグローバルメニューとトグルメニューをレスポンシブで表示させるというものです。

 

なんでこんなことをするのか?というのを簡単に説明します。めんどうな方は下にスキップしてカスタマイズしてみてください。

 

従来のグローバルメニューでありがちなこと

従来のグローバルメニューを採用し、ブログをレスポンシブ設定すると、以下のようなことがおこりがちです。

例えばグロメニュを以下のようにつけて(適当ですみません…)

f:id:ftmaccho:20150622102446j:plain

これのブラウザ幅を縮めていきます。すると…

f:id:ftmaccho:20150622102635j:plain

上の図のように、ブログ自体はレスポンシブでもグロメニュがレスポンシブでないため、横スクロールが発生してしまいます。(カテゴリ3以降が横に表示されます)

これではレスポンシブになっていませんし、スマホで見たとき最悪な結果に…。

 

このように横スクロールが生まれてしまう理由として、グローバルメニューの横幅指定にpxが使われていることがあげられます(例:width: 1024px とか)

 

では横幅指定を%にすれば?と思いますが、グローバルメニューで全ての横幅を%にすると、うまくやらないとデザインが崩れやすかったりします。

 

それぞれのブラウザでCSSを書き直せば解消できないことはないのですが、どうせならトグルメニューに変えてしまおう!と思いました。何より最近多いですよね、このタイプ。

 

カスタマイズ

前置きが長くなりましたが、実際のカスタマイズです。

で、いろいろと書いていたのですが、非常に難しい。というのも元々のグローバルメニューがどのように記述されているかは人によって違うからです。

 

htmlやcssなどよく分からない方は、今までのデザインが破棄されますが新しく書いていく方が無難です。

 

いつものようにコピペコードとはいかないかもしれませんが、なるべく説明を加えていきます。

 

 

コード1

最初にHTMLと、jQueryの読み込みとクリックしてトグルになるようにするコードです。コードは以下

このコードを「ヘッダ」→「タイトル下」に貼り付けてください。

このコードは先ほど書いたように3つの役割があって、

  1. リストのHTML(1~10行目)
  2. jQueryの読み込み(12行目)
  3. クリックしてスライドダウン表示する(13~28行目)

です。この内、元々グローバルナビを導入している人は1と似たようなコードがあると思うので、適宜不足している部分を追加してください。

 

で、4~8行目が実際に表示されるリストの名前とURLになるので、「TOP」「カテゴリ1」などと書いてある部分に名前を、「url」と書いてある部分に対応するURLを入れてください(うまくいくか分からないので最後にやった方がいいかも)

カテゴリが多い人は増やしてね。

 

ここまででは以下のように表示されると思います。

f:id:ftmaccho:20150622131500j:plain

この時点でも「MENU」のボタンを押せば出たり引っ込んだりすると思います。

 

コード2

上に表示したものを、cssでやっていきます。

記述の内容の方向性としては、まずは普通にグローバルメニューになるようにcssを作っておいて、「ブラウザサイズが◯◯以下になったらこっちのcssを追加する」という指示を出し、cssコードを強引に書き換えていきます。

 

面倒な方やよく分からない方のために、コピペコードとして以下に用意しました。以下をそのまま貼り付けると、当ブログの色違いのような形になります。

ですが先に言っておくと、cssの知識のある方はコピペせずに下に書いた説明を読みながらの方が早いと思いますので一応。

ちなみに僕も適当にコード追加したりしてるので、ベストではないかもしれません。

上のコードを「デザインCSS」にコピペをすると、以下のようになると思います。

 

ブラウザの横幅が768px以上だとグローバルナビ

f:id:ftmaccho:20150622133655j:plain

786pxより小さくなるとトグルメニュー

f:id:ftmaccho:20150622133803j:plain

が表示されます。

ちなみに786pxはiPad縦持ちのサイズです。46行目の786という数字がグロメニュとトグルの境目になる横幅を表しているので、好みで変えていただけるとと思います。

 

これで一応完了ですが、上のコードの説明を簡単にしておきます。

 

  • コード1~32行目→普通にグローバルメニューをつくるコードになります。なので、自分のグローバルメニューのデザインがすでにある方は、そのままタグ名だけ変えていただくと良いかと思います。
  • コード34~36行目→「MENU」の文字はグローバルナビのときには必要ないので消去します
  • コード38~43行目→当ブログの設定ですが、パソコンの1カラムになったときにグローバルメニューが横にはみ出してしまっていたため、「.menu-inner」の横幅を短くしています。それだけの役割なので不要でしたら消去してください。
  • コード45行目以降→ここがタブレット以下のcssとなるので、トグルメニューになるように書き換えていきます。「height」が指定されていると動かないので「initial」で初期状態に戻したり、「MENU」の文字を表示させ、「#menu」以降はクリックしてから表示されるように「display:none;」で消しておきます

注意点なのですが、コピペでやらない人はコード45行目以下をコピペしてもうまくいかない可能性があります。

あくまでも45行目以下は1~32行目に追加して書き換えているコードなので、1~32行目に不必要なものがあるとトグルメニューのデザインがうまくいかないかもしれません。

なのでcssが分からない人は面倒でもコピペすることをオススメします。今まで各自でやってきたのが消えちゃうけど…。

 

その他のカスタマイズ

その他のカスタマイズとして、適宜追加していきます。むしろこっちのが重要かもしれません。

たくさんあるので組み合わせて使ってください。

色に関しては、コードの中でどれがどこに対応するのかを書いています。なのでそこを「原色大辞典」などで色を見つけるか、めんどうな人は「カテゴリー別配色アイデア100 | Webクリエイターボックス」を見るとカックイイ配色が見つかるかもしれません。

 

初期ではどくどくしい色にしてあるので変えた方が良いですw

意外と背景色を白にするとオシャレに見えたりします。

 

グローバルナビを横幅いっぱいにしない

上のコードだとグローバルナビが表示されますが、当ブログのを使ったので横幅いっぱいに色がついています。

これはコード2の6行目を、11行目と12行目の間に移していただくと解消され下のように横幅いっぱいでなくなります。

f:id:ftmaccho:20150622135752j:plain

で、横幅を長くしたかったり短くしたい場合は9行目の数字を操作してください。

 

グローバルナビのリンクを均等にする

下のようにリンク幅を均等にしたい場合

f:id:ftmaccho:20150622140247j:plain

以下のことをやってください

  • 20-21行目のpaddingを消去
  • 17行目の「left」を「center」に
  • 17行目と18行目の間に、「width: ◯◯%;」をコピペ(◯◯は、「100÷リンクの個数」を入れてください。上の図ならリンクが5個なので半角で20と入れる)

 

トグルメニューを一番上にする

当ブログはトグルメニューを一番上に設定しています。だいたいのブログがこうですよね。

f:id:ftmaccho:20150622140851j:plain

やり方は51行目と52行目の間に

position: absolute;
top: 0;

を入れていただくとできます。

 

トグルメニューを上に固定する

当ブログでは現在タブレットサイズのときのみ、トグルメニューが上に固定されるようになっています。

f:id:ftmaccho:20150622141640j:plain

やり方は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行目以降に追加するとできます。ちとめんどうですね。

 

透けさせる

特にスマホ画面とかで、上のように固定すると結構じゃまだと思います。若干透けさせることで、窮屈さを解消しましょう。

こんな感じ

f:id:ftmaccho:20150622213917j:plain

やり方は

  • 51行目と52行目の間に「opacity: 0.9;」といれる

だけです。数字を小さくするほど透けますが、0.9ぐらいが妥当だと思います。

 

横幅を2分割スタイルにする

僕も今日やってみたばかりですがこんな感じです。

f:id:ftmaccho:20150622212628j:plain

おお!いいじゃないですか。ということで追記です。

やり方はめちゃ簡単で

  • 76行目の「100%」を「50%」に
  • 74行目を消去
  • 80行目の「left」を「center」に

白い枠をつけたい人は

  • 86行目と87行目の間に「border: 1px solid #ffffff;」

と入れるとOKです。

ちなみに4分割にしたければ100%を25%にすればできます。

f:id:ftmaccho:20150622213700j:plain

 

 

上の図では改行されていますが、これはちと面倒なので簡単に書くだけにします。

元々のhtmlの改行したいとこに<br>を差し込み、それを<span style="pc-none"></span>で挟みます。そしてPC版のみのcssに「.pc-none{ display: none;}」として改行を消し、タブレット以下で「.pc-none{ display: initial;}」で改行を復活させるという面倒なやり方をしています。

また改行により高さが2倍になるため、75行目の数字も倍にする必要があります。

 

まとめ

以上でカスタマイズ終了となります。今回はけっこう大変だったと思います。

 

質問・設置代行・ブログカスタム依頼などありましたら、お問い合わせからお気軽にどうぞ!

 

カスタマイズまとめ記事はこちら

www.yukihy.com