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

WAROCOM

Apple製品を中心にアプリ・Web・ネット・ガジェット・クレジットカードを紹介しています

【はてなブログ】スマホ版にクールなトグルメニューを設置してみた【カスタマイズ】

ブログ運営 ブログ運営-カスタマイズ

スポンサーリンク

まいど!

今までグローバルメニューを設置してたんですが、もう少しシンプルにしたいと思っていたので、トグルメニューにしてみました!

 

クールなトグルメニュー

MENUを押すと下にバッーて出るやつ
 
f:id:warorince:20150916194736j:image 
 
f:id:warorince:20150916194833j:image
 
これこれ、めちゃくちゃカッコよくないっすか?
 
参考にさせて頂いたゆきひーさんのブログ
 
 
これでも十分かっこいいんだけど、なんか...その...項目がありすぎて下に行きすぎちゃうのが...なんか...気になるっていうか...
 
 
なので、ゆきひーさんのブログにやり方が書いてある「2分割」を試すことに!
 
ただ、コードをどこに入れるか書いてなかったので自分で色々と試行錯誤した結果
 
f:id:warorince:20150916195539j:image
 
は?なにこれ?イミワカンナイ
 
f:id:warorince:20150916195612j:image
 
う、うん
マシにはなったけどちょっと左に寄りすぎちゃう?
 
f:id:warorince:20150916195723j:image
 
・・・
 
ダメだ。俺には才能の欠片もない。
 
 
これ以上やっても仕方ないので
 
もう恥を忍んでゆきひーさんに直接聞いたろっ!
 
 
って事でTwitterからアクションをかけてみることに!
 
f:id:warorince:20150916201726j:image
 
そしたら、そっこー返信してくれました
 
f:id:warorince:20150916200400j:image
 
しかも、挨拶してすぐに質問した厚かましい何処の馬の骨かも知らない自分に親切に!
 
んで、色々と質問して、教えて頂いた通りにやっても全く上手くいかない自分にゆきひーさんが遂に痺れを切らして...
 
f:id:warorince:20150916200616j:image
 
なにこれ?
この方めちゃくちゃ良い人過ぎませんか?
 
こんな変なアイコンのクソ野郎にDM(ダイレクトメッセージ)でワントゥーマンで教えてくれるってやばくない?
 
もしかして、後でお金請求されるとか?
ブログの新手の詐欺?
 
とか一切そんな事考えるはずもなく、DMさせて頂きました
 
んで、アホで無能な自分にあれこれ身体を使って教えて頂いた結果...
 
 
f:id:warorince:20150916201132j:image
 
 
うわあああああああ
 
なにこれえええええ
 
めっちゃクゥーーールゥ!
 
 
本当にありがとうございましたm(_ _)m
 
 
 

教えて頂いたコードはこちら

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<li><a href='ここにURL'>TOP</a></li>
<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>
</ul>

<style type="text/css">
#top-editarea{
 background: #e6e6fa;/*外側の背景*/
 text-align: right;/*MENUの文字の位置*/
}
#top-editarea .section{
 margin: 0;
 width: 100%;
}
.menu-toggle{
 color: #ffffff;/*MENUの文字色*/
 display: inline-block;
 padding: 5px;
 background: #3c404b;/*MENUの背景色*/
 margin: 5px;
 border-radius: 3px;
}
#menu {
 display: none;
 padding: 0;
 margin: 0;
}
#menu li{
 list-style-type: none;
 background: #e6e6fa;/*リストの背景色*/
 margin: 0 auto;
 background: #3c404b;/*項目の背景色*/
 width: 50%;
 float: left;
}
#menu li a {
 color: #ffffff;/*リストの文字色*/
 font-weight: bold;
 display: block;
 height: 40px;
 line-height: 40px;
 text-align: center;/*リストの文字の位置*/
 border: 1px solid white;
}
</style>

<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();
    });
});
</script>

 
このコードを
デザイン→スマホ→ヘッダ→タイトル下にコピペ
 
色とかは自分の好きなように変更できます
 
 
つか、改めて見てもカッコいいよね
 
これでさらにブログのモチベーションアップ!
 
 
本当にゆきひーさんありがとうございました!
 
 
※お金は請求されなかったぜ

Copyright© WAROCOM All Rights Reserved.