Nr, Kngw, Tky, Szok

生駒, 横浜, 目黒, 大田, 静岡, 浜松

はてなブログの人気デザインテーマ「Brooklyn」のメニューを6個以上にする方法

f:id:aotree423:20180827220748p:plain

Brooklynとは

shiromatakumiさんという方が作った、はてなブログの人気デザインテーマ「Brooklyn」をカスタマイズしました。
モノトーンを基調としたおしゃれなデザインで、とても好きです。


↓デザインテーマはこちらから
Brooklyn - テーマ ストア


以下の記事で、カスタマイズ方法が紹介されているのですが、

「メニューを5個以上にするとレイアウトが崩れてしまう」

という制約があります。

www.notitle-weblog.com

どうしてもメニューを増やしたかったので、デザインCSS をカスタマイズをして8個のメニューを並べてみました。

利用者22000人超えの人気テーマなので、利用者の中には6個以上にメニューを増やしたい方も居るのではないかと思ったので、お役に立てれば幸いです。

ざっくりとした仕組み

↓PCで観たとき、メニューがこんな感じで並んでいて

[ menu1 ][ menu2 ][ menu3 ][ menu4 ][ menu5 ]

↓試しに、画面の横幅を小さくしてみると、間隔は一定に守られていることがわかると思います。

[ menu1 ][ menu2 ][ menu3 ][ menu4 ][ menu5 ]

これは、CSSというデザインの設定ファイルの中で「[menu]ひとつは横幅全体の20%」という指定がされているからなのです。

なので、6個以上のメニューを追加すると「20% × 5個 = 100%」を超えてしまい、等間隔に並ばずに右に詰まってしまうわけです。

↓たとえば8個の場合、こうなる

f:id:aotree423:20180902110149p:plain

つまり、この間隔=20%をメニューの数に合わせて変更してあげれば均等になるのです。

  • 6個の場合 → 100 ÷ 6 = 16.666… → 余裕を持たせて 16%
  • 7個の場合 → 100 ÷ 7 = 14.285… → 余裕を持たせて 14%
  • 8個の場合 → 100 ÷ 8 = 12.5… → 余裕を持たせて 12%

やり方

メニューのカスタマイズ

メニューの追加は、[設定画面] > [デザイン] > [カスタマイズ] > [ヘッダ] > [タイトル下]
で、行えます。

↓こんな感じで、<li>...</li>という行をコピーしてあげて、メニューの名前とリンクを変えてあげればいいですね。

f:id:aotree423:20180827224422p:plain

メニューの間隔

メニューの間隔は、[設定画面] > [デザイン] > [カスタマイズ] > [デザインCSS]
で、行えます。

↓下記の3行をコピーしてあげて、メニューの数にあった%に変えてあげます。

.global-menu-list li {
width: 12%;
}

f:id:aotree423:20180827225510p:plain

終わりに

簡単なので、是非試してみてください。