晴耕雨読

現役の税理士が教えるお金の貯め方、増やし方のブログです!

MENU

【カスタマイズ】はてなブログにメニューバーを設置する方法

はてなブログを始めて2週間経ちました。

 

まだ使い方でわからないところもありますが、少しずつ慣れてきました・・・

 

 

なにか物足りないなと思ったら、メニューバー(ナビゲーションバー)がないのですね。

 

色々調べて試行錯誤しながら昨日メニューバーを設置してみました ↓

  

f:id:zeirishi-kondo:20190330152315p:plain

今日はその設置方法について、皆さんにお伝えしたいと思います。

 

参考にさせていただいたのは、こちらのブログです。

Yukihy Lifeさんありがとうございます。

www.yukihy.com

 

メニューバー設定手順

①デザインの選択

まずはデザインを選択します。

f:id:zeirishi-kondo:20190330202423p:plain

②カスタマイズの選択 

次にカスタマイズを選択します。

その後、ヘッダを選択します。

f:id:zeirishi-kondo:20190330202428p:plain

 ③HTMLの入力

次にタイトル下にHTMLを入力します。

コードは、次のYukihy Lifeさんのブログに書いてある次のコード1です。

f:id:zeirishi-kondo:20190330202501p:plain

コード1

 

  <span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
  <ul id='menu'>
  <div class="menu-inner">
  <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>
  </div>
  </ul>
   
  <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();
  });
  });
  $(window).resize(function(){
  var win = $(window).width();
  var p = 768;
  if(win > p){
  $("#menu").show();
  } else {
  $("#menu").hide();
  }
  });
  </script>

 

 ④CSSの入力

次に{ }デザインCSSのところにCSSを入力します。

コードは、次のYukihy Lifeさんのブログに書いてある次のコード2です。

f:id:zeirishi-kondo:20190330202503p:plain

 

コード2

 

  #menu {
  position: relative;
  width: 100%;
  padding-left: 0px;
  height: 40px;
  background: #343838;/*グローバルメニュー背景色*/
  }
  .menu-inner{
  width: 968px;
  margin: 0 auto;
  height: 40px;
  }
  #menu li {
  list-style-type: none;
  float: left;
  height: 40px;
  text-align: left;
  }
  #menu li a {
  padding-left: 15px;
  padding-right: 15px;
  display: block;
  color: #ffffff;/*グローバルメニュー文字色*/
  font-size: 80%;
  font-weight: bold;
  line-height: 40px;
  }
  #menu li:hover a {
  color: #00DFFC;
  background: #ffffff;
  transition: all .5s;
  }
   
  .menu-toggle{
  display: none;
  }
   
  /*パソコン1カラム*/
  @media screen and (max-width:968px){
  .menu-inner{
  width: 768px;
  }
  }
   
  /*タブレット*/
  @media screen and (max-width:768px){
  #top-editarea{
  height: initial;
  background: #343838;/*MENU背景色*/
  text-align: right;/*MENUの文字の位置*/
  width: 100%;
  }
  .menu-toggle{
  color: #ffffff;/*MENUの文字色*/
  display: inline-block;
  padding: 5px;
  margin: 3px;
  }
  #menu {
  width: 100%;
  display: none;
  height: initial;
  padding: 0;
  margin: 0;
   
  }
  .menu-inner{
  width: 100%;
  height: initial;
  position: static;
  margin: 0;
  }
  #menu li{
  float: none;
  height: 35px;
  width: 100%;
  list-style-type: none;
  background: #00DFFC;/*リスト文字の背景色*/
  margin: 0 auto;
  text-align: left;/*リストの文字の位置*/
  }
  #menu li a {
  height: initial;
  color: #343838;/*リスト文字色*/
  display: block;
  }
  #menu li:hover a{
  color: initial;
  background: initial;
  }
  }

 

⑤メニューバーのカスタマイズ

これだけだ入力しても、まだ未完成です。

次にメニューバーをカスタマイズしていきます。

 

具体的には、コード1で入力したHTMLのカテゴリー名を直したり、リンクのURLを入力したりします。

 

詳しくは、つなろっくさんのこちらのブログをご覧ください。

pea-nut.hatenablog.com

 つなろっくさんのブログのナビゲーションバーのカスタマイズをお読みください。

 

おそらくこの通りしたらカスタマイズできるかと思います。

 

注意事項

レスポンシブで携帯で見たときに上手く表示されない場合があります。

 

これはSSL化している場合に多いようで、おそらくコード1の12行目の

http://code.jquery.com/jquery-1.9.1.min.js"

が原因であると思います。

 

その場合には、

https://code.jquery.com/jquery-1.9.1.min.js"

とsを入れて修正してみてください。

 

おそらく上手く表示されるかと思います。

 

あとがき

今回作業時間は2時間くらいかかったでしょうか・・・

 

でも何とかうまく表示できました。

 

皆さんもうまく表示されましたか?

 

このように、はてなブログでもカスタマイズでメニューバーを設置することが可能です。

 

今回ブログを参考にしたYukihy Lifeさんとつなろっくさんには感謝しています。

 

皆さんも色々カスタマイズしてみてくださいね。では!!