3カラムデザインをStyleCatcherで10秒で実現しよう

10秒というのはいいすぎですが・・・

効率よくページに情報を詰め込むには、いつかしら3カラム(3段組)のページデザインが必要だと感じていたんですが。ぶっちゃけどうやればいいのかよくわかりませんでした。

しかし今回不意に実現できました。

プロセスは

  1. Movable Type 3.2以上のデフォルトテンプレートを用意
  2. あらかじめWidgetManagerで3段目の内容を(モジュールを)用意しておく
  3. StyleCatcherの初期設定をする
  4. StyleCatcherで適当にスタイルを選ぶ(※ここで適用したスタイルのCSSファイルが3カラムをサポートしていることが条件です
  5. 各テンプレートに3つ目のカラム(段組)のHTMLの記述を書き加える

こんな感じです。

僕の場合、1はTemplate Backup and Refreshを使い各テンプレートを初期化しました。2に、WidgetManagerにとりあえず「カレンダー」と「Powerd By」を入れました。3はすでにStyleCatcherの設定は以前に終えていまして。4ではthe style contestのリポジトリ(http://www.thestylecontest.com/browse)のものから、「Minimal」というテーマ(作者paolo cremaschi 作者HP)を選びました。このスタイルではCSSファイルで3つ目のカラム「#gamma」も言及されていました。5の段階では各テンプレートにHTMLの記述をちろっと書き加えます。

<div id="gamma">
   <div id="gamma-inner" class="pkg">
      <$MTWidgetManager name="Widget Managerの名前"$>
   </div>
</div>

この5行だけです。

これで3カラムのページにとりあえずなりました。10秒どころか1時間かかっちゃうかもしれません凹○コテッ

Trackback URL

Leave Your Words





画像の中に見える文字を入力してください。

▲このページの最上部に戻る

購読 (FEEDBURNER)

購読って何?→説明はこちら(製作中)

Twitter Updates

Powered By