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

Movable Type 検索結果ページの最適化

久しぶりのMovable Typeネタ

検索結果ページのタイトルに検索フレーズを追加する

ちょっと追加するだけで検索エンジンも拾ってくれるかもしれません。(Googleでは拾ってくれるようです)

デフォルトのsearch_results.mtmlの記述

<title><$mt:BlogName encode_html="1"$>: 検索結果</title>

mt:SearchStringを追加する

<title>「<$mt:SearchString$>」の検索結果:<$mt:BlogName encode_html="1"$></title>

ブログ記事テンプレートをチョコっと変更

少し前に「ブログ記事のメタデータ」をブログ記事本文の下に持ってきたのだが、先日zenbackがパブリックベータになったのを記念してブログ記事テンプレートをさらに変更。

テンプレートタグで表示していた「関連記事」を削除。そこにzenbackを持ってきて、最後にトラックバックとコメント。

zenbackにdeliciousボタンがあれば良いのだけど...

MT DDC Tokyo テーマ編へ行ってきました

MT4LP5以来2年ちょっと、久しぶりにMTのイベントの参加しました。MT DDCは参加したことがなかったのですが、今回「テーマ編」ということで参加させていただきました。

朝6時過ぎに出発して、飛行機が少し遅れたおかげで、会場についたのが12時過ぎ(熊本からは遠いよね~)。すでにかなりの方が入室されてるようでした。会場のドア付近にOscarさんとlinkerのcremaさんを発見。その隣に座らせていただきました。

内容は

Movable Type 5 成長するプラットフォーム
金子順さん (シックス・アパート株式会社)
Movable Type 5.1の予定実装の解説。かなり使いやすくなりそうです。Movable Type 5.1は来年の初めころのリリースだそうで、今からワクワクしております。
テーマ機能を使って、便利にテンプレートを管理しよう
森和恵さん
DreamWeaverでのテンプレートの編集方法。DreamWeaverを購入したばかりなのであまり理解していませんが、DreamWeaverのテンプレート機能を利用して効率的にモジュールなどの編集ができるようです。
ウェブサイト/ブログを組み合わせたサイトのテーマ化
藤本壱さん
ウェブサイトとブログ間でのデータのやり取りのを効率的に行うノウハウ満載。一括で登録しておく方法、勉強になりました!
仕事に役立てるテーマ
蒲生トシヒロ (Dakiny)さん
テーマを利用する際の注意点など。これからテーマをつくってみようと思っている方がなかなか気づきにくいところを細かく解説。
テーマを使った手間いらずなサイト制作
荒木勇次郎さん
yamlの書き方。これだけのボリュームと詳細さはすごい。私も手描きでyamlを作成していますので、スライドの配布が待ちどうしい。公開されたようです。エクスポート系のプラグインも使ってみたい。
ライトニングトーク
飛び入りでHTML5のテーマを宣伝させていただきました。そのため私より前のLTは全く聞いてませんでした。すみません。舞い上がっちゃって私の後の方のもよく聞いてませんでした。

スピーカーのみなさま、シックス・アパートのみなさま、大変勉強になりました! ありがとうございました。

zenback ベータテスト開始!

先日のニュースリリースで面白そうなのでベータテストに登録していた。

シックス・アパートが、ブログ/メディア向けの ソーシャルメディア相互連携ツール「zenback」を発表

zenbackは、ブログ記事のテンプレートにスクリプトコードを埋め込むことで利用できます。ブログの記事の下や横に、

  • その記事に関係する自分のブログ記事
  • その記事に関係する他のzenbackユーザーのブログ記事
  • その記事についての最新のTwitterのつぶやき
  • その記事についてのはてなブックマーク
  • その記事の最新のアクセス元(リファラ)

を表示します。

zenback

zenbackによって、今までは1つ1つ独立している印象だった「ブログ」が、他のブログや他のサービスとゆるやかにつながり、大きなソーシャルの輪となっていきます。

zenback

このブログの個別ページに実装してみました。

記事のすぐ下にテンプレートタグで表示している「関連記事」は新しいものから拾ってきますが、zenbackではランダムに古い記事からも(件数は指定できる)表示されているようです。

気になったらzenbackベータテストへお申込み!

MovableType 4.2 2Column HTML5の解説(ブログ記事の概要)

恒例、「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説です。

ブログ記事の概要

「HTML5のセクショニングをどうするか」が一番悩んだ。

「ブログ記事の概要」全体をarticle要素でマークアップ。*それぞれの「ブログ記事の概要」は初回の解説のようにol要素でリスト化している。

ブログ記事のタイトルと各メタデータはheader要素。さらにsection要素で区切り、エントリータグ。「続きを読む」をfooter要素でマークアップ。

<article>
<header>
<h2>ブログ記事のタイトル</h2>
<ul>
<li>メタデータ</li>
</ul>
</header>
ブログ記事の本文
<section>
<h3>タグ:</h3>
<ul>
<li>タグ</li>
</ul>
</section>
<footer>
続きを読む
</footer>
</article>

「ブログ記事」テンプレートは「トラックバック」「コメント」「コメントフォーム」があるのでさらに複雑になる。次回解説の予定。

MovableType 4.2 2Column HTML5の解説(ブログ記事のメタデータ)

今回もMovableType 4.2 無料テンプレート 2Column HTML5の簡単な解説です。

ブログ記事のメタデータについて

各々のデータをリスト項目として取扱い、セパレータに文字を使わずCSSの:before擬似要素で表示。IEでも表示させるためにIE9.jsが必要となる。

投稿時間をtime要素・pubdate属性・datetime属性でマークアップ。datetime属性のフォーマットをMTEntryDate format_name="iso8601"とした。

<ul class="entry-meta">
    <li><time pubdate="pubdate" datetime="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x"$></time> <MTIfNonEmpty tag="EntryAuthorDisplayName"><$MTEntryAuthorLink show_email="0"$></MTIfNonEmpty></li>
<MTUnless name="hide_counts" eq="1">
    <li><a class="permalink" href="<$MTEntryPermalink$>" title="Permalink to this entry:<$MTEntryTitle$>">個別ページ</a></li>
    <MTIfCommentsActive><li><a href="<$MTEntryPermalink$>#comments" title="Comments for:<$MTEntryTitle$>"><$MTEntryCommentCount singular="コメント(1)" plural="コメント(#)"$></a></li></MTIfCommentsActive>
    <MTIfPingsActive><li><a href="<$MTEntryPermalink$>#trackbacks" title="Trackback for:<$MTEntryTitle$>"><$MTEntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)"$></a></li></MTIfPingsActive>
</MTUnless>
</ul>

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 5実践テクニック」近日発売です

私にとっての2冊目の著書「Movable Type 5実践テクニック」がソフトバンククリエイティブより、3月26日に発売されます。

著者:蒲生トシヒロ藤本壱小野崎直昭難波田実香柳泰久柳谷真志丹羽章

監修:シックス・アパート株式会社
出版社:ソフトバンククリエイティブ
定価:2980円(税込)

新機能であるテーマをメインとして「Movable Type 5はこんなことができるんだ!」ということをトコトン詳しく解説しています。

サンプルサイトにて、この書籍用に作成された3種類の配布テーマを公開しています。

LifeBlog

ActionStremsを利用して取得した情報をウェブサービスごとにウィジェット化。

株式会社SBC

中規模企業サイトのカスタマイズベース。カスタムフィールドの機能を最大限に使用。商社や卸業、製造業向け。

YOKOSUKA FOODS

カタログサイトなどに、強力な検索機能を実装できます。カートを装備すれば本格的な運営も可能

これらのテーマは実際の商用ウェブサイトでも使えるように「クリエイティブ・コモンズ・ライセンス 表示・継承 2.1」で配布します。

よろしくお願いします。

アットスタイル 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.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 出荷延期のお知らせ

Movable Type 5の製品リリースが11月後半となるようです。

7月に発表いたしました最新ウェブサイト管理ソフトウェア「Movable Type 5」につきまして、製品品質等の最終確認を継続中のため、当初予定していた10月中の出荷開始を延期することとなりましたので、お知らせいたします。

現在のところ、出荷時期は11月後半を予定しています。

Movable Type 5 出荷延期のお知らせ

これに伴いアットスタイルで開発中のテンプレートも11月後半以降のリリースとなります。

Movable Type 5におけるアットスタイルのテンプレート構想

MT5のテンプレートを作成中ですが、以下のような内容になりそうです。

  • ウェブサイトとブログのデザインを統一
  • ウェブサイトと違うデザインのブログも作成可能とする
  • デザインが違っていてもウェブサイトとして機能する
  • 会社概要などのページはウェブページを自動的に作成する
  • ブログにもウェブサイト(ウェブページなど)の情報を掲載する
  • 検索結果とタグ検索はウェブサイトにて表示する
  • ブログのウィジェットはウェブサイトの情報・ブログの情報を自由に変更できる
  • LightboxやidTabs・Carouselなども実装する

ウィジェットはこんな感じ...

ブログのウィジェット

現在のところ、ほぼ思うとおりの動作をするところまで完了しています。

乞うご期待!

Movable Type 5.0 ベータ3が公開されました

ベータプログラムへの沢山のフィードバックをもとに、多くの機能を洗練したMovable Type 5.0 Beta 3を公開します。管理画面のユーザーインターフェースを見直し、操作性を向上しました。また、バージョンアップしたときのウェブサイトの自動作成方法を変更しています。Beta ページからダウンロード可能です。

Movable Type 5.0 ベータ3を公開

早速、ローカルとXREAにインストールした。管理画面のUIが少し変わっているようです。

MT5 ベータ3

Beta 3 リリースノート

作成中のテーマを適用してみましたが、問題なし。

作成中のテーマ

その他をもう少し検証してみます。

ウェブサイト配下のブログでウェブサイトのテンプレートを利用する

MT5で追加されるMTタグの利用方法にあるように、ブログでウェブサイトのテンプレートを利用できる。

例えばウェブサイトの「ナビゲーション」モジュールを使用する場合にはmt:WebsiteIDを指定するために以下のように記述する。

<mt:SetVarBlock name="website_id"><mt:BlogParentWebsite><mt:WebsiteID></mt:BlogParentWebsite></mt:SetVarBlock>
<mt:Include module="ナビゲーション" blog_id="$website_id">

ただし「ナビゲーション」モジュールを利用しているだけなので、内容はブログ内のメインページ・ウェブページへのリンクとなる。これをウェブサイトのメインページ・ウェブページにするには、外側にmt:BlogParentWebsiteを指定する。

<mt:BlogParentWebsite>
<mt:SetVarBlock name="website_id"><mt:WebsiteID></mt:SetVarBlock>
<mt:Include module="ナビゲーション" blog_id="$website_id">
</mt:BlogParentWebsite>

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

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

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

こんな感じです。

mt5の白テンプレート

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