Home
Menu
Side
Twitter
Top
ホーム / Blog | QooQ | ブログカスタマイズ |

【 QooQ 1カラム化まとめ 】 1カラムデザインカスタマイズ完成しました！

2020/11/27

Blog QooQ ブログカスタマイズ

QooQ を１カラム化したときに行ったカスタマイズのまとめになります。

１カラムデザインにもメリット、デメリットはありますが、個人的にはメリットが優っていると思っています。

是非、１カラム化してみてください。

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

ようやく QooQ の１カラム化するためのピース（ カスタマイズ ）が揃ったので、満を持して１カラム化してみました！

個人的には理想に近いデザインが完成できて満足しています。

ここでは１カラム化するときに気にした点や、１カラム化するとき、今まで紹介してきたカスタマイズ＋αをしたので紹介したいと思います。

是非、皆さんも１カラム化に挑戦してみてください！

とは言え、ここで紹介しているカスタマイズ例は、１カラム化しなくても使えるものばかりだと思います。

自分のブログをカスタマイズするときの、参考になれば幸いです。

１カラムデザインのメリット

１カラムデザインはとにかく記事が読みやすいことがメリットだと思います。

ユーザビリティの観点から言えば、１カラムデザインにしない理由はありませんよね。

1カラムのメリットは記事が読みやすいことイメージ

こんな説明をしていてあれですが、個人的には２カラムデザインが読みづらいと思ったことはありません。３カラムは…？ですが。

ただ一つ言えることは、サイドバーがあってもそちらを気にすることが少ないという点です。

この点から私は「 サイドバーがあっても無くても変わらない 」＝「１カラムデザインにしよう」ということになりました。

１カラムデザインのデメリット

２カラムデザインのように、その他情報を表示させないため、直帰率が高くなる可能性があります。

当然と言えば当然ですよね。

でもこれってメリットのときお伝えした通り、個人的にはデメリットに当たらないと考えています。

なぜなら個人的感想ですが、サイドバーがあってもそちらを気にしないから。

もちろん Google アナリティクスなどで、検証をしているわけではありません。

ただの想像なので、もしかしたら圧倒的に直帰率が上がってしまうかもしれません。

それでもブログなんて自己満な世界ですし、どうせならシンプルでかっこいいやつにしようと思ったのが私です。

空いたスペースを有効活用

直帰率が気になる方は、１カラムデザインにしたことにより空いたスペースに、読んでほしいリンク先などを設置するのはどうでしょうか。

少しは改善されるかもしれませんし、単純な２カラムのデザインよりも、ごちゃごちゃしないように調整しやすいと思います。

個人的１カラムデザインこだわりポイント

１カラムデザインは、２カラムデザインより横をうまく使えるようになります。

そこで PC 画面で表示したときはなるべく縦方向に伸びないようにし、スクロール量を減らすことにこだわりました。

もちろん個別記事ページはそんなこと不可能ですｗ

それにカスタマイズするにつれ、どんどん縦に伸びてしまうのは仕方ないかなって思ってます。

なるべく、１画面に収まるをモットーに考えている感じですね。

QooQ １カラム化まとめ

画面左側に縦型アイコンメニューバー設置

１カラムとはいえ、邪魔にならないアイコンが並んでいるくらいならいいと思い、左型に縦型のメニューバーを設置しました。

左側固定にしてありますが、記事を読んでいても気にならないかな？と思います。

サイドバーを隠して実装

私はサイドバーを消すことに抵抗があったため、１カラム化に踏み切ることができませんでした。

しかしサイドバーを消すのではなく、サイドバーを隠しておくという考え方を知ったおかげで、その一歩が踏み出せました！

ナビゲーションバーとの干渉を調整

このあと紹介するオリジナルのナビゲーションバーとサイドバーが、ボタンを押すことで干渉してしまうことがありました。

