読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

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

Web制作 メニュー jQuery CSS
スポンサーリンク

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'>カテゴリ1</a></li>
        <li><a href='url'>カテゴリ2</a></li>
        <li><a href='url'>カテゴリ3</a></li>
        <li><a href='url'>カテゴリ4</a></li>
        <li><a href='url'>カテゴリ5</a></li>
        <li><a href='url'>カテゴリ6</a></li>
        <li><a href='url'>カテゴリ7</a></li>
        <li><a href='url'>カテゴリ8</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>

これで、タイトル下にトグルメニューができたと思います。

あとは、具体的にリンク部分を入れていきます。

リンクを入れていく

上のコードの、「カテゴリ1」などの部分にカテゴリ名を入れ、対応するURLを同じ行の「url」の部分に入れてください。

以上でカスタマイズは終了です。

その他のカスタマイズ

色は、どこを変えればどこに反応するか、上のコードの中にコメントしてあります。

色のコードは

www.colordic.org

などが非常に参考になります。

まとめ

以上がカスタマイズになります。トグルメニューを入れたいけど、タイトル下に広告も入れたい!という方の参考になればと思います。

質問や設置代行・ブログカスタム依頼などは、お問い合わせ - Yukihy Lifeよりお願いいたします!

www.yukihy.com