「HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか？」の２回めです。

まず、テーマ名を決めないと記事が分かりにくいですね。元デザインの名前「hyperspace」をそのまま使って作っていきます。

01左サイトバー

はてなブログでは、カスタマイズ > サイドバーに表示するモジュールは id=“box2” の要素内に入ります。javascript を使わないで左サイドバーを実現するには、この box2 を左にフロートするなどの方法しかないのですが、それではつまらないですし、そもそも前回の構想を実現しようと思えば、javascript の使用は避けられませんので、次のようにしようと思います。

• ヘッダー、メインコンテンツ、はてなサイドバー全て１カラムとする
• 設定 > フッタに左サイドバー用 html & javascript を挿入し、nav-panel として制御する
• モバイル、タブレットでは、ナビ用アイコンをタッチすることで左から nav-panel がスライドするようにする
• デスクトップでは、横幅30％程度のパネルを固定とする
  ヘッダー、コンテンツなどは同じ幅の左マージンを取る

02javascript なしのアニメーション（nav-panel のスライド）トリガー

はてなブログテーマストアで公開している他のテーマでも使っているのですが、input checkbox 要素の :checked で on off させる方法を使えば、javascript なしでアニメーションをスタートさせることができます。

まず、フッタに次の html を入れます。

<div id="nav-panel">
<input id="trigger" type="checkbox" />
<div id="panel">
    <label for="trigger"></label>
    <div id="panel-inner">
        
    </div>
</div>
</div>

label を input と離しているのは、checkbox の on off で label のアイコンもアニメーションさせるためです。

#nav-panel {
  position: fixed;
  top: 37px;
  left: 0;
}
#nav-panel #trigger {
  display: none;
}
#nav-panel #panel {
  width: 80vw;
  height: 100vh;
  overflow-y: auto;
  background: #312450;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#nav-panel #panel label {
  display: block;
  position: absolute;
  bottom: 70px;
  cursor: pointer;
  border-radius: 0 30px 30px 0;
  background: rgba(49, 36, 80, 0.8);
  z-index: 2;
  padding: 30px;
  box-sizing: border-box;
}
#nav-panel #panel label:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 28px;
  width: 5px;
  transform: rotate(-45deg);
  height: 25px;
  border-radius: 5px;
  background: #fff;
  transition: all .5s ease;
}
#nav-panel #panel label:after {
  content: "";
  position: absolute;
  top: 25px;
  left: 28px;
  width: 5px;
  transform: rotate(45deg);
  height: 25px;
  border-radius: 5px;
  background: #fff;
  transition: all .5s ease;
}
#nav-panel #panel #panel-inner {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 100%;
}
#nav-panel #trigger + #panel {
  max-width: 0;
  overflow: hidden;
}
#nav-panel #trigger:checked + #panel {
  max-width: 80vw;
}
#nav-panel #trigger:checked + #panel label {
  background: rgba(94, 66, 170, 0.8);
}
#nav-panel #trigger:checked + #panel label:before {
  transform: rotate(45deg);
}
#nav-panel #trigger:checked + #panel label:after {
  transform: rotate(-45deg);
}
.globalheader-off #nav-panel {
  top: 0;
}

css が何か抜けているかもしれませんが、これを適用したものが以下のサイトです。

hyperspace.hatenablog.jp

javascript を使ってトリガーにした方がいいのかもしれませんが、こんな方法もあるということでやってみました。

ただ、いずれにしても nav-panel に入れるコンテンツは javascript を使うしかありませんから、次はクリックイベントを使ってやってみましょう。

続く。