それは仕様です。

それは仕様です。

「それは仕様です。」は雑記ブログです! 主にIT関連・考えたこと・勉強したことをここに残しています。 「Re:ゼロから言語の再勉強中。」

それは仕様です。

はてなブログにBootStrapを使ってグローバルナビゲーションバーを設置するよ!

f:id:yantzn:20170415232824j:plain

どうも、やん(@yan_tzn)です。

はてなブログを始めた当初に作成したナビゲーションメニューが

あまりにもしょぼいのでBootStrapのグローバルナビゲーションに変更したいと思います!

今回は、その手順を説明していきます!

この記事を読み終わって出来る上がるもの

今までのナビゲーションメニュー

f:id:yantzn:20170312011435p:plain

対応後のPC版ナビゲーションメニュー

f:id:yantzn:20170415233151p:plain

対応後のスマホ・タブレット版ナビゲーションメニュー

f:id:yantzn:20170415233420p:plain

どうですか?今までのに比べて全然いいでしょ!

どうやって作るか説明していきますね!

BootStrapの導入手順

jQuery(JavaScriptのライブラリ)を導入する

BootStrapを使用するには、jQueryを読み込む必要があります。

Hosted Libraries  |  Hosted Libraries  |  Google DevelopersのjQueryを使用します。

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

f:id:yantzn:20170414020702p:plain

コピーしたコードを「設定>詳細設定にあるheadに要素を追加」に追加して完了です!

MaxCDNのBootstrapを使用する

Quick Start · BootstrapCDN by MaxCDNのBootStrapを使用します。

【CSS】

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

f:id:yantzn:20170414022353p:plain

こちらもコピーしたコードを「設定>詳細設定にあるheadに要素を追加」に追加して完了です!

【javascript】

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

f:id:yantzn:20170416001422p:plainf:id:yantzn:20170416001421p:plain

コピーしたコードを「デザイン>カスタマイズ>フッター」に追加して完了です!

jQueryとBootStrapの導入ってすごい簡単!

カスタマイズ

これでBootStrapを使う準備ができているので、グローバルナビゲーションを作成していきます。 BootStrapのサイトに用意されたHTMLを貼り付けるだけでも形は出来上がりますが、 今回は、僕のコードを紹介したいと思います。

BootStrapのサイトのコードを利用した方は下のリンクからどうぞ!

getbootstrap.com

HTML

実際の僕のコードです!

このコードをデザイン>タイトル下に貼り付けるだけでOKです。

リストの中・URLなどを自分用に変更してくださいね。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;">
        <ul class="nav navbar-nav">
            <!-- トップページ -->
            <li><a href="">トップページ</a></li>
            <!-- プロフィール -->
            <li><a href="">プロフィール</a></li>
            <!-- 技術ブログ ドロップダウン -->
            <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">技術プログ<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">HTML・CSS</a></li>
                    <li><a href=">セキュリティ</a></li>
                  <li><a href=">Redmine</a></li>
                </ul>
            </li>
            <!-- 日常ブログ -->
            <li><a href="">日常ブログ</a></li>          
            <!-- 自作PCブログ -->
            <li><a href="">自作PC</a></li>
            <!-- ブログ運営-->
            <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">ブログ運営<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="">カスタマイズ</a></li>
                </ul>
            </li>         
        </ul>          
        <!-- 右寄せになる部分 -->
        <ul class="nav navbar-nav navbar-right">
            <!-- プライバシーポリシー -->
            <li><a href="">ポリシー・免責事項</a></li>
            <!-- お問い合わせページ -->
            <li><a href="">お問い合わせ</a></li>
            <li>
                <form class="search-form" role="search" action="http://www.yantzn.com/search" method="get">
                    <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">
                    <input type="submit" value="検索" class="search-module-button">
                </form>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
スマホ用トグルボタン

この部分がスマホ表示のときのハンバーガーメニューを表示させるための3本線になります。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>
右寄せのメニューを追加する

サイドバーにあった記事検索ですが、いまいちサイドバーにあるのが邪魔臭かったので 思い切ってナビゲーションに表示してみます。

<!-- 右寄せになる部分 -->
<ul class="nav navbar-nav navbar-right">
  <!-- プライバシーポリシー -->
  <li><a href="">ポリシー・免責事項</a></li>
  <!-- お問い合わせページ -->
 <li><a href="">お問い合わせ</a></li>
 <li>
  <form class="search-form" role="search" action="http://www.yantzn.com/search" method="get">
   <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">
   <input type="submit" value="検索" class="search-module-button">
  </form>
 </li>
</ul>
ドロップダウンメニューの作成

このような指定することでドロップダウンメニューになります。

