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

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

はてなブログのZENO-TEALjQueryとCSSを駆使して追加して見ました。

選んだテーマ

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

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

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

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

jQuery読み込み

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

jQuery読み込み

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

設定→詳細設定→検索エンジン最適化へ移動

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

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

CSS編集

カスタマイズページから

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

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

#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;
}

}

アイコンを実装

次にフッター

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

次にヘッダを選択。

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

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

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

 アイコンを変えたい場合

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

完成

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

モバイル

パソコン

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

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

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

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

それではCyaaaaaaaaaa!!!!

sgw

フロントエンド

TwitterFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。