はてなブログのカスタマイズ。グローバルメニューの設置
サイドバーに引き続き、グローバルメニューを実装しました。
そのうち変更するかもしれないので、今回の変更でどんな感じになったのか画像を置いておきます。
PC
※右上の「カテゴリ」という文字をタップすると、下に一覧が表示される仕様です。
コピペさせてもらったサイト紹介
多少のカスタマイズは加えていますが、ほぼ下記サイトのコピペになります。
グローバルメニューが付けられるというだけでなく、レスポンシブサイトでのスマホやタブレットにも対応しているのがいい感じです。
ちなみに下記サイトのものも試してますが、サイトに合わせるための修正がややこしそうだったので1つ目を使っています。
具体的な方法に関しては、それぞれのブログで確認してください。
コピペでのグローバルメニュー導入の注意点
今回、グローバルメニューをコピペで導入するに当たって、細かい修正をしています。
見た目的な部分もいじっていますが、修正のメインとなったのは「元々あるCSSと不一致の部分」です。
具体的には「ウィンドウサイズによってグローバルメニューが表示されなくなる」「表示はされているけどはみ出す」というような問題がありました。
レスポンシブにしているため「このウィンドウサイズのとき、こういう挙動をする」という指示を出す必要があるんですが、このウィンドウサイズが新たに入れたものと古いもので違っていたようです。
そのためにはみ出したり表示されなかったり、ということが起きていました。
HTMLはまぁまぁ分かりますがCSSは初心者なので、しばらく「どうやるんだろう」と悩んでました。
なので、CSSやコードに対する何となくの知識はないと難しいかもしれません。
コピペなので、今あるデザインと噛み合わない原因はいろいろあると思います。
自分で解決できるなら良いのですが、そうでない場合は、デザインかコピペ元を探して幾つか試してみてください。
ここのページで幾つか紹介されています。
