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

【 QooQ カスタマイズ 】 画面左側に縦型のナビゲーションバーを設置する

2020/11/19

Blog QooQ ブログカスタマイズ

画面左側に縦型のナビゲーションバーを設置する方法になります。

上側や下側に固定するナビゲーションバーよりも、記事を読んでいるときの邪魔になりにくいと思います。

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

今回は、画面左側に縦型のナビゲーションバーの設置例を紹介します！

ナビゲーションバーは上部や下部に固定されるよりも、左側や右側に固定されることによって、記事を読むときの邪魔にならないのでは？と考えました。

個人的には QooQ を１カラム化するときに実装予定です。

１カラムデザインのメリットは記事を読みやすいことであるため、このカスタマイズにより、さらに読みやすくなればと思っています！

ただしスマホ画面では縦横比の関係上、横に設置することが困難なため、基本的には PC 画面での見え方カスタマイズです。

スマホ画面サイズでは、下部に固定するように調整します。

今回の記事ではあくまで例として設置の方法を紹介しています。

「〇〇なボタンを追加したい」などご要望があったら、できる範囲で追記しますのでコメントください。

注意

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

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

実装イメージ

画面の左側に縦向きのナビゲーションバーが表示されます。

またここでは、スマホ画面サイズでは下側に表示される CSS 例も紹介します。

PC 画面 スマホ画面

PC画面サイズから見る縦型ナビゲーションバーイメージ

スマホ画面サイズから見る縦型ナビゲーションバーイメージ

もちろん調整次第で、右側に設置することも可能です。

縦型の div ボックスを設置する

まずはナビゲーションバーの元になる div ボックスを設置します。

HTML 編集

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


<!-- 縦型ナビゲーションバー -->
<div id='button-list'>

</div>

なんてことはありません。ただの空箱です。

この中にコンテンツを追加していきます。

CSS 追記

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


#button-list {
  height: 100%;
  width: 60px;
  background-color: #333;
  position: fixed;
  left: 0;
  z-index: 30;
  font-size: 15px;
}

これでとりあえず、縦型の箱ができました。

左側に余白を作っておく

今回は左側にナビゲーションバーを設置するので、メインコンテンツなどが重ならないように調整しておきます。

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


.container {
  padding-left: 70px;
}

ホームボタンを追加する

例として縦型ナビゲーションバーにホームボタンを追加してみます。

アイコンとして Font Awesome を利用するので、実装していない方は以下を参考にしてください。

Font Awesome について

HTML 編集

先ほど<body>の直下に記述したコードを、以下のコードに置き換えます。

空箱にホームボタンを追加しただけ状態ですね。


<!-- 縦型ナビゲーションバー -->
<div id='button-list'>
  <!-- ホームボタン -->
  <!-- example に 自分のブログ URL を入力 -->
  <div id='home-button'><a ref='example'>Home</a></div>
</div>

CSS 追記

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


/*  ホームボタン  */
#home-button{
  width: 60px;
  height: 60px;
  background: #333;
  z-index: 30;
}
#home-button a{
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}
#home-button a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f015';
  font-size: 1.5em;
  color: #fff;
}

ボタンにホバーアニメーションを追加

ホバーアニメーションを追加したい場合、以下ような CSS を追記します。

他のアニメーションへ変更も可能ですよ。


#button-list a {
  transition: all 0.3s ease;
}
#button-list a:hover {
  opacity: .7;
}

スマホ画面サイズへの対応

冒頭で述べた通り、スマホ画面サイズでは左側に設置されたナビゲーションバーは邪魔になります。

非表示にしたり、画面下部に固定するようにしましょう。

スマホ画面サイズで非表示にする

非表示にする場合、以下の CSS を記述します。


@media ( max-width : 768px ) {
#button-list {
  display: none;
}
.container {
  padding-left: 0;
}
}

スマホ画面サイズで画面下部に固定する

画面下部に固定する場合、以下の CSS を記述します。


@media ( max-width : 768px ) {
#button-list {
  height: 60px;
  width: 100%;
  bottom: 0;
}
.container {
  padding-left: 0;
}
}

サイドバーボタンの設置（2021.07.08）

コメントで「 サイドバー表示ボタンの設置 」について質問があったため、簡単に設置例をご紹介します。

以下の記事をもとに、「 サイドバーを隠す 」カスタマイズをしてあることを前提に説明します。

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

Blogger のテンプレート QooQ のサイドバーを通常は隠しておき、ボタンを押すことで表示させるカスタマイズ方法です。ブログデザインを２カラムから１カラムにしたいときなど、使用用途はいろいろ考えられます。

HTML 編集

<div id='button-list'>を以下のように変更します。

ここでは「 ホームボタン 」と「 サイドバーボタン 」の２つを設置するものとします。


<!-- 縦型ナビゲーションバー -->
<div id='button-list'>
  <!-- ホームボタン -->
  <!-- example に 自分のブログ URL を入力 -->
  <div id='home-button'><a href='example'>Home</a></div>
  <!-- サイドバーメニュー表示ボタン（リスト） -->
  <div id='side-button'><span/>Side</div>
</div>
<!-- サイドバーメニュー表示時、背景黒 -->
<div id='side-button-back'/>

ここで肝心なことは、「 サイドバーメニュー表示時、背景黒 」をナビゲーションバー外に設置することです。

z-indexの調整時に、ナビゲーションバー内に設置されていると、調整できません。

HTML 削除

【 QooQ カスタマイズ 】 サイドバーをボタンで開閉できるようにするで記述した以下のコードを削除します。


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

CSS 変更

【 QooQ カスタマイズ 】 サイドバーをボタンで開閉できるようにするで記述した CSS を以下のものに変更します。

今回のデザインに合うように、調整してあります。


/*  サイドバーメニュー表示ボタン（リスト）  */
#side-button{
  background: #333;
  color: #fff;
  z-index: 30; /*  サイドバーよりも上へ  */
  cursor: pointer;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
#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: 1.5em;
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*  背景を黒くする  */
#side-button-back.open{
  background-color: #000000;
  opacity: 0.7;
  z-index: 10;
  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: 60px;/* サイドバー幅分 */
  z-index: 20;
}
#sub-content.open {
  transform: translate(0) !important;
  height:100%;
  overflow-y: auto;
  overflow-x: hidden;
}
#sub-content {
  margin: 0 !important;
  max-width: 450px !important;
  width: 100% !important;
}
#sub-content .widget{
  margin:auto!important;
}

スマホ画面サイズで画面下部に固定する

画面下部に固定する場合、以下の CSS を追記します。

ボタンのサイズは画面サイズの 20% になるようにしています。


@media ( max-width : 768px ) {
#sub-content {
  left: 0px;/* サイドバー幅分 */
}
#button-list {
  display: flex;
}
#button-list > div {
  width: 20%;
}
}

さいごに

ホームボタンの他に「 サイドバーを隠しておいて、表示させるカスタマイズをしたときのボタン 」、「 トップへ戻るボタン 」など、まとめて実装しておくと良い感じなのではないでしょうか！

参考

また、今回は新たに div ボックスを追加しましたが、QooQ のナビゲーションバーをそのまま同じように配置することもできそうです。（ 適当にちょいっとやった感じ的には ）

QooQ のナビゲーションバーをそのまま左に設置することも可能かも

こちらもご要望があれば、カスタマイズ記事を書こうかなってそんな感じなので、コメント残してください。

QooQ