はてなブログテーマ hyperspace （２）

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

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

左サイトバー

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

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

javascript なしのアニメーション（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 を使うしかありませんから、次はクリックイベントを使ってやってみましょう。

続く。