MTのレイアウトカスタマイズ:ブロックのモジュール化

MT(Movable Type[ムーバルタイプ] 3.31-ja)を導入してデフォルト(初期設定)のテンプレートだとイマイチなので、自分なりにレイアウト(デザイン)のカスタマイズをしてみました。実際に今後の変更を容易にし易くするために部分毎にモジュール化しました。MTのレイアウトカスタマイズは、各ブロックをモジュール化することで更新・変更作業が容易になります。モジュール化の方法とデフォルトでの各モジュールコードを残しておきます。

モジュール化のメリット

各ブロックをモジュール化することでスタイルシートでの全体的なレイアウト変更も容易になります。また、各ブロック事での細かい変更もし易くなると思います。コードが複雑になってくると把握するのにも時間がかかりますし、ちょっとしたコード変更でサイトレイアウトが崩れた場合の問題点発見・修正にも時間をかけることなく解決できると思います。

モジュール化の仕方

【テンプレート】>【モジュール】において、【モジュールの新規作成】にて好きなモジュール名で各ブロックを登録しておきます。モジュール化した後は、【テンプレート】>【インデックス】でデフォルトのメインページにモジュールタグ(例:<$MTInclude module="モジュール名"$>)を組み込むだけで同じ表示になります。コードも簡素化することができ、変更・修正等が楽になります。

ヘッダーブロックのモジュール化(インデックスページ)

ページのヘッダー部分をモジュールとして登録します。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”HEADER”にて登録しておきます。 以下のテキストエリアの部分のコードがデフォルト(初期設定)でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="HEADER"$>となります。

エントリーブロックのモジュール化(インデックスページ)

メインのエントリー部分をモジュールとして登録します。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”indexentry”にて登録しておきます。 以下のテキストエリアの部分のコードがデフォルト(初期設定)でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="indexentry"$>となります。

サイドブロック:検索ブロックのモジュール化(インデックスページ)

サイドコンテンツ部分の各ブロックを個別にモジュールとして登録します。
サイドコンテンツ中の「検索」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”search”にて登録しておきます。 以下のテキストエリアの部分のコードがデフォルト(初期設定)でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="search"$>となります。

サイドブロック:最近のエントリーブロックのモジュール化(インデックスページ)

サイドコンテンツ中の「最近のエントリー」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”latestentry”にて登録しておきます。 以下のテキストエリアの部分のコードがデフォルト(初期設定)でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="latestentry"$>となります。

サイドブロック:カテゴリーブロックのモジュール化(インデックスページ)

サイドコンテンツ中の「カテゴリー」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”listcategory”にて登録しておきます。 以下のテキストエリアの部分のコードがデフォルト(初期設定)でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="listcategory"$>となります。

サイドブロック:アーカイブブロックのモジュール化(インデックスページ)

サイドコンテンツ中の「カテゴリー」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”listarchive”にて登録しておきます。 以下のテキストエリアの部分のコードがデフォルト(初期設定)でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="listarchive"$>となります。

サイドブロック:クリエイティブコモンズライセンスブロックのモジュール化(インデックスページ)

サイドコンテンツ中の「クリエイティブコモンズライセンス」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”CClicense”にて登録しておきます。 以下のテキストエリアの部分のコードがデフォルト(初期設定)でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="CClicense"$>となります。

サイドブロック:ムーバルタイプリンクブロックのモジュール化(インデックスページ)

サイドコンテンツ中の「ムーバルタイプリンク」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”MovableTypeLink”にて登録しておきます。 以下のテキストエリアの部分のコードがデフォルト(初期設定)でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="MovableTypeLink"$>となります。

以上までがインデックスページでのすべてのブロックのモジュール化の為のデフォルトコードとなります。

メインページのコードの書き換え

上記の各ブロックのモジュール化ができましたら、今度はコードを書き換えます。以下がデフォルトの状態でのメインページのコードとなります。とてつもなく長いコードでちょっとしたカスタマイズにも変更したい部分を探すのにも手間がかかります。デフォルトのコードの下にモジュール化した後のコードを記述しておきます。どれくらいコードが簡素化できるか比べてみてください。

以下がモジュール化したブロックを記述したコードになります。

以上がインデックスページのコードとなります。このように書き直すことでコードがかなり簡素化できます。また、上記はインデックスページとなります。まだ、エントリーページ・カテゴリーページ・アーカイブページ・検索結果表示ページなど各ページ毎にモジュール化を行い、コードの書き換えをする必要があります。

徐々にカスタマイズの説明を増やして行きます。コードを簡素化することで全体のレイアウトのブロックを把握することができ、スタイルシートの変更によるデザイン変更も容易になります。

トラックバック(0)

このブログ記事を参照しているブログ一覧: MTのレイアウトカスタマイズ:ブロックのモジュール化

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/18

コメント(3)

ここにコメントするのは、ちょっと違うかもしれませんけど、解らなかったので、許して下さい。
MtのエントリーでSyntaxHighlighterを使って、ソースを表示すると、行番号が「・」になってします。WebDesignさんのように行番号を表示するには、どうすればよろしいでしょうか?通常のhtmlでは、表示されます。
よろしくお願いします。

ちょっとエントリーにて説明します。
確かCSSを設定追加することで可能です。
しばらくお待ちください。
追記
dp.SyntaxHighlighter-コード表示に役立つJavaScript - WEBデザイン BLOGを参照してください。

スカイさん、回答ありがとうございます。
デフォルトのテンプレートだと行番号がちゃんと表示されました。テンプレートを入れ替えるとダメみたいです。もうちょっと勉強します。ありがとうございました。

コメントする

ウェブページ

   
  

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2006年8月15日 20:20に書いたブログ記事です。

ひとつ前のブログ記事は「無料ホストサーバーXREAにMovable Type ムーバルタイプ設置完了」です。

次のブログ記事は「エントリーアーカイブページブロックのモジュール化1」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。