<li class="dropdown">
 <a href="" class="dropdown-toggle" data-toggle="dropdown">技術プログ<span class="caret"></span></a>
 <ul class="dropdown-menu">
  <li><a href="#">HTML・CSS</a></li>
    <li><a href=">セキュリティ</a></li>
  <li><a href=">Redmine</a></li>
 </ul>
</li>

CSS

BootStrapのCSSの書き換え

デザイン>タイトル下に貼り付けます。 デザインCSSに貼り付けてしますと、BootStrapより早く読み込まれる関係上CSSが効きません。

そのため、BootStrapが読み込まれた後に、CSSを適用したいのでタイトル下に記述します。

<style>
/* ----------------------------------------
* BootStrap
---------------------------------------- */
/*ナビゲーションの背景色*/
.navbar.navbar-default,nav{
 background: #4b525F;
 margin-bottom: 0px;
}

/*リストの文字色・背景色*/
.navbar-default .navbar-nav>li>a,
.dropdown-menu>li>a{
    color: #ffffff;
}

/*リストのホバー時の文字色・背景色*/
.navbar-default .navbar-nav>li>a:hover,
.dropdown .dropdown-menu>li>a:hover{
 color: #3dbbb4;
 background:#333333;
 text-decoration: none;
 transition: all .5s;
}

 /*リストの表示領域*/   
.container-fluid {
    padding-right: 50px;
    padding-left: 50px;
}

/*ドロップメニューの背景色*/
.dropdown-menu {
    background-color: #333333;
}

/*スマホ・タブレット*/
@media screen and (max-width: 767px) {


 .navbar-default .navbar-nav .open .dropdown-menu>li>a {
     color: #ffffff;
 }

 .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
     color: #3dbbb4;
 }

 .navbar-nav .open .dropdown-menu>li>a {
     line-height: 20px;
 }

 .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
     padding: 0 0px 10px 120px;
 }

}


</style>
検索ボックスの設定

ナビゲーションに配置した検索ボックスの設定は、こんな感じです。

検索結果表示のデザインが気に入らなかったので、検索結果を非表示にしました。

/* ----------------------------------------
* ALL
---------------------------------------- */

/*検索結果非表示*/
.search-result{
    display:none;
}


/* ----------------------------------------
* グローバルナビゲーション
---------------------------------------- */

/*検索ボックスの位置*/
.search-form {
    position: relative;
    height: 50px;
    padding-top: 0;
    margin-top: 5px;
}

/*検索ボックスの検索ボタンの位置*/
.search-module-button {
    top: 0px;
    right: 60px;
}
/*検索ボックスの入力テキスト位置*/
.search-module-input {
    padding: 0px 40px 0 40px;
}

/* ----------------------------------------
* レスポンシブ
---------------------------------------- */

/* 480px - 760px用(タブレット/スマートフォン用)の記述 */
@media screen and (min-width: 480px) and (max-width: 760px)  {
    .nav>li {
     width: 200px;
    }
   .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
        width:100%;
    }
    .navbar-nav>li {
        float: left;
        text-align:center;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
    
    .search-module-input {
     padding: 0 0 0 10px;
    }
    
    .search-module-button {
      top: 0px;
      right: 30px;
    }
 }
 
 /* 479px以下用(スマートフォン用)の記述 */
@media screen and (max-width: 479px) {

 .navbar {
        border-radius: 0;
    }

    .navbar-nav {
        float: none;
        width: 100%;
        margin: 10px auto;
    }

    .navbar-nav>li {
        text-align: center;
        float: left;
        width: 100%;
    }

    .search-module-input {
     padding: 0 0 0 10px;
    }
}

Javascript

スクロールしたときに、.navbar-fixed-topを指定することで固定します。

また、同時にopacityで半透明にします。

<script>
$(function (){
     //グローバルナビゲーションの固定
      var $gnav = $('nav');
      $(window).scroll(function() {
        if ($(window).scrollTop() > 50) {
          $gnav.addClass('navbar-fixed-top');
          $gnav.css("opacity",'0.9');
        } else {
          $gnav.removeClass('navbar-fixed-top');
          $gnav.css("opacity",'1');
        }
      });
});
</script>

どうやらナビゲーションの固定は、はてなブログPro向けのみOKらしいので気をつけてください。

レスポンシブデザインを有効にする

f:id:yantzn:20170416044238p:plain

ここまで出来ればあとは、レスポンシブデザインを有効にすればスマホの表示が完成図のようになります。

まとめ

いかがだったでしょうか。

今回は、jQuery・BootStrapの導入とグローバルナビゲーションの作り方でした。

はてなブログProでない方もBootStrapを使用することで、

はてなブログProユーザ顔負けのメニューを作成することが出来るのでおすすめです。

是非、使ってみてください。

最後まで読んで頂きありがとうございました!

Twitterフォロー・読者登録募集中です!