アゴ乗せ日記

適当なポジティブ日記

【はてなブログ】スマホページにヘッダーメニューを追加して見やすいサイト作りを目指す

はろー

このサイトのスマホページを見ていてふと気づいたが、 カテゴリ別の一覧ページに飛ぶリンクが見当たらない。

育児や、技術系の記事が混在しているので、ナビゲーションがあった方が読者にとっては目的のページを見つけやすいと思った。そんなに読者はおらんが

思い立ったらすぐに行動

さっそく結果

f:id:agonosetaro:20200205105520p:plain

まだ簡易的だがサイトのロゴとハンバーガーメニューのあるヘッダーを追加した。

メニュー部分

ハンバーガーをクリックするとカテゴリ別一覧ページへのリンクが表示される。

f:id:agonosetaro:20200204224025p:plain

現状はまだ記事数も少ないのでメニューも少ないが、本田△風に言わしてもらえばこれは伸びしろしかないということだ。

修正内容

ちなみにこのブログは、はてなブログのpro版です。

やったこと

  • ヘッダの追加
  • ナビゲーションメニューの追加
  • スクリプトの追加(メニューの表示/非表示)

HTMLはヘッダ部分とナビゲーション部分の2つを作ります。
そして最後にその2つをつなげるスクリプトを書いておしまいです。

それでは見ていきましょう。

ヘッダの追加

まずはヘッダを追加。
今回のヘッダとナビゲーションメニューのコードは デザイン > スマートフォン > ヘッダ > スマートフォン用にHTMLを設定する に追記していきます。

<!-- ヘッダ部分 -->
<div id="sp-header">
    <div class="top-title">
        <p class="top-description">適当ハッピーな</p>
        <h1><a href="https://www.agonose-nikki.com/"><img decoding="async" loading="lazy" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/agonosetaro/20200204/20200204210500.png" alt="アゴ乗せ日記"></a></h1>
    </div>
    <div id="open-btn" class="menu-btn">
        <svg class="svg-icon" viewBox="0 0 20 20">
            <path fill="none" d="M3.314,4.8h13.372c0.41,0,0.743-0.333,0.743-0.743c0-0.41-0.333-0.743-0.743-0.743H3.314
              c-0.41,0-0.743,0.333-0.743,0.743C2.571,4.467,2.904,4.8,3.314,4.8z M16.686,15.2H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,15.2,16.686,15.2z M16.686,9.257H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,9.257,16.686,9.257z"></path>
        </svg>
    </div>
    <div id="close-btn" class="menu-btn">
        <svg class="svg-icon" viewBox="0 0 20 20">
            <path fill="none" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
        </svg>
    </div>
</div>

ヘッダ部分には タイトルハンバーガーメニューボタンクローズボタンの3要素のみ。

シンプルだと思います。

それぞれのボタンのアイコンはラクをしたかったのでSVGで表示させます。
こちらのサイトからハンバーガーメニューと✖︎のアイコンを選択して、表示されたコードをコピペしてます。

スタイルはこんな感じです。

<style>
  /* SVG使うのに必須 */
  .svg-icon {
    width: 1em;
    height: 1em;
  }
  .svg-icon path,
  .svg-icon polygon,
  .svg-icon rect {
    fill: #4691f6;
  }
  .svg-icon circle {
    stroke: #4691f6;
    stroke-width: 1;
  }
  /* 既存のはてなのヘッダと背景画像を非表示にする */
  #globalheader-container, .header-image-wrapper {
    display: none;    
  }
  /* 新規追加するヘッダのスペースを開けてあげる */
  #container {
    margin-top: 50px;
    padding-top: 0px;
  }
  #header {
    margin: 65px auto 15px !important;
  }
  #sp-header {
    position: fixed;
    height: 50px;
    top: 0;
    background: #555;
    color: #FFF;
    width: 100vw;
    left: 0;
    z-index: 1000;
  }
  .top-title {
    display: inline-block;
    width: calc(100% - 54px);
    height: 100%;
    vertical-align: top;  
  }
  .top-title .top-description {
    margin: 0;
    font-size: .6875rem;
    padding: 5px 10px 0;
  }
  .top-title h1 {
    height: auto;
    margin: -3px 10px 0;
    width: 170px;
  }
  .top-title h1 a img {
    border: none;
    display: block;
    height: auto;
    max-width: 100%;
  }
  /* 以下ボタン */
  #close-btn {
    display: none;
  }
  .menu-btn {
    cursor: pointer;
    height: 35px;
    position: relative;
    width: 35px;
    display: inline-block;
    margin-top: 10px;
  }
  .menu-btn .svg-icon {
    width: 2em;
    height: 2em;
  }
</style>

コメントにも記載してますが、スタイルのポイントは

  • SVG用のCSSを適用させる
  • 既存のはてなのヘッダと背景画像を非表示にさせる
  • 追加するヘッダのスペースを空けてあげる

ここまででどうなるか見てみましょう。

f:id:agonosetaro:20200205095907p:plain

無事に追加したヘッダが表示されています。
続けて、ハンバーガーメニューボタンを押した際に表示されるメニュー部分について実装していきましょう。

ナビゲーションメニューの追加

メニュー部分も比較的シンプルだと思います。

<!-- メニュー部分 -->
<nav class="menu-container">
  <div class="menu-page-list">
      <div>
         <h2 class="midashi">記事カテゴリで探す</h2>
      </div>
      <ul class="menu">
        <li class="menu-item">
            <a href="https://www.agonose-nikki.com/archive/category/%E8%82%B2%E5%85%90">
                <svg class="svg-icon" viewBox="0 0 20 20">
                <path fill="none" d="M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z"></path>
                </svg>
                育児
            </a>
        </li>
             <!-- liタグの繰り返しなので省略 -->
      </ul>
  </div>
</nav>

<li>タグの部分はカテゴリの数だけ追加していきます。 メニュー部分にもSVGでアイコンをつけてます。

<style>
.menu-container {
  display: none;
  margin: 0;
  position: fixed;
  top: 50px;
  left: 0;
  overflow-y: scroll;
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  z-index: 1000;
}
.menu-container .menu {
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-container .menu .menu-item {
  flex: 1;
  border-bottom: 1px solid #ccc;
}
.menu-container .menu .menu-item a {
  background: #fff;
  color: #333;
  display: inline-block;
  width: calc(100% - 50px);
  padding: 0.5em 0.4em;
  text-decoration: none;
}
.menu-page-list {
  margin: 20px 0;
  padding: 0 20px;
}
.midashi {
  border-bottom: 2px solid #555;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 10px 0;
  padding: 5px 0;
}
</style>

上記まで追記しても、まだボタンが有効になっていないのでメニューが表示されない状態です。 最後にスクリプトを追加して、メニューの表示/非表示を有効化させます。

スクリプトの追加(メニューの表示/非表示)

このコードだけ記述場所を変えます。
設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加 に以下を追記。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script type="text/javascript">
    $(document).ready( $ => {
      // ハンバーガーメニューボタンが押された時     
      $('#open-btn').on('click', ()=> {
        $('.menu-container').css('display', 'block')
        $('#close-btn').css('display', 'inline-block')
        $('#open-btn').css('display', 'none')
        scrollPosition = $(window).scrollTop()
        $('body').addClass('fixed').css({'top': -scrollPosition})
      })
      // クローズボタンが押された時
      $('#close-btn').on('click', ()=> {
        $('.menu-container').css('display', 'none')
        $('#close-btn').css('display', 'none')
        $('#open-btn').css('display', 'inline-block')
        $('body').removeClass('fixed').css({'top': 0});
        window.scrollTo( 0 , scrollPosition );
      })
    })
</script>

これでボタンクリックでメニューの表示/非表示が有効になったと思います。

f:id:agonosetaro:20200205105813p:plain

おわり

今後については、スマホページの見直しが完了次第レスポンシブ対応をやっていこうと思います。

以上!