Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

【コピペOK】jQueryでZENO-TEALのテーマにモバイル用ハンバーガーメニューを追加する

f:id:sgwshu:20180126013124j:plain

こんにちは。年も明けたことなのでブログのデザインを変更してみたところモバイルでの機能が付いてなかったのでjQueryとCSSを駆使して追加して見ました。

 

選んだテーマ

今回選んだテーマはカード型と呼ぶのでしょうか?ZENO-TEALです。

ホームページで一気にたくさん記事が見れるとこが良いですね。

いい感じでモバイルにも対応してていろいろしなくて済むと思ったけどモバイルだとメニューが長くて文字が折り返しちゃってたのでメニューをハンバーガーメニューにしようと思います。

ちなみに下記のコードは他のテーマでは動作しないので注意。

jQuery読み込み

今回はjQuery使っていきます。

jQuery読み込み

はてブのダッシュボードから

設定→詳細設定→検索エンジン最適化へ移動f:id:sgwshu:20180123024823p:plainf:id:sgwshu:20180123024943p:plain

↑の場所に↓のコードをコピペ。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

CSS編集

カスタマイズページから

デザイン→カスタマイズ→デザインCSSへ移動

f:id:sgwshu:20180123065652p:plain

f:id:sgwshu:20180123065703p:plain

f:id:sgwshu:20180123065717p:plain

ここに下のコードを貼り付けます。

#zeno-menu{
background:white;
display:block;
}

.zeno-menu li a{
color:black;
}

.zeno-menu li a:hover{
background: #FFFFCC;
}

#blog-title #title a{
transition:color 0.5s linear;
color:black;
}

#blog-title #title a:hover{
color:white;
}

.fa{
float:right;
visibility: hidden;
}


#clear{
clear:both;
}

pre{
margin: 0 0 1.5em 0;
padding: 1em;
border: 4px solid #999;
background: #333;
color: #eee
}

@media screen and (max-width: 480px){

#blog-title #title a{
font-size:1em;
}


#blog-title{
height:100px;
}

.zeno-menu{
display:none;
}

.fa{
margin-right:5px;
cursor : pointer;
visibility:visible;
}

}

アイコンを実装

次にフッター

f:id:sgwshu:20180124020105p:plain

 <script>
$(function(){
$(".fa").on('click', function(){
$(".zeno-menu").toggle("slow");
});
});
</script>

次にヘッダを選択。

f:id:sgwshu:20180124021844p:plain

そして1番上にこのコードを貼り付けます。

画像ではdiv id = "clear"を丸をつけ忘れてますが↓のコードをしっかりコピペして下さい。

<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
<div id = "clear"></div>

 アイコンを変えたい場合

fontawesomeを使ってるのでこちらのサイトへ行きます。

完成

もし成功してたらこんな感じになるはず。

モバイル

f:id:sgwshu:20180126012224p:plain

パソコン

f:id:sgwshu:20180126012353p:plain

この記事は自分でやったあとにあと書きで書いたものなので間違いがあるかもしれません。もし、反応しない等があったらコメント下さい。

ちなみにブラウザを小さくしてメニューを隠した状態でブラウザのサイズを再度大きくするとメニューが消えると言うバグが残りますが一般的に記事を読む人はそう言う作業をするとは思わないのでまた次回直します(笑)

 

idとclass探してデザインの仕様を見つけるのがめんどくさい(笑)

自分でテーマを作って見たくなった件。

それではCyaaaaaaaaaa!!!!