ミセスGのブログ

海外ドラマ&映画の感想をパンピー視点で書いている国際結婚&アメリカ在住キョドラーのブログです。

はてなブログスマホ版メニューに階層をつけて子カテゴリを実装する方法

f:id:oclife:20180203125901j:plain

久しぶりにスマホデザインをいじりました。スマホ版のグローバルメニューに子カテゴリを実装したので、その方法を紹介します。ゆきひーさんのスマホ版メニューをベースにしています。

こちらがBEFOREとAFTERです。

f:id:oclife:20180203120658j:plain
f:id:oclife:20180203130446j:plain
BEFORE(左)とAFTER(右)

 

メニューの子カテゴリは、以下の例のように、親カテゴリの</a>の後ろに<ul>を入れて、<li>子カテゴリ</li> を中に入れて、</ul>で閉じます。

 

はてなブログのスマホ版メニューに子カテゴリを実装する方法

スマホ版メニューは、ゆきひーさんのスマホ版メニューを利用させて頂いています。シンプルで使いやすく、とても気に入っています。透かせたり、2列にすることもできるので、カスタマイズも色々できそうです。

ただし、子カテゴリがなかったので、これに子カテゴリを実装することにしました。当ブログは海外ドラマと映画がメインなので、どうしてもジャンル別に子カテゴリが欲しかったのです。

いろいろ調べましたが、このスマホ版メニューで子カテゴリを作っているサイトが見つかりませんでした。mitopiの主に肩こり改善ブログさんのように、子カテゴリが不自然な表示になってしまいました。

そこで思いました。

子カテゴリのデザインをcssで足しちゃえばいんじゃね?

というわけで、cssをいじりながら進めて行ったところ、子カテゴリを実装することができましたので、備忘録として書き留めることにしました。

 

スマホ版メニューBEFORE

f:id:oclife:20180203120658j:plain 


今までのスマホ版メニューはこんな感じでした。ユキヒーさんのスマホ版メニューをそのままコピペで流用させて頂いていました。親メニューの文字だけ中央揃えにしていました。これだと親カテゴリと子カテゴリがごっちゃです。

子カテゴリを実装していくので、文字をまず左に寄せます。

f:id:oclife:20180203121158j:plain


次に以下のコードをダッシュボードの「デザイン」⇒「スマートフォン」⇒「ヘッダ」⇒「タイトル下」に貼り付けます。これが子カテゴリのcssコードになります。

 

するとこうなります。

f:id:oclife:20180203122515j:plain


背景の色を直すために、以下のように、menu > ul のところに background-color を指定します。私はメニューの背景に #444を使用していますので、ご自身の背景色に変更してください。

f:id:oclife:20180203123546j:plain

cssコードはこちら。 <style type="text/css">と</style>の間に入れるのをお忘れなく。

以上で完成です。

 

スマホ版メニューAFTER

f:id:oclife:20180203124156j:plain

今のところ孫は必要ないので入れていませんが、この方法なら孫まで作れますね。