猫の手は借りたくない

どうするか迷い中

はてなブログにメニューバーを追加する

メニューバーを作る

どうも、管理人です。 ブログのカスタマイズなんてほとんどやったことなかったのですけど、メニューバーのあるはてなブログのサイトを見て、良いなと思ったので作っていくことにします。

まず参考にしたのがこのサイトです。 pea-nut.hatenablog.com いいところまで行ったのです。このようになりました。

f:id:nekonote222:20190928032624p:plain
いい感じになった
それぞれのカテゴリに追加の階層を作りたかったのです。それで以下のようなコードにしました。

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='https://judgeneko.hatenablog.jp/about'>TOP</a></li>
<li>
            <a>放置ゲーム日記<i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="https://judgeneko.hatenablog.jp/archive/category/Candy%20box%20%21">Candy box !</a></li>
                <li><a href="https://judgeneko.hatenablog.jp/archive/category/Antimatter%20Dimensions">Antimatter Dimensions</a></li>
                <li><a href="https://judgeneko.hatenablog.jp/archive/category/Trimps">Trimps</a></li>
                 <li><a href="https://judgeneko.hatenablog.jp/archive/category/Incremental%20Adventures">Incremental Adventures</a></li>
                 <li><a href="https://judgeneko.hatenablog.jp/archive/category/勇者の塔">勇者の塔</a></li> 
            </ul>
        </li>
        <li>
            <a>PC<i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="https://judgeneko.hatenablog.jp/archive/category/はてなブログ">はてなブログ</a></li>
            </ul>
            </li>
    
</div>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $(".menu-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
     $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
</script>

ですが、これだけだとこのような状態になってしまいました。

f:id:nekonote222:20190928033336p:plain
PCカテゴリが離れてしまっている

マウスを「放置ゲーム日記」に合わせるとこんな感じになります。

f:id:nekonote222:20190928033436p:plain
マウスを「放置ゲーム日記」に合わせた図

各カテゴリを横に並べるのではなく縦に並べたいのです。

さらにスマホだとメニューバーを押しても何も反応が起こらないのでこれも直す必要があります。 スマホではこんな感じです。

f:id:nekonote222:20190928033845j:plain
スマホでの画面。画面上部のメニューバーを押しても何も起こらない

こんなページを見つけました。

shizenkarasuzon.hatenablog.com

まさにやりたかった階層化。

これを参考にするとこんな感じになりました。 f:id:nekonote222:20190928041259p:plain スマホの画面でも階層化できていていいですね。 でも、これではまだ2階層までしかできないのですかね?試してないので分かりませんが多分そうだと思います。 そこで多階層にできる方法がないか調べていたらこのページを発見しました。

etochan.hatenablog.jp

試してみます。

f:id:nekonote222:20190928041835p:plain

こんな感じになってうまくいきませんでした。 一列に表示して欲しいですね。 さらに上のサイトをスマホで見たのですが、スマホではメニューバー対応していませんでしたね。

いよいよ自分でCSSとか書く日が来たのか……?

多階層化の記事を探しているとこのページを見つけました。

blog.minimal-green.com

早速試してみると…… f:id:nekonote222:20190928175401p:plain

多階層化出来ました。ところがこれには欠点があって、画面サイズを小さくしたり、スマホの画面だったりするとレイアウトが崩れてしまします。 もう、スマホの画面ではメニューバーはいらないやと思いました。

このサイトを見つけました。

www.yukihy.com

このサイトと1つ上のサイトの情報を組み合わせて、自分でcssを作ってしまいました。 多階層化出来たといっても、3階層までですが。

それにしてもスマホで理想的な表示にする方法がわからないですね。メニューバーでなくとも階層化されたリストが並べばそれでいいのですが。

結局、スマホでのメニューバー的なものの表示はひとまず諦めることにしました。はてなブログのデザイン>スマートフォン>詳細設定でレスポンシブデザインという部分のチェックを外せば、メニューバーは消えました。よく考えると、はてなブログのデザイン>スマートフォン>ヘッダーでhtmlを記述すればやりたい事が出来そうだということに気づいたのですが、Pro版でしかそれは無理なようです。

ここで、はてなブログにメニューバーを追加するは一旦終了ということにしたいと思います。PCでも画面サイズを小さくするとうまく表示されないという不都合はありますが。

完成形

ちなみに問題のレイアウトはこれです。これさえなければなあという感じです。

f:id:nekonote222:20190928190147p:plain
問題のレイアウト

理想的なレイアウトがこれです。画面のサイズを変えても常にこのように表示されるようにしたい。

f:id:nekonote222:20190928190503p:plain
理想

お礼

ここで紹介させていただいたサイト様はどれも役に立つものでした。ありがとうございます。

追記

コメントでid:minimalgreenさんが、スマホでもPCのように階層化した表示をできる方法を教えてくださいました! なんでもCSSのトグルメニューの部分を消せば良いとのことでした。これでやりたかった事が出来ました!ありがとうございます! まだメニューを等間隔にする調整をしてませんが、またおいおいやるかもしれません。