Home
Menu
Side
Twitter
Top
ホーム / Blog | Blogger | QooQ |

【 QooQ カスタマイズ 】 サイドバーをボタンで開閉できるようにする

2020/10/14

Blog Blogger QooQ

QooQ のサイドバーを通常は隠しておき、ボタンを押すことで表示させるカスタマイズ方法です。

ブログデザインを２カラムから１カラムにしたいときなど、使用用途はいろいろ考えられます。

こんにちは！HARU（ @HARU ）です。

今回は Blogger のテンプレートである QooQ のサイドバーを、通常は隠しておき、ボタンを押すことで表示させるようにするカスタマイズをします。

通常、QooQ は２カラムで構成されています。

最近、１カラム化したい欲求が出てきていて、サイドバーを消さない方法はないかと思っていた矢先、先駆者がいらっしゃったのでやってみようと思った次第です。

１カラム化したときにも役立ちますが、PC 表示時は２カラム。スマホ表示時は１カラム + ボタンで表示させるみたいなこともできると思います。

今回は１カラム化前提のため、上記のようなカスタマイズは考えていません。

要望があれば、やってみようかなって感じなので、コメントください。

注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の記事を参考にしてください。

参考

カスタマイズイメージ

通常２カラム構成である QooQ のサイドバーを隠しておき（ 非表示 ）、ボタンを押すことで表示させるようにします。

もう一度ボタンを押す、もしくは黒背景部分を押すことで非表示になるようにしました。

変更前 変更後

QooQ サイドバーカスタマイズ前イメージ

QooQ サイドバーカスタマイズ後イメージ

JQuery の導入

JQuery を導入していない場合、以下の記事を参考に導入してください。

JQuery について

Font Awesome の導入

Font Awesome を導入していない場合、以下の記事を参考に導入してください。

Font Awesome について

HTML 編集

以下のコードを</body>の直上に記述します。


  <!-- サイドバーメニュー表示ボタン -->
  <div id='side-button'><span /></div>
  <div id='side-button-back'/>

サイドバーを表示させるためのボタンのコードになります。

Script 追記

以下の Script を</body>の直上に記述します。


  <!--　サイドバー表示/非表示　-->
  <script>
  $(function(){
      $('#side-button').click(function(){
          $('#side-button,#sub-content,#side-button-back').toggleClass('open');
      });
      $('#side-button-back').click(function(){
          $('#side-button,#sub-content,#side-button-back').removeClass('open');
      });
  });
  </script>

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。


  /*  サイドバーメニュー表示ボタン  */
  #side-button{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 400px;
    background: #3f98ef;
    opacity: 0.6;
    z-index: 1002; /*  サイドバーよりも上へ  */
  }
  #side-button span{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }
  #side-button span::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f0c9';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }
  /*  背景を黒くする  */
  #side-button-back.open{
    background-color: #000000;
    opacity: 0.7;
    z-index: 1000;
    height: 100%;
    width: 100%;
    position: fixed;
    transition: all 1s ease;
    top: 0;
    left: 0;
  }
  /*  サイドバーメニュー非表示  */
  #sub-content {
    box-sizing:border-box;
    transition: all 0.3s;
    transform: translate(-100%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
  }
  #sub-content.open {
    transform: translate(0) !important;
    height:100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #sub-content {
    margin: 0 !important;
    width: 320px !important;
  }
  #sub-content .widget{
    margin:auto!important;
  }

追加する CSS は簡単に実装できるように#sub-content の CSS を無理やり調整（!important）しています。

なるべく使わないほうがいいので、CSS を調整できる方は各自で調整してください。

さいごに

QooQ １カラム化に向けて「サイドバーのカスタマイズ」でした！

パッと見あとは、main-contentの位置ずれを解消すれば、１カラム化できそうです。

１カラム化するにあたって、私はサイドバーを使わない方針も考えていますが、使いたい方はこういった方法は良さそうですね。

ボタンの位置やサイドバーの広さなど、いろいろ調整して自分好みのカスタマイズをしてみてください。

QooQ