MT4:Movable Type4.01インストール備忘録(詳細) #4
参照
MT4:Movable Type4.01インストール備忘録(詳細) #1
MT4:Movable Type4.01インストール備忘録(詳細) #2
MT4:Movable Type4.01インストール備忘録(詳細) #3
少し間が空きましたが、Movable Type4.01インストール備忘録の続きです。前回は、Movable Type4.01を公開したところまで書きました。次はデザインの調整です。
だらだら書いていると忘れそうなので、今日で完結と言うことで2つの記事に分けて一気に書きます。ちょっと長文です。
まずは基本的なデザイン構成から。
パカチョン的にデザイン設定を終わらせるには、ダッシュボードから、「デザイン→スタイル」を選び、規定のスタイルから好きなものを選択すれば一応は完了します。これは新しいMovable Typeの機能で、これはこれでとても便利なのですが、それではあまりにもそっけ無いので、別のところから新しいテンプレートを持ってきます。
色々とネットを見てまわったのですが、僕は元々左右にサイドバーがある、3カラムのタイプが好きなので、いつも困ったときに参照させて頂いている、小粋空間様のサイトからテンプレートを頂きました。
参照先
小粋空間: Movable Type テンプレート
(ページ自体がとてつもなく長いんで、気の短い方は、「template_4_0」と検索を掛けるとダウンロードすべきリンクに一発で飛びます。)
このテンプレートは複数のバリエーションに対応しているのですが、僕はこの中の「3カラム(中央カラム固定・以下同様)」と言うスタイルを使っています。サイズ固定の3カラムスタイルです。
上記のリンクから、テンプレートのファイルをダウンロードしたら、ファイルを解凍してデフォルトテンプレートに対応する元々のファイルと入れ替えます。ファイル名が同じものを探して上書きする感じです。ただし、このうち、「サイドバー」 と「サイドバー2」は、全く新規のテンプレートとして作成します。
また、テンプレートのカスタマイズですが、「3カラム(中央カラム固定・以下同様)」と言うレイアウトは元々のデフォルト設定なので、特に触る必要無しです。別のレイアウト(2カラムや、リキッドタイプ)などに変える場合はbodyタグのclass属性を変更する必要があります。
これで基本的なテンプレートが出来上がりました。次は、自分なりのカスタマイズをしていきます。まずは、右サイドバーと左サイドバーのサイズを広げるため、「スタイルシート(メイン)」を変更しました。なぜ変更するかというと、185pxと言うボックスサイズは、最近のブログパーツを埋めるにはちょいと小さいからです。
スタイルシート(メイン)の下記の位置を変更します。
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 185px;
}
を下記に変更。
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 210px;
background-color: #eee;
}
次は、細かいデザインやカスタマイズです。
この記事に関連するエントリー
- Movable Type用のはてな、del.icio.us、Twitter対応のメタデータ
- MT4:デザインを少し直したり、コメントが投稿出来なかったり
- MT4:Movable Type 4.2をようやくインストールしたのに、もう4.21かよ
- MT4:Movable Type4.2アップグレード時の不具合
- MT4:Movable Type4.2にアップグレード