MT3.34を3カラムにする。

| コメント(0) | トラックバック(0)
サイトを構築していくうちに、2カラムでは無理が出てきたので、3カラムにカスタマイズしたいと思います。


いろんなサイトで無料の MovableType 用テンプレートを配布されていますが、今回は drblog さんにお世話に成ることにしました。



環境設定のテンプレートを開いて、最下段にある「StyleCatcherでデザインを選ぶ」から、StyleCatcher 画面に行きます。



テーマ/リポジトリへのURLに http://drblog.jp/styles/ と入力してスタイル検索します。

暫くすると、配布されているテンプレートが表示されるのでお気に入りを選択し、「デザインを適用」で決定します。



数十種類のテンプレートの中から今回選んだのは、Ver 2.0 の 015 STEEL PLATE です。

デザインの適用が済んだら MT のパス(設置環境により変わります)にある
mt-static/themes に tmpl015 フォルダが出来ていますので、その中にある全ての GIF ファイルをルートパスに移動します。


例 : (http://jisakupc.dip.jp/*.gif) あなたの場合 (http://あなたのURL/*.gif) と言う形になります。


画像の設置が終わったら、次に drblog さんのサイトにアクセスして右側にある「カンタン設置方法」のページへ入ります。


下の方にある「Dr.Blogベーステンプレート」のアーカイブページ、スタイルシート、メインページ以下すべてを、いまあるテンプレートの中身と入れ替えます。


テンプレートの中身の入れ替えがすべて終わったら再構築し、サイトを確認してみましょう。



やったぁー 出来たー!




と、思ったら…


私の思惑とレイアウトが違った(-_-;)

そりゃー当然ですよなぁ! (^^;)




ここからレイアウトの変更をしていきます。

サーバー構築のカテゴリーを右カラムに配置し、その他を左カラムに配置したいとお思います。

先ず、メインページのテンプレートの right-menu にある最近のエントリーの

<!-- 最近のエントリー -->

<div class="recent-entry">

<h3>Recent Entries</h3>

<ol><MTEntries lastn="10">

<li><a href="<$MTEntryPermalink encode_html="1"$>" title="<$MTEntryTitle encode_html="1"$>"><$MTEntryTitle encode_html="1"$></a></li>

</MTEntries></ol>

</div><!-- recent-entry_end -->



上記の部分を left-menu にある、Categoryアーカイブと Monthlyアーカイブとの間に移動する。



保存と再構築し、サイトを確認して見ると…

あらら!

行頭がズレてる(-_-;)

あたりまえと言えばあたりまえかぁ?



しかし、どうしたものか困惑。…です。





ではでは、ここからが本番?


スタイルシートの変更をします。

パス MT/mt-static/themes/tmpl015/ の中にある tmpl015.css をメモ帳等で開きます。


recent-entry の three-column でレイアウトしている部分を探します。



ここでは、1490行目程に

body.layout-three-column div.recent-entry ol,があるので、

1478行目あたりにある

body.layout-three-column div.search-form form,

の上あたりに移動します。



ファイルの上書き保存をして、サイトを確認する。
(^_^)v(^_^)v(^_^)v

きれいに、行頭が揃いました。



最後の仕上げは、サーバー構築のカテゴリーを配置したいと思います。


右カラムの LINK の部分がシンプルで良いので、この部分をコピー アンド ペーストで流用していきます。


タイトル部分の変更とリンクを張るだけで作業は終了でした。


我ながら満足しました。(俗に、これを自己満足という。)





ちなみに前回はこれでした。








参考になったと思った方はクリック

↓ ↓ ↓ ↓ ↓ ↓



トラックバック(0)

トラックバックURL: http://jisakupc.ddo.jp/cgi-bin/mt/mt-tb.cgi/3784

コメントする

最近のコメント

アーカイブ

今日
昨日

Links

ブログパーツ(無料)

インフォブログランキング
知識の杜