Archives | Tumblr | Facebook | bullet-feed.pngRSS

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;
}

 次は、細かいデザインやカスタマイズです。

このエントリーをはてなブックマークに追加

関連性が高いおすすめ記事


comments powered by Disqus