そこでサイドバーボタンを押すと、ナビゲーションバーが閉じるプログラムを追加しました。


  <!-- サイドバー表示/非表示 -->
  <script>
  $(function(){
    //ナビゲーションバーボタン対応
    $('#side-button').click(function(){
      $('#sub-content,#side-button-back').toggleClass('open');
      $('#top-navi').removeClass('open');
    });
    $('#side-button-back,#menu-wrapper').click(function(){
      $('#sub-content,#side-button-back').removeClass('open');
    });
  });
  </script>

オリジナルのナビゲーションバー

QooQ に実装されているナビゲーションバーを撤去し、オリジナルのナビゲーションバーを設置しました。

２カラムデザインでも使いやすい、シンプルなデザインになっています。

サイドバーとの干渉を調整

サイドバーのところで記載した通り、こちらもナビゲーションバーボタンを押すと、サイドバーが閉じるプログラムを追加しました。


  <!-- ナビゲーションバー -->
  <script>
  $(function() {
    function slideMenu() {
      var activeState = $("#menu-container .menu-list").hasClass("active");
      $("#menu-container .menu-list").animate({right: activeState ? "0%" : "-100%"}, 400);
    }
    //ナビメニュー開閉
    $("#menu-wrapper,.menu-back").click(function(event) {
      event.stopPropagation();
      $("#hamburger-menu").toggleClass("open");
      $("#menu-container .menu-list,.menu-back").toggleClass("active");
      slideMenu();
      $("body").toggleClass("overflow-hidden");
    });
    //サイド用のボタンをクリックしたとき、ナビゲーションバー閉
    $("#side-button").click(function(event) {
      event.stopPropagation();
      $("#hamburger-menu").removeClass("open");
      $("#menu-container .menu-list,.menu-back").removeClass("active");
      slideMenu();
      $("body").removeClass("overflow-hidden");
    });
    //子ナビ
    $(".menu-list").find(".accordion-toggle").click(function() {
      $(this).children('ul').toggleClass("open").slideToggle("fast");
      $(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
      $(".menu-list .accordion-content").not($(this).children('ul')).slideUp("fast").removeClass("open");
      $(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
    });
    //マウスカーソルがナビを離れたとき、メニュー閉
    $('#menu-container').mouseleave(function(){
      $(".menu-list .accordion-content").not($(this).children('ul')).slideUp("fast").removeClass("open");
      $(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
    });
  }); // jQuery load
  </script>

ナビゲーションバーをボタンで表示

以前は PC 画面表示で、ナビゲーションバーを画面上部固定していました。

今回、左側に縦型アイコンメニューバーを追加したため、PC 画面表示でもナビゲーションバーを隠しておき、ボタンクリックで表示させるように調整しました。

ナビゲーションバー_PC表示_ボタンで表示させるイメージ

これは「 サイドバーを隠して実装する 」方法を応用した形になります。

以下に Script を参考程度に記載します。


  <!-- PC表示ナビゲーションバー表示/非表示 -->
<script>
$(function(){
  $('#top-navi-button').click(function(){
    $('#top-navi').toggleClass('open');
    $('#sub-content,#side-button-back').removeClass('open');
  });
});
</script>

CSS の調整やボタンの設置など、実装する場合は他にいろいろやることありますよ！

ナビゲーションバーはスクロールで非表示

PC 画面で表示したナビゲーションバーは、スクロールを検知すると非表示になるように調整しました。

以下の記事の応用になります。

以下、Script を参考程度に記載します。


  <!-- PC表示ナビゲーションバー　スクロールで非表示 -->
  <script>
  var startPos = 0,winScrollTop = 0;
  $(window).on('scroll',function(){
    winScrollTop = $(this).scrollTop();
    if (winScrollTop >= startPos) {
      $('#top-navi').removeClass('open');
    } else {
      $('#top-navi').removeClass('open');
    }
    startPos = winScrollTop;
  });
  </script>

さいごに

とりあえず、１カラムデザインはこんなものでしょうか。

２カラムのときより、シンプルで読みやすいブログになっていたら嬉しいです。

ある程度は「 私的理想の形 」になってきたので、今後は小さい調整をしつつ、他のことも書いていけたらと思っています。

雑記ブログのならではの「多ジャンルに対応したブログデザイン」を目指してカスタマイズを進めていきます！

QooQ