FOCUS

はてなブログテーマ"Focus"のカスタマイズやあれこれ

Focusでグローバルナビを追加する方法

f:id:ganapati55:20171011145040j:plain

グローバルナビを設定する方法

Focusではベースとなったテーマ"SOHO"のCSSの多くを引き継いでおり、SOHOで案内しているグローバルナビゲーションの設置方法をそのままお使いいただけます。

メニューのサンプル

PC・タブレット表示

f:id:ganapati55:20171023210428p:plain

スマホ表示

f:id:ganapati55:20171023210440p:plain

① URLとタイトルを決める

まずはナビゲーションに設定したいURLとそのメニュータイトルを決めます。

※一般的にはPRしたいカテゴリページのURLを使用することが多いようです。はてなブログPro版を使用している人は固定ページをいくつか作ってそのURLを使っても良いです。

②以下のサイトからコードを生成する。

www.notitle-weblog.com

③メニューのコードをヘッダタイトル下にコピペする

以下の画像を参考にヘッダ部分の「タイトル下」にコピペしてください。(記事上・記事下)ではありません。

f:id:ganapati55:20171023205727p:plain

※デモサイトのコード事例

以下のコードを参考に、URLやテキストを入れ替えても問題ありません。

<style>
@media screen and (max-width: 767px){#container{padding-top: 40px;}.globalheader-off #container,.globalheader-off.header-image-enable #container,.globalheader-off.header-image-only #container {padding-top: 40px;}#container{padding-top: 0;}}
</style>
<div class="sh-global-nav-wrap">
<div class="sh-mobile-head" id="js-mobile-head">
<div class="sh-mobile-head-toggle-button" id="js-nav-toggle-btn">
<span></span><span></span><span>menu</span>
</div>
<div class="sh-site-name" id="js-sitename">
<p><a href="http://focus3.hatenablog.com/">Focus</a></p>
</div>
<div class="hatena-module search-box">
<div class="sh-search-button" id="js-search-toggle">
<i class="blogicon-search"></i>
</div>
<div class="hatena-module-body sh-search-module" id="js-search-body">
<form class="search-form" name="search" role="search" action="http://focus3.hatenablog.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>
</div>
</div>
</div>
<nav class="sh-global-nav" id="js-nav-toggle">
<ul class="sh-global-nav-list">
<li class="sh-global-nav-item has-child">
<a href="http://focus3.hatenablog.com/#1">Menu1</a>
<ul class="sh-global-nav-children">
<li>
<a href="http://focus3.hatenablog.com/#1">Menu1-1</a>
</li>
<li>
<a href="http://focus3.hatenablog.com/#1">Menu1-2</a>
</li>
<li>
<a href="http://focus3.hatenablog.com/#1">Menu1-3</a>
</li>
</ul>
</li>
<li class="sh-global-nav-item">
<a href="http://focus3.hatenablog.com/#2">Menu2</a>
</li>
<li class="sh-global-nav-item">
<a href="http://focus3.hatenablog.com/#3">Menu3</a>
</li>
<li class="sh-global-nav-item">
<a href="http://focus3.hatenablog.com/#4">Menu4</a>
</li>
<li class="sh-global-nav-item">
<a href="http://focus3.hatenablog.com/#5">Menu5</a>
</li>
</ul>
</nav>
</div>
<div class="sh-black-back" id="js-close-nav"></div>
<!-- グローバルナビのHTMLここまで -->

④フッタHTMLエリアに上記サイトからもしくは以下のコードからコピペする

以下の画像を参考にフッタ部分にJSコードをコピペしてください。


f:id:ganapati55:20171023205935p:plain

<!-- ⑥-1 グローバルナビのJS-->
<script>
// グローバルナビ(ヘッダーのメニュー)のJavaScript
(function(){
  // メニューを表示非表示
  var navToggleBtn = document.getElementById('js-nav-toggle-btn');
  var navBody = document.getElementById('js-nav-toggle');
  var mobileHeader = document.getElementById('js-mobile-head');
  var blackBack = document.getElementById('js-close-nav');
  var container = document.getElementById('container-inner');
  // classを操作したい要素たちをまとめる
  var elemObj = [navToggleBtn,navBody,blackBack,container,mobileHeader];
  navToggleBtn.addEventListener('click',function(){
    if(container.classList.contains('is-open')) {
      removeClassOpen();
    } else {
      addClassOpen();
    }
  });
  blackBack.addEventListener('click',function(){
    removeClassOpen();
  });
  var frameTime = 1000 / 60;
  var timer = false;
  var winWidth;

  function scrollEvent(){
    // スクロールイベントが多発しすぎないように間引く
    if(timer!==false){
      clearTimeout(timer);
    }
    timer = setTimeout(function(){
      winWidth = window.outerWidth;
      if(winWidth>768) {
        removeClassOpen();
      } else {
        showTitle();
      }
    }, frameTime);
  }
  window.addEventListener('resize',function(){
    scrollEvent();
  });
  window.addEventListener('scroll',function(){
    scrollEvent();
  });
  var title = document.getElementById('title');
  var siteName = document.getElementById('js-sitename');
  function showTitle(){
    if(siteName === null) return;
    var titleRect = title.getBoundingClientRect();
    var scrollTop = window.pageYOffset;
    var offsetTop = titleRect.top + scrollTop;
    if(offsetTop+100<scrollTop){
      siteName.classList.add('is-show');
    } else {
      siteName.classList.remove('is-show');
    }
  }
  showTitle();

  function removeClassOpen(){
    for(var i=0;i<elemObj.length;i++){
      elemObj[i].classList.remove('is-open');
    }
    navToggleBtn.classList.add('is-close');
  }
  function addClassOpen(){
    for(var i=0;i<elemObj.length;i++){
      elemObj[i].classList.add('is-open');
    }
    navToggleBtn.classList.remove('is-close');
  }
  // 検索ボックスを表示・非表示
  var toggleBtn = document.getElementById('js-search-toggle');
  var searchBody = document.getElementById('js-search-body');
  toggleBtn.addEventListener('click',function(){
    if(searchBody.classList.contains('is-open')) {
      searchBody.classList.remove('is-open');
    } else {
      searchBody.classList.add('is-open');
    }
  });
}());
</script>

既知の問題(ファーストリリース時点)

3カラム表示時にグローバルメニューの下層部分へマウスをホバーさせたときに2項目目以降でホバーが解除される問題が存在しています。

メニューに下層を使用しない場合や2カラム・1カラム表示時は特に問題はありません。