まずはメニューから ～Blogger テンプレートを作るよ！ (18)～

こんにちはー！

前回考えたレイアウトを実現するために、ひとつずつ実行していきましょう！

（前回：『トップページを考え直す ～Blogger テンプレートを作るよ！ (17)～』）

まずはメニューから

とりあえず、メニューから作っていこうと思います。

開発用ブログのテンプレートを開いてっと、……コードのどこにメニューを置こうか悩みますね。まずは現状のブログの形状を見てみようと思います。

開発者用ツールを使ってみる

大体どのブラウザも、[F12] キーを押すと開発者向けのツールが表示されます。

Chrome の場合

これを使うと、HTMLファイル上のどのコードが画面上のどの部分になのかを確認することができます。逆に、画面をクリックするとそのコードにジャンプしてくれる機能もあります。

このボタンを押すと、画面上にマウスカーソルを載せたときにそれについて書かれたコードを表示してくれる

試しに画面の左上端をクリックすると、「fauxborder-left」 クラスと 「header-fauxborder-left」 クラスが付いた <div> が選択されました。

選択した場所は画面もコードも青く表示される

fauxborder とか cap とかってなんだろう？

テンプレートを見てみると、 「fauxborder-○○」　というクラス名の <div> はいろんなところに出てきます。テンプレートを改造する時にはややこしくて、正直言えば少し邪魔です。同様に 「cap-○○」 というクラス名もありました。

可能な限り好意的に解釈すれば、

「css でデザインを細かく変更したい人のために、内容とは直接関係がない要素が挟んである」

とかそんな感じでしょうか。Blogger の製作者じゃないので真意は測りかねますが、もしかしたら CSS3 が使えない環境でも綺麗なデザインができるように、とかその手の配慮かも知れません。

知っている人がいらっしゃいましたら教えてください。

とりあえずメニュー部分だけ書いてみる

不要なら後で消せばいいし～という軽い気持ちで、とりあえず fauxborder とか cap なども真似して書いてみました。太字の部分がメニューの中身です。

<div class='navigation-outer'>
  <div class='navigation-cap-top cap-top'>
    <div class='cap-left'/>
    <div class='cap-right'/>
  </div>
  <div class='fauxborder-left navigation-fauxborder-left'>
    <div class='fauxborder-right navigation-fauxborder-right'/>
    <div class='navigation-inner'>
      <div class='navigation-title'>メニュー</div>
      <b:section id='navigation' class='navigation'>
      </b:section>
    </div>
  </div>
  <div class='navigation-cap-bottom cap-bottom'>
    <div class='cap-left'/>
    <div class='cap-right'/>
  </div>
</div>

中身はメニューの名前と、ページリスト等を入れるためのガジェット用のセクションだけです。最終的には増えるかもしれませんが、とりあえずはこれでいいでしょう。

テンプレート内にコピペする

あとはこれをどこに入れるかですが、<div class='content'> の中、 <div class='content-outer'> の前に挿入してみます。

<div class='content'>
  <div class='content-fauxcolumns'>
    <div class='fauxcolumn-outer content-fauxcolumn-outer'>
      <div class='cap-top'>
        <div class='cap-left'/>
        <div class='cap-right'/>
      </div>
      <div class='fauxborder-left'>
        <div class='fauxborder-right'/>
        <div class='fauxcolumn-inner'>
        </div>
      </div>
      <div class='cap-bottom'>
        <div class='cap-left'/>
        <div class='cap-right'/>
      </div>
    </div>
  </div>
  <div class='navigation-outer'>
    <div class='navigation-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left navigation-fauxborder-left'>
      <div class='fauxborder-right navigation-fauxborder-right'/>
      <div class='navigation-inner'>
        <div class='navigation-title'>メニュー</div>
        <b:section id='navigation' class='navigation'>
        </b:section>
      </div>
    </div>
    <div class='navigation-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
  </div>
  <div class='content-outer'>

メニュー部の css を追加する

後は、navigation-outer を左側に、 content-outer を右側に表示するように、css を書き換えます。

ちなみに、 content-outer の設定はベースにしているテンプレートによって違うみたいです。今回ベースにしているテンプレートでは、デフォルトで固定幅になっている設定を無効化しているようでした。

普通のサイドカラムと同じように指定すれば大丈夫かと思ったんですが、そのやり方だと height: 100% の指定が効いてくれなくて、メニューの背景色が途中で途切れてしまうんですよね。

まあそれはそれで全体のデザインを調整すると悪くないのかもしれないですが、今回はその代わりに absolute で移動させます。

.content {
padding-left: 240px;
}
.navigation-outer {
position: absolute;
width: 240px;
margin-left: -240px;
height: 100%;
background: #f4f4f4;
padding: 24px 0 24px 0;
}
.navigation-title {
font-size: 48px;
text-align: center;
color: #404040;
}

すると、こんな感じのメニューもどきができます。

レイアウト画面の確認とガジェットの追加

さて、ここで設定画面で [レイアウト] を見てみると……

Navigation という枠がヘッダーの左側に表示されるようになりました！

これは、さっき追加した <b:section> のことです。

そこに [ガジェットを追加] でページリストとラベルリストを追加すると、メニューの方にそれが表示されるようになります。

色などの細かな装飾は後で修正するとして、とりあえず今回はここまで！