【改良版】コピペ一発はてなブログにトグルメニューをつけるカスタムを広告の背景に色がつかないようにしました！

f:id:ftmaccho:20151220115431p:plain かなり以前に書いた、コピペ一発ではてなブログのスマホ版にトグルメニューをつけるカスタマイズ。

www.yukihy.com

こちらを書いてからしばらくたったのですが、上のもので貼ると、タイトル下の部分に広告を貼ると、そこまで背景色がついてしまう！との声をいただきました。

なので改良版のコードを書きたいと思います！

カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。

実装図
カスタマイズのやり方
- コード
- リンクを入れていく
その他のカスタマイズ
- 色
まとめ

実装図

カスタマイズをすると、こんな感じになります。

f:id:ftmaccho:20151207210638g:plain

機能としては今までと特に変化はありません。

f:id:ftmaccho:20151207211541p:plain

ただ、上のように広告をタイトル下に貼ったときに、広告の背景に色がついてしまうのを改善しました。

無駄な部分はありますが、はてなブログ以外でも一応機能するのではないかなと思います。

カスタマイズのやり方

コード

下のコードを、「タイトル下」にコピペ！

<div id="menu">
    <div id="btnArea">
        <span id="menuBtn"><i class="blogicon-reorder lg"></i> MENU</span>
    </div>
    <ul id="menuContent">
        <li><a href='url'>カテゴリ１</a></li>
        <li><a href='url'>カテゴリ２</a></li>
        <li><a href='url'>カテゴリ３</a></li>
        <li><a href='url'>カテゴリ４</a></li>
        <li><a href='url'>カテゴリ５</a></li>
        <li><a href='url'>カテゴリ６</a></li>
        <li><a href='url'>カテゴリ７</a></li>
        <li><a href='url'>カテゴリ８</a></li>
    </ul>
</div>
 
<style type="text/css">
#top-editarea .section{
    margin: 0;
    width: 100%;
}
#menu{background: #eee;/*メニューバーの背景*/}
#btnArea{text-align: right;/*MENUの文字の位置*/}
#menuBtn{
    display: inline-block;
    padding: 8px;
    margin: 5px;
    border-radius: 5px;
    background: #444;/*MENUの背景色*/
    color: #fff;/*MENUの文字色*/
    font-size: 80%;
}
#menu > ul{
    display: none;
    padding: 0;
    margin: 0;
}
#menuContent > li{
    list-style-type: none;
    margin: 0 auto;
}
#menuContent > li > a{
    display: block;
    padding: 7px;
    text-align: center;/*リストの文字の位置*/
    background: #444;/*リストの背景色*/
    color: #fff;/*リストの文字色*/
    font-size: 80%;
    font-weight: bold;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menuBtn"),
        menuContent = $("#menuContent");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
});
</script>