デザインテーマ「SOHO」にグローバルナビ(タイトル下のメニュー)を設置

スポンサードリンク

f:id:shiromatakumi:20170707201731j:plain

デザインテーマ「SOHO」のグローバルナビを簡単に生成できるツールです。グローバルナビというのは、ヘッダーの下にあるメニュー。

はてなブログにグローバルナビを生成する機能がないので、こちらのページでコードを生成してコピペして下さい。

親カテゴリーや子カテゴリーの数はいくらでも増やすことができます。

　

手順

入力欄を埋める

　↓

「コードを生成」をクリックする

　↓

2つのコードを指定の場所にコピペ

1.URLを入力（必須）

ブログのURLを入れてください（必須）

最後にスラッシュを入れるのを忘れないでください。

2.固定ヘッダーにブログ名を入れる場合、入力してください

f:id:shiromatakumi:20170704205130j:plain

　

スマホの時画面上に表示されるブログ名です。

上部に固定されるヘッダーにブログ名を入れる場合は入力してください。不要な場合は空欄でOKです。

3.ヘッダーに入れたいカテゴリーのURLとカテゴリー名を入れてください

ヘッダーに入れたいカテゴリーのURLとカテゴリー名を入れてください

　

ボタンをクリックして、親カテゴリーや子カテゴリーを自由に追加することができます。

親カテゴリー1

親カテゴリー1の子カテゴリーを追加・削除

以下に生成されるコードをヘッダー（タイトル下）にコピペしてください

以下のコードをフッターにコピペしてください。

<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>

以上です。

その他のカスタマイズ

デザインテーマ「SOHO」にフォローボタンを設置

デザインテーマ「SOHO」にシェアボタンを設置

デザインテーマ「SOHO」の英数字のフォントを変更する

デザインテーマ「SOHO」で、記事内の画像をカスタマイズ

スポンサードリンク