Movable Typeはバージョン5から「ウェブサイト」という概念を導入し、サイト制作の利便性が向上しましたが、その反面、ブログだけを作成する場合には「空の」ウェブサイトを作る必要があります。

ということで、Movable Type Open Sourceをベースにソースコードを改変し、ウェブサイトでブログ記事が作れる機能を追加した小粋空間版「Movable Type」を当ブログで配布致します（MTOSのGPLにもとづいた再頒布です）。

MTのウェブサイトでブログ記事が作れる小粋空間版「Movable Type」の配布開始

さっそくローカルにインストール

テーマには「クラシックウェブサイト」を選択してみた

無事インストール完了。とりあえずウェブサイトが一つできている

記事を書いて保存してみたけど上手くいかない。テーマに「クラシックウェブサイト」を使ったのが原因だった。

テーマを「クラシックブログ（ウェブサイト用）」に変更

再構築して完成です！

テンプレートをイジッテみようか？と思い、MT4.2のテンプレートセットプラグインを入れてみたけど使えない。MT5ブログ用のtheme.yamlのclass: blogをclass: websiteに書き換えるとウェブサイトテーマ一覧に現れた。

今度、MT4.2用のテンプレートでテーマを作ってみよう

9月3日完成しました：KMTOS 専用のテーマをリリースいたしました

jQueryで動くjquery.vgrid.jsを利用して可変グリッドレイアウトを導入してみた。

可変グリッドレイアウトのjQueryプラグイン書いたよ

7種類のサンプルな中から一番シンプルなulでマークアップする「Variable grid layout.」

以下のページでテーマのサムネイルをならべてみた。（都合により使用を中止しました）

• トップページ
• MovableType（MT・MTOS）テーマとテンプレート
• MovableType 5（MT5.0 MTOS5.0 MT5.1 MTOS5.1） テーマ（テンプレート） サムネイル一覧

簡単に導入することができた。ブラウザの幅を変えてお試しください。

ユーザー様から「構築中のサイトでCarritoが使えないか？」とご相談をいただいた。

決済などの関係もあるので直接ユーザー様から開発元の株式会社ベイリーフ様に確認をとっていただいた。全く問題なく、早速導入されることになった。

プラグインとマニュアルをいただいてテスト環境にインストール。ブログ記事を作成してみた。ブログ記事作成画面の下部に必要なフィールドが表示され、そこに入力するだけ。

サンプル用のコードを参考にしながら商品の詳しい情報もカスタムフィールドで追加。「買い物カゴに入れる」ボタンを作成。テーブルで一覧表にマークアップ。これらのコードを使いウェブサイトに「商品詳細」というモジュールを作成。

他のブログにもカスタムフィールドを設定し、「商品詳細」モジュールをインクルードした。

<mt:SetVarBlock name="website_id"><mt:BlogParentWebsite><mt:WebsiteID></mt:BlogParentWebsite></mt:SetVarBlock>
<$mt:include module="商品詳細" blog_id="$website_id">

Movable Typeの外で動くので後はCarritoに任せれば良い。

買い物カゴ導入を検討されている方はぜひチェック！
Google App Engine上で動くECプラグインシステム「Carrito」

静的ページ用ページ分割プラグイン:PageBute

コード

<MTPageContents count="10">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPageSeparator$>
</MTEntries>
</MTPageContents>
<ul class="mpage">
<MTIfPageBefore><$MTPageBefore delim="前の10件"$></MTIfPageBefore>
<$MTPageLists link_start="<li>" link_close="</li>" delim=""$>
<MTIfPageNext><$MTPageNext delim="次の10件"$></MTIfPageNext>
</ul>

CSS

.mpage li {
    float: left;
    list-style-type: none;
}
span.current_page {
    padding-right: 5px;
    padding-left: 5px;
}
.mpage li a {
    padding-right: 5px;
    padding-left: 5px;
}

CSSにより微調整は必要

Twitterのリンク配色だけが浮き上がって違和感ありすぎなので変更したい。

配色を指定しているのは以下の部分

.zenback-twitter ul.zenback-nodesign li a {
        text-decoration:underline !important;
        font-weight:normal !important;
        background:none !important;
        font-style:normal !important;
        color:#0000FF !important;
}
.zenback-twitter ul.zenback-nodesign li a:hover {
        text-decoration:none !important;
        background:none !important;
        font-weight:normal !important;
        background:none !important;
        font-style:normal !important;
}

これをCSSで上書きすれば色を変えられるはずですが、以下のように書いても上手くいかない。（思い余ってbody内に書いたりして...消しましたけど）

.zenback-twitter ul.zenback-nodesign li a {
        color:#2f576a !important;
}
.zenback-twitter ul.zenback-nodesign li a:hover {
        background-color:#000 !important;
        color:#fff !important;
}

よく考えてみると、CSSの優先順位を上げてやればいいことだった。

#Main_Content .zenback-twitter ul.zenback-nodesign li a {
        color:#2f576a !important;
}
#Main_Content .zenback-twitter ul.zenback-nodesign li a:hover {
        background-color:#000 !important;
        color:#fff !important;
}

おまけで「関連キーワード」も変えちゃいました。

#Main_Content .zenback .zenback-keywords ul.zenback-list li a {
        color: #2f576a !important;
}