ホーム > Movable Type, PC > MT4テンプレート作りに早速実践投入してみた

MT4テンプレート作りに早速実践投入してみた

2009 年 12 月 25 日 kuro コメントをどうぞ コメント

早速実践投入してみた。自分用作業メモ。
今回は新しいものを実際に使ってみて、どれほど実用に耐えるレベルになるか。ということを目標に、MT(MovableType4.2)のテンプレートを作ることに。
某社からできますかといわれ、できますと言い、自分を追い込んで勉強。

作業はラフデザインからテンプレートにするという流れ。

まずは適当につくってみる

HTMLとCSSをFirefoxのアドオンであるFireBugさんを使ってどうやって適当に企業サイトを見ながら組めばいいのかということをなんとなく理解。
そのままの流れで、Adobe DreamWeaverの体験版(30日間使える。学習には十分。)を使ってHTMLを書いてみた。どこかでこまめにdivタグで囲うとよいということを知っていたので、その記憶に従いヘッダーやボディーフッター、サイドバーと大きく分けた。そして、その後CSSを当てていく方法が効率がよいことがわかった。

ぶっちゃけHTMLタグとか全部理解してないけど、使うのはpとかhとか数種類でスタイルは全部CSSに投げてしまうのですぐ形にはなった。
これをMTテンプレートの各種部分に入れていき(存在しないものはモジュールテンプレートを使ってほしい場所にインクルードする)作った。

Firebugさんに頼る

この段階で記事を投稿してももちろん画面には出てこない。というのも、MTタグを使ってエントリボディなどを読み込ませてないからだ。まぁ適当にデフォルトテンプレートにあったMTタグをそれっぽく配置してすぐに対応できた。
MTでインデックスを再構築すると、テーマが適応される。

ここで、Firebugさんの出番。要素をライブで編集して確認できるので、それを元にスタイルシートに追加していく。この作業を繰り返すこと数時間。だんだんとHTMLタグとの兼ね合いやDIVでどこをくくるべきなのかがわかり、ちょっと達観できる。
これで、一応完成。

その後MTタグ埋め込み

MTタグのだいたいの理解をしようと試みる。
本文初めから何文字表示させたいか。というときに使えるタグなどを探してきて、モディファイアを色々と試してみると、これまたやはりHTML同様に対して多くの種類は存在しないことに気がつく。lastn=”n”やcategory=”NOT name” words=”n”などそこら辺しか使わない。

プラグイン導入で使えるタグが増えたりするので、こちらを使って関連記事を表示させるようにもしてみた。

JavaScript登場

略してジャバスクですある。スクミz…

こいつを使って、特定カテゴリの記事の画像を、ぐるぐる回転させるAmazonのウィジェットっぽいものを取り入れることになった。ここで使うのがJavaScriptだった。
一応jQueryなる超便利なライブラリをグーグルのホスティングの元、読み込むことで、たいしたことしないでも動く様になったけど、理解してやったかといわれるとキツイ。
さらにこいつは、HTMLやCSSの時のようにFirebugさんがライブで使えないので、困った。

このジャバスクはこれから勉強していく予定だ。

苦労したこと

全部はじめて使うものばかりだから、初めは何から手をつけていいのかわからなかった。特にHTMLとCSSは両者が相関関係にあるような気がして、とても複雑に見えた。

CSSにおいて、IEの解釈がやばい。Firefoxを使って作っていたのだけどもIEではとんでもないところにサイドバーが行っていたりすることはざらだった。
俗にCSSハックといわれる先人の知恵がアーカイブされているようだが、短期間でここまで学べる気はしなかった。(最終的にはIEでも表示できるようになってきたが)

MTタグがバージョンによって使えたりそうでなかったりするようだ。MT5でテーマを作った後、MT4に移行したらcategoriesタグをcategoryタグにしないと再構築エラーが出てしまった(ように思う)。
ここで数時間悩み、原因発見に相当労力を割いた。

今後の課題

・CSSでバックグラウンドイメージを指定してグラデーションの効いたちょっと高級なデザインにする
・画像をスライスしてそれをCSSに入れていく(? というイメージ)手法を学ぶ
・ジャバスクを勉強する
・ページの軽量化、高速化

カテゴリー: Movable Type, PC タグ:
  1. コメントはまだありません。
  1. トラックバックはまだありません。