movabletype4.1の最近のブログ記事

つい昨日MT4.2がリリースされてましたね。Movable Type 4.2 を発表しました | MovableType.jp。早速自サーバ(UbuntuServerEdition)に入れてみました。テンプレート画面の見通しが良くなって、管理しやすくなったと思います(正直、そんなに触っていないので詳しくその良さがわかっていませんw。)

最近MTのタグなどを勉強するのにこちらのサイトmtde.infoを利用しています。

mtdeinfo

とてもきれいに情報が整理されていて、尚且つ手に届きやすいリンク配置、サンプルコードによるテンプレートタグの解説といった感じでとても参考になります。

テンプレートタグリファレンス | MovableType.jpと併せて頻繁に行ったり来たりしています。firefoxを使っている方は、Movable Type 4 に対応したタグリファレンスを活用する | MovableType.jpでも紹介されているように、検索にテンプレートタグ検索を追加することで、mtdeinfoを読みながら、タグリファレンスを読みたい時に、キーワードを選択して、右クリックでコンテキストメニューを表示し、[MT テンプレートタグ検索]を選択実行することで別タブでバックグランド(設定いるような・・)で開くことができます。

あとは、サイトで開設されているサンプルコードを自サーバ(MTOS)にこのブログのバックアップを流し込んで、その上でサンプルコードをwidgetにして、テンプレートに入れてどんな動きができるのかを試してみたりしています。

変数の動きだけのサンプルコードは、新しいブログを開設して軽い状態で確認表示したりしています。

そんな感じで勉強しています。とても難しいです。サイトに限らず、設計できてないとたぶん使いこなせないかも。なんて感じてます。エンジニア向けだなって。

サイト運営者の方の個人ブログでmtde.info の、できる経緯も合わせて読まれるといいですよ。

MovableType4.1AutoPagerizeに対応させるコードを紹介しておきます。

mtentryautopagerize_jpg

AutoPagerize対応class指定を設定しておくことで、エントリーを昇順で読むことができるようになります。実際にMovableType.jpで対応されているので、導入している方には、過去のエントリーから読んでいくとページ末尾に新しい記事(次ページ)が追加表示されるようになり、読みやすさを実感できるかと思います。

インデックスページ(トップページ)で、エントリーがアップした日付で降順に表示されるのが一般的です。記事を読み始めると昇順に記事が追加され読めるようになります。逆でもいいのですが、こっちの方がスマートかもしれません。

最初のエントリー投稿内容からコードの追記修正いたしました。最新記事において、「次の記事」が表示されていたのを表示されないコードに修正しました。

MovableType4.1でエントリーリストはじめ、コメントトラックバックなどのリスト表示をストライプにする変数設定について紹介します。

mt_list_stripe

MT3.3xでは、MTRoundRobin:一覧表示で交互に背景・文字色をかえるで紹介していたMTRoundRobinというプラグインを使って、記事リストをストライプにして表示させていました。

新しいMovableType4.1では、そうしたプラグインは必要なく、変数を設定し条件分岐させることで、対象の要素に奇数偶数回数目で設定内容を指定してページ生成することが可能です。この変数指定での条件分岐を使って、奇数、偶数の要素に対してclass指定を交互に変えて生成するようにすれば、cssの設定だけでストライプ表示をさせることが可能となります。

参考になるエントリーは、こちらの拡張された MTElse タグを利用した複雑な条件分岐 | MovableType.jpを読んでみるとその内容がわかると思います。

また、サンプルページは、MovableType.jpにて最近のブログ記事リストがこの方法を使って、ストライプ表示をさせていると思われます。

新しいシステムMovableType4.1でのコンテンツ構築・デザイン変更で、知っておかなければならないのが新しく追加されたテンプレートタグとテンプレートです。タグリファレンスやブログを読んで、新しいMTタグについて勉強してみたのですが、やはり実際に使って動作させてみないとわからない。また、もう少し全体的に比べてみたりしないと理解しづらいなんてことで、まず、テンプレートの相関図みたいなものを個々に作っていこうと考え、実際にインデックステンプレート(トップページ)の構成内容とヘッダーテンプレートとの関係をイメージにして表してみました。ご参考にどうぞご覧になってください。

mt4_template_big.gif

左図がヘッダーテンプレートコードになります。右図がインデックステンプレートでの変数設定についての詳細です。

クリックでイメージ拡大されます。またドラッグで移動もできますので、大きな画像を見るときにスクロールで移動してもいいですが、ドラッグでイメージを移動させた方がみやすいです。highslideJSもこうした使い方をすると機能的ですね。

尚、こうしたイメージをつなぎ合わせて一つのPDFなんかを作っていきたいとも考えています。新しいタグを覚えるのには、こうした全体の関係を表してみて、部分部分でのテンプレートタグの機能役割なんかを見てみると理解しやすいかと思います。

今回、実際にデフォルトで設定されているテンプレートタグを取り出して、どういったフローでページ生成(HTMLタグ生成)されるのかを個々に取り上げて、解析してみたいと思います。このテンプレートタグについて、シリーズで取り上げていきます(勉強するための時間があまり取れない状況にありますので、長いインターバルでアップしていきます)。今回のテンプレートについての詳細解説は、後日いたします(このエントリー追記部分にて)。とりあえず、イメージを。

先週、MovableType3.34からMT4.1へとシステムをアップグレードしました。正直、スムーズに事は運びませんでした。失敗といえば失敗だったのですが、運よくリカバリーできる失敗でしたので、時間はかかりましたがなんとか以前のエントリーを引き継いでMT4.1へのシステムアップグレードを済ませることができました。

movabletype_upgrade

今回に失敗点からMT3.3xからMT4.1システムアップグレード・データ移行する際のステップならびに注意しておきたいポイントを自分の経験・探した情報から紹介したいと思います。今後MT4.1へシステムアップグレードする方に何かの参考になればと思っています。尚、しばらくMT4.1に関連したエントリーをアップしていくつもりでいます。

2008年6月: 月別アーカイブ

ウェブページ

   
  

アイテム

  • 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つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このアーカイブについて

このページには、過去に書かれたブログ記事のうちmovabletype4.1カテゴリに属しているものが含まれています。

前のカテゴリはblog,ブログです。

次のカテゴリはカスタマイズです。

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