Movable Type 備忘録

 Movable Type 4.2 用テンプレート - サイドバー構造変更

  • Jul272008
  • Vote:
    http://bizcaz.com/archives/2008/07/27-023211.php
  • Categories: Template
  • Tags: ,
  • Social Bookmark

こんばんわ^^

1 カラムレイアウトのデザインも決まって、とりえあずわたしのサイトのエントリページ、年別・月別ページでテスト表示させてみました。

1 カラムレイアウトを対応するにあたってサイドバーのテンプレートの構造を以下の理由から少し変更してます。

  • 現行のサイドバーの構造だとブロックレベルのセンタリングができない。
  • サイドバー内を 3 カラム化して横幅を有効利用する。

現行のサイドバーのテンプレート構造でも表示するだけなら可能なのですが、いろいろデザインしようとするとどうしても限界がありまして、この際だから構造を変更しちゃいました (●´∀｀●)

現行のサイドバーのテンプレートは以下のようになってます。

現行のサイドバー構造

  1. <div id="sidebar">
  2.     <dl id="sidebeta">
  3.         <dt class="widget_header gradient">コンテンツ①タイトル</dt>
  4.         <dd class="widget_content clearfix">
  5.             コンテンツ①
  6.         </dd>
  7.  
  8.         <dt class="widget_header gradient">コンテンツ②タイトル</dt>
  9.         <dd class="widget_content clearfix">
  10.             コンテンツ②
  11.         </dd>
  12.     </dl>
  13.  
  14.     <dl id="sidegamma">
  15.         <dt class="widget_header gradient">コンテンツ③タイトル</dt>
  16.         <dd class="widget_content clearfix">
  17.             コンテンツ③
  18.         </dd>
  19.     </dl>
  20. </div>

上記から以下のように変更しました。

変更後のサイドバー

  1. <div id="sidebar">
  2.     <div id="sidebar_wrapper" class="clearfix">
  3.         <div id="sidebeta">
  4.             <dl id="sidegamma">
  5.                 <dt class="widget_header gradient">コンテンツ①タイトル</dt>
  6.                 <dd class="widget_content clearfix">
  7.                     コンテンツ①
  8.                 </dd>
  9.             </dl>
  10.  
  11.             <dl id="sidedelta">
  12.                 <dt class="widget_header gradient">コンテンツ②タイトル</dt>
  13.                 <dd class="widget_content clearfix">
  14.                     コンテンツ②
  15.                 </dd>
  16.             </dl>
  17.         </div>
  18.  
  19.         <dl id="sideomega">
  20.             <dt class="widget_header gradient">コンテンツ③タイトル</dt>
  21.             <dd class="widget_content clearfix">
  22.                 コンテンツ③
  23.             </dd>
  24.         </dl>
  25.     </div>
  26. </div>

ブロック要素のセンタリングを行うために赤字の部分を追加してます。
また、#sidebeta を #sidegamma、#sidedelta に分割して、現行の #sidegamma を #sideomega に変更しました。
これによりサイドバーの 3 カラム化を実現します。

以上です。
当然ですが、テンプレートの構造を変更したことでスタイルシートも変更されてます。

まだわたしのサイト向けにしか作ってませんが、今日中には配布できるかと思います。
ただし、サーバの負荷状況によりますけど （；￣－￣）

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード