タグ「Template」が付けられているもの

MovableType 4.2 2Column HTML5の解説(概要)

MovableType 4.2 無料テンプレート 2Column HTML5は、リリースから約1ヶ月経過し少しずつダウンロードして頂いております。

HTML5は初めてという方もいらっしゃるようなので、数回にわたって(簡単に)解説し(ていきたいと思い)ます。

まずは基本形。

<!DOCTYPE html>
<html lang="<$MTBlogLanguage$>">
<head>
<meta charset="<$MTPublishCharset$>">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script src="<$MTLink template="javascript"$>"></script>
<link rel="stylesheet" href="<$MTLink template="Reset_Stylesheet"$>">
<link rel="stylesheet" href="<$MTLink template="styles"$>">
<title><$MTBlogName encode_html="1"$></title>
</head>
<body>
<header>
<hgroup>
<h1><a href="<$MTBlogURL$>" accesskey="1" title="<$MTBlogName encode_html="1"$>"><$MTBlogName encode_html="1"$></a></h1>
<mt:If tag="BlogDescription"><h2><$MTBlogDescription$></h2></mt:If>
</hgroup>
</header>
<div id="content">
<div id="main">
<ol>
<MTEntries lastn="5">
<li>
<$mt:include module="ブログ記事の概要"$>
</li>
</MTEntries>
</ol>
</div><!-- / main -->
<div id="sub">
<div class="inner">
<$MTWidgetSet name="サイドバー"$>
</div>
</div><!-- /sub -->
</div><!-- /content  -->
<footer>
<p><small>Copyright &copy; 2010 yourdomain, All Rights Reserved.</small></p>
</footer>
</body>
</html>

主要なところだけ抜き出していますが、XHTMLから比べると非常にシンプル。

http://html5shiv.googlecode.com/svn/trunk/html5.jsはIEでHTML5の新要素section要素やarticle要素をブロック要素として振るまえるようにし、http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.jsでCSSを少しまともに解釈出来るようにします。IE9に期待を込めて<!--[if lt IE 9]>としました。

header要素とfooter要素でコンテンツ部分との分離を行います。今までaddress要素でマークアップしていたCopyrightはfooter内のsmall要素に変更。
*HTML5でsmall要素は、見栄えをコントロールするプレゼンテーションモジュールからセマンティックな「細目を表す注釈」へと変更になったので注意が必要です。

次回に続く(はず)

MovableType 4.2 無料テンプレート 2Column HTML5 リリースしました

先日より作成しておりました「MovableType 4.2 無料テンプレート 2Column HTML5」をリリースしました。

HTML5でマークアップしチョコっとCSS3を使ったMovableType 4 .2専用テンプレートです。

HTML5でマークアップしたテンプレート

詳細は「MovableType 4.2 無料テンプレート 2Column HTML5」およびデモブログでご確認ください。

追記:MT5用のテーマ「MovableType 5 無料テーマ HTML5」も!

Movable Type 4.2のテンプレートをHTML5で書いてみた

そろそろHTML5で作ってみようと思い、やってみた。

HTML5でマークアップしたテンプレート

「メインページ」「ブログ記事リスト」サイドバーの「最近のブログ記事」「アーカイブ」にはolで番号を入れてみた。ブログ記事とウェブページのbrimg /はそのままでも良いのだが、気持ち悪いのでregex_replacereplaceで消した。

まだHTML5の要素をよく理解していないので、大いに間違っている所もあると思う。

5月1日追記:少し変更したが、ブログ記事のアウトラインが変だ。まだまだ変更する予定

5月9日追記:ブログ記事のアウトラインも変更。まだまだ変更する予定!

関連情報 

アットスタイル MovableType 5 テーマご利用のお客様にお願い

お送りしたテーマ内の「お問い合わせ」フォームの記述が間違っておりました。

間違い箇所

<input type="hidden" name="thanks_url" value="<MTIgnore><$MTLinktemplate="お問い合わせありがとう"$></MTIgnore>" />

正しい記述

<input type="hidden" name="thanks_url" value="<$MTLink template="お問い合わせありがとう"$>" />

ユーザー様には個別に差し替えのテンプレートをお送りいたしました。お手数でございますが、差し替えよろしくお願いいたします。

ウェブサイト配下すべてのブログから行った検索をウェブサイトの検索結果テンプレートで表示する

Movable Type 5で、ウェブサイトを「配下のブログ」のポータルとする場合、検索はすべてのブログにまたがった検索結果をウェブサイトの検索結果テンプレートで表示したい。

デフォルトのパラメータ

<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />

パラメータにウェブサイト配下すべてのブログIDを渡す

<input type="hidden" name="IncludeBlogs" value="<$mt:WebsiteID$><mt:WebsiteHasBlog><mt:Blogs include_blogs="site">,<$mt:BlogID$></mt:Blogs></mt:WebsiteHasBlog>" />

この内容を使用してウェブサイトに検索モジュール(ウィジェットでも可)を作成

<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$mt:WebsiteID$><mt:WebsiteHasBlog><mt:Blogs include_blogs="site">,<mt:BlogID></mt:Blogs></mt:WebsiteHasBlog>" />
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<label for="search">このサイトの検索</label>
<input type="text" size="15" id="search" name="search" value="<$mt:SearchString$>" />
<input type="submit" value="Search" />
</form>

ウェブサイト配下のブログからウェブサイトの検索モジュールをインクルードする

<mt:BlogParentWebsite>
<mt:SetVarBlock name="website_id"><mt:WebsiteID></mt:SetVarBlock>
<mt:Include module="検索" blog_id="$website_id"$>
</mt:BlogParentWebsite>

注意:ウィジェットで作成した場合はmoduleの部分をwidgetに変更すること

Movable Type 5テーマを一部修正しました

Movable Type 5テーマの記述に誤りがありましたので修正いたしました。

メインページのテンプレートにおいて<MTBlogs>include_blogs="site"モディファイアが不足しており、テーマ1001のアイテムサムネイルをクリックしてもテーマ1002へ移動しておりました。

<MTBlogs include_blogs="site">

修正し正しく動作しております。ご迷惑をおかけいたしました。

MT4.2用のテンプレートをMovable Type 5(MT5・MTOS 5)で利用する

ウェブサイトの配下のブログやウェブサイトの直下にブログを作成した場合には、MT4.2のテンプレートセットプラグインがそのまま利用可能です。

MT4.2で行っていた通り、テンプレートセットプラグインをpluginsディレクトリにアップロードします。

「ブログテーマの一覧」を開くとインストールしたテンプレートセットプラグインが現れますので、選択し、再構築を行うと適用されます。

ブログテーマの一覧

参考情報1(スクリーンショット付き解説):Movable Type 5 ウェブサイトの直下(ルート)にブログを公開する

参考情報2:ウェブサイトの直下(ルート)にブログを公開する

Movable Type 5.0 テーマ第一弾リリースしました

  • ウェブサイトに存在するブログのコンテンツをポータルウェブサイトとして構築します。
  • 配下のブログにも同じデザインが設定できます。また、「プロフェッショナルブログ」「クラシックブログ」などの独立したデザインのブログもウェブサイトに含めることができます。
  • MovableType 5の新機能「テーマ」を利用して設置が簡単!コピー・ペーストの作業は必要ありません。
  • 「会社概要」「プライバシーポリシー」「特定商取引法による表示」のウェブページ、お問い合わせなどのテンプレートは自動的に作成されますので、編集するだけでOK!
  • トップページには新着記事1件の本文と最近の記事5件のタイトルをタブで分割して掲載できます。
  • サイドバーのパーツはウィジェットとして登録されています。自由に配置していただけます。また、ウェブサイト用・ブログ用の2種類のウィジェットを装備しており入れ替えも自由
  • もちろんLightbox・Carouselが利用できます。

MT5テーマ

MovableType 5(MT5 MTOS5)テーマ[アットスタイル]

*今回のテンプレート開発に当たり、mtde.infoapstar様にご協力いただきました。ありがとうございました。

Movable Type 5(MT5)テーマ第一弾がほぼ完成しました

ベータテスト開始時より作成しておりましたMT5のテーマ(テンプレート)の第一弾がほぼ完成しました。

  • ウェブサイトとブログを同一のデザインで作成することができます。
  • ウェブサイトでは「メインページ」「会社概」「特定商取引法」「プライバシーポリシー」のウェブページを自動的に作成します。
  • ウェブページにシークレットタグを追加することでナビゲーションに追加できます。
  • 「お問い合わせ」「お問い合わせありがとう」のページはテンプレートにより自動的に作成されます。
  • Carouselでアイテムのサムネイルを表示します。
  • LightBoxを利用可能です。
  • ブログのサイドバーはウィジェットによりブログ用のパーツに入れ替えが可能
  • ウェブサイト配下のブログにオリジナルテーマでなくクラシックブログを利用してもウェブサイトの動作は問題なし

MT5テーマ

Movable Type 5(MT5)のリリース日(11月26日)に販売開始の予定です。

Movable Type 5.0 ベータの白テンプレートを作ってみた

動作やその詳細確認のために「余分なdivを削除しCSSを空にした」テンプレートを作成してみた。

プロフェッショナルウェブサイトのテンプレートはMT4.1と同様の分割となっているので、MT4.2に準じて分割のやり直し、また、内容はよく確認していないがmt.jsがMT4.2と同じ動作をするようなので、コメント周りもMT4.2からそっくり移植。

こんな感じです。

mt5の白テンプレート

9月26日追記:色々と追加中のため公開できなくなりました。ご了承ください。

Movable Type 5.0 ベータ1にテンプレートをインストールしてみた

先日、Movable Type 5.0 ベータ1をMacローカルにインストールしたが、こんどはXREAのサーバーにインストールしてみた。

MT5をXREAにインストール

テンプレートをインストールできるのか?

いつものようにpluginsディレクトリにテンプレートセットをアップロードし、ウェブサイトの下にブログを作成。

テンプレートを選択

そのまま使える。

テンプレート適用した

そこで、テンプレートを変えてみる。MT4のように「テンプレートの初期化」ではできない。テーマより変更する。

テーマを選択

これもOK

テンプレートOK

しかし、ブログはウェブサイトの下にしか作れないので、MT4.2のようなテンプレートではあまり意味がないのかな...

jQuery Carouselを実装したMovable Type テンプレートをリリースしました

jQuery Carouselを利用し新着アイテムには画像のサムネイルを表示します。

jQuery Carouselで新着アイテムを表示

新製品情報や制作実績のポートフォリオとして利用することができます。表示するカテゴリを特定したり、表示件数の変更も可能です。

8月28日現在、以下の6アイテムをリリースしています。(Slimbox 2・idTabsも実装)

トップページを「簡単に編集可能」にする(アットスタイルのテンプレートユーザー限定)

アットスタイルのMovable Type テンプレート4.2ではインストール時のコピー・ペースト作業をなくすためトップページの見出しやリードテキストはテンプレートモジュールで作成しており、通常のブログ記事のように「誰でも簡単に編集」することができません。

MT EntryBlockプラグインを利用してトップページを編集しやすくするカスタマイズをご紹介します。(このカスタマイズはテンプレートをインストール完了後に行います。また、手順を間違うとエラーが発生しますのでご注意ください。

以下のページよりEntryBlock.pl.zipをダウンロードします。

MT EntryBlockプラグイン。Junnama Online

解凍しEntryBlock.plをMovable Typeのpluginsディレクトリへアップロードします。

次に、トップページとなるブログ記事を作成します。すでに「トップページ」モジュールを編集されている場合には「トップページ」モジュールからテキストを拾い適宜修正します。タイトルと本文のみで作成してください。(ブログ記事と同様タイトルはh2となります。)公開状態を「未公開(原稿)」にし、出力ファイル名を「toppage」として保存します。

ブログ記事を作成

保存前の注意

上記作業が終了後、テンプレートをカスタマイズします。ダッシュボードより「トップページ」モジュールを開き、以下の内容に書き換えます。

<mt:entryblock key="basename" value="toppage">
<h2><$MTEntryTitle$></h2>
<$MTEntryBody$>
</mt:entryblock>

モジュールの編集

保存し、インデックスのみ(又は「メインページ」のテンプレートのみ)を再構築します。

以上で完了です。

jQueryのidTabsプラグインで新着情報を表示

idTabsを使って省スペースの新着情報を表示させてみた。以下の画像では新着記事1件とそれ以外の新着情報5件でタブを分けている。

タブ1

タブ2

アイテムを挿入して使えそうなので、新製品や制作実績のポートフォリオとして掲載することもできそうです。現在、これを利用したテンプレートをデザイン中。乞うご期待。

8月8日追記idTabsを装備したテンプレートをリリースしました。

MovableType 4.2 テンプレートにLightboxを実装します

MovableType 4.2(MT4.2 MTOS4.2)テンプレート@Style2.0バージョンのテンプレートセットにjQueryライブラリのSlimbox 2プラグインを実装し、手軽にLightboxを利用いただけるようにいたします。

実装済みのMovableType テンプレート 686 をご覧ください。

オリジナル MovableType 4.2 テンプレート686

只今、テンプレートデモ用のブログに実装作業中でございます。よろしくお願いいたします。

7月29日追記:実装完了しました。MovableType 4.2(MT4.2 MTOS4.2)テンプレート@Style2.0バージョン

新しいMovable Type 4.2用無料テンプレートをリリースします

2008年8月にリリースしたままになっておりました無料テンプレートを修正してリリースの予定です。

MT4.2用無料テンプレート

  • 装飾のまったく無いMovableType 4 .2専用テンプレートです
  • meta要素を適切に出力可能です
  • サイドバーの各パーツはウィジェットとして登録しています
  • サイドバーのPhotoは当該ブログ記事にリンクしています

未だダウンロードページを作成しておりません。すぐに利用されたい方は、お手数でございますが、メールその他でお知らせください。

7月27日:公開しました。

ブログのサイドバーにTwitterを表示した

以前からブログのサイドバーにTwitterのつぶやきを表示してみようかなと思ってましたが、標準のウィジェットだと出力されるソースがおかしいので躊躇していました。

Twitterをサイトに組み込むチュートリアル&サンプル集:phpspot開発日誌」の中で、JavaScriptで出力される一番シンプルな「Add Twitter to your blog (step-by-step)」を実装してみました。

やり方は、twitter.jsをダウンロードしてソースを記述するだけ。

ちなみに当ブログではスクリプト部分を以下のように記述しました。

getTwitters('tweet', { 
  id: 'atstyle', 
  count: 5, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '%text%(<a href="http://twitter.com/%user_screen_name%/statuses/%id_str%/">%time%</a>)'
});

ローディング画像を用意し、サンプルのhtmlを少し編集。ブログのメインページだけに表示したかったので、以下のようにサイドバーに記述。

<MTIf name="main_index">
<div id="tweet">
 <p>Please wait while my tweets load <img src="<$MTBlogURL$>webimg/indicator.gif" alt="" width="16" height="16" /></p>
 <p><a href="http://twitter.com/atstyle">If you can't wait - check out what I've been twittering</a></p>
</div>
</MTIf>

後はhead部分からスクリプトへリンク。

JavaScriptなのでサーバーに負担をかけることもありません!

追記:専用ページに移動しました。ソーシャルアクティビティ

Movable Typeのアップグレード時にはテンプレートセットも忘れずに

昨日(6月12日)Movable Type 4.26がリリースされました。

Movable Type 4.26 の出荷を開始します

本日より Movable Type 4.26 の出荷を開始致します。Movable Type 4.26 では、多くのバグフィクスと、mt-wizerd.cgi において発見されたクロスサイトスクリプティングの脆弱性対応行っています。本バージョンは脆弱性の修正も含まれておりますので、アップデートを推奨します。

Movable Type 4.26 の出荷を開始します

小粋空間さんでも書かれていますが、アップグレード時にプラグインを新しいアプリケーションディレクトリへアップロードすることをお忘れなく。

テンプレートセットも同様です。

アップロードを忘れるとダッシュボードの「システムテンプレート」がなくなったり、テンプレートの初期化ができなくなってしまいます。

システムテンプレートがない!

初期化もできない!

お忘れなく...

Moveble Type 4.2用テンプレート656制作中

メインページとCSSのみ完成しました。次回リリースのMT4.2用テンプレート656はこんな感じです。

3カラム・980pxの大胆なレイアウトです。作業途中なので、表示していませんが、メインページにはおススメの2記事を表示、サイドバーにはフリースペースを設けています。

テンプレート656

5月24日:656テンプレートリリースしました。