技術情報提供ブログ

Movable Type で StyleCatcher に対応したスタイルライブラリコンテンツを作成する

こんにちは、上ノ郷谷(かみのごうや)です。

前回の記事では、StyleCatcher に対応したスタイルライブラリを構築するのに必要なファイルや情報を中心に紹介しました。今回は前回紹介した構築方法を元に、StyleCatcher に対応したスタイルライブラリを Movable Type で構築してみます。Movable Type を利用して構築することで、ただのスタイルライブラリページではなく、テーマスタイルを紹介とスタイルライブラリを兼ねたサイトの構築が可能になります。また、エントリーの投稿と、アーカイブテンプレート、アーカイブマッピングをうまく利用し、テーマスタイル紹介記事のエントリーの投稿がスタイルライブラリへのテーマ追加になるような仕組みの構築も簡単です。実際にどのようになるかを理解していただくために、動作サンプルムービーを作成いたしました。必要に応じて、ご参照ください。

動作サンプルムービー(.mov 2.5MB)

利用する主な MT タグ

今回のカスタマイズで利用する主な Movable Type タグは以下のようになります。

<MTArchiveList></MTArchiveList>
<MTEntries></MTEntries>
<$MTEntryBasename$>
<$MTEntryKeywords$>
<$MTEntryMore$>

利用する主なテンプレート

メインページテンプレート
スタイルシートアーカイブテンプレート (新規作成)

エントリー投稿の仕組み

テーマスタイル紹介記事のエントリーの投稿がスタイルライブラリへのテーマ追加になるような仕組みを構築する為に、どのフィールドにどういった内容を入力するかといった、エントリーを投稿する際のルールを作成します。テンプレートの参考になるだけでなく、後にこのルールをまとめたガイドラインを作成しておくのも良いですね。

投稿画面サンプルイメージ(幅: 765px, 高さ: 1489px)

エントリーのタイトル: テーマの名前を入力
エントリーの本文: thumbnail.gif を表示する為の img 要素を含むテーマ紹介コンテンツ
追記: スタイルシートファイルの内容
概要: テーマの概要
キーワード: テーマのディレクトリ名を (入力例: path/)
エントリー・ファイル名: エントリーのファイル名, CSS のファイル名 (拡張子除く例: theme_nema)
ファイルのアップロード機能: テーマのサムネイルに利用する画像や CSS ファイルで利用する画像は、ファイルのアップロード機能を利用してアップロードします。アップロード先は、キーワードに入力するテーマのディレクトリ名（例: path/）と同じです。

アーカイブテンプレートを利用する

エントリー投稿の仕組みでも書きましたが、 CSS ファイルの内容は追記のフィールドに入力します。ですので、テーマで利用する CSS ファイルの作成には新たにテンプレートを用意します。また、.css というファイル形式にする為にアーカイブマッピング機能を利用します。

アーカイブテンプレートを追加する

追記に入力した CSS ファイルの内容をテーマで利用する CSS ファイルとして書き出す為に利用するテンプレートを用意します。テンプレートはアーカイブテンプレートの中に作成します。テンプレート管理画面に移動し、アーカイブタブをクリックします。アーカイブテンプレート一覧になったら『新規テンプレートの作成』をクリックし、テンプレート編集画面に移動します。テンプレートの内容は以下のようになります。

テンプレート名

スタイルシートアーカイブテンプレート

このテンプレートにリンクするファイル

空白

テンプレートの内容

<$MTEntryMore convert_breaks="0"$>

エントリーの追記を値として返す MTEntryMore タグに改行フォーマットを無効にするよう、値が 0 (off) の convert_breaks アトリビュートを設定しています。これで、追記のフィールドに入力した CSS ファイルの内容は改行フォーマットが適用されず、入力したそのままの状態で作成されます。

アーカイブマッピングの設定

作成したテンプレートをエントリーアーカイブ (1エントリーに1つのページを作成する) の一つとして利用できるよう、アーカイブマッピングを設定します。あわせて、エントリーの追記に入力した CSS を内容に持つスタイルシートを書き出すため、書き出し先や出力フォーマットも設定します。このような作業の前にエントリー投稿の仕組みなどをまとめておくと、とても便利です。

まずスタイルシートアーカイブテンプレートをエントリーアーカイブとして書き出すように設定します。設定から『公開』タブを選択し、公開設定画面に移動します。アーカイブマッピングの設定は、画面の一番下のセクションで設定可能です。『マッピングを新規作成』をクリックし、以下のように設定します。

アーカイブの種類: エントリー
テンプレート: スタイルシートアーカイブ

つづいてスタイルシートアーカイブテンプレートで生成したファイルの出力フォーマットを設定します。エントリー投稿の仕組みでも書きましたが、スタイルシートアーカイブで構築するファイルは、各テーマごとのディレクトリに .css ファイルで書き出す必要があります。また書き出し先のパスは、これも作成したまとめを参照し、キーワードフィールドを利用して書き出すので、出力フォーマットは以下のようになります。出力フォーマットの変更は、セレクトメニューから『カスタマイズする』を選択し、テキストフィールドに直接記入します。

<$MTEntryKeywords$><$MTEntryBasename$>.css

これで、1エントリーにつき、2つのエントリーアーカイブを各々違う場所に違うファイル形式で出力することができました。Movable Type では、アーカイブマッピングを利用してこのように各々違う役割のアーカイブを持たせることができます。今回のように追記の内容のみを表示するもの、同じように本文のみを表示するもの、様々なアーカイブを出力させることができます。

同じアーカイブの種類に複数のアーカイブがあっても、『優先』とチェックされているアーカイブが『固定リンク』で表示されるファイルになりますので、各々のアーカイブのデフォルトな利用法は保持しつつ、様々なファイルの出力ができます。アーカイブごとに複数のテンプレートを持つという事に関しては、また別の記事でまとめてみたいと思います。

CSS ファイルの URL を明示する為の link 要素を追加する

スタイルライブラリとして読み込むページの HTML ファイルにはテーマの CSS ファイルを示す link 要素をエントリー投稿時に構築するようにします。

スタイルライブラリとして読み込むページとは、StyleCatcher の管理画面でテーマ/リポジトリへの URLに入力する URL の参照するページの事です。今回は一つのブログでテーマスタイルの紹介と、スタイルライブラリを兼ねたページを作成するので、作成するブログのトップページに link 要素を追加します。変更するテンプレートは、メインページテンプレートです。

テンプレートに追加するのは、MTArchiveList を利用して、全てのエントリーを表示するようにし、CSS ファイルの URL は作成したまとめで設定したようにキーワードの値を反映するようにしています。<$MTBlogURL$> 以下は、さきほど設定した出力フォーマットと同じです。

<MTArchiveList>
<MTEntries>
  <link rel="theme" type="text/x-theme" href="<$MTBlogURL$><$MTEntryKeywords$><$MTEntryBasename$>.css" />
</MTEntries>
</MTArchiveList>

サンプルテンプレート

今回変更・追加した2点のテンプレートサンプルを用意致しました。参考にしてください。

サンプルメインページテンプレート

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head profile="http://www.w3.org/2003/g/data-view">
    <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="imagetoolbar" content="no" />
    <MTIfNonEmpty tag="MTBlogDescription"><meta name="description" content="<$MTBlogDescription$>" /></MTIfNonEmpty>
    <meta name="generator" content="Movable Type" />
    <meta name="version" content="<$MTVersion encode_html="1"$>" />
    <meta name="dc.title" content="<$MTBlogName encode_html="1"$>" />
    <link rel="home" href="<$MTBlogURL encode_html="1">" title="<$MTBlogName encode_html="1"$>" />
    <link rel="index" href="<$MTBlogURL$>archives.html" title="<$MTBlogName encode_html="1"$>アーカイブ" />
    <MTEntries>
    <link rel="section" title="<$MTEntryTitle encode_html="1"$>" href="#entry<$MTEntryID pad="0"$>" />
    </MTEntries>
    <link rel="alternate" type="application/atom+xml" href="<$MTBlogURL$>atom.xml" title="Atom - <$MTBlogName encode_html="1"$>" />
    <link rel="alternate" type="application/rss+xml" href="<$MTBlogURL$>index.xml" title="RSS 2.0 - <$MTBlogName encode_html="1"$>" />
    <link rel="EditURI" type="application/rsd+xml" href="<$MTBlogURL$>rsd.xml" title="RSD - <$MTBlogName encode_html="1"$>" />
    <link rev="made" href="mailto:your@email.address" title="Email Address" />
    <link rel="copyright" href="#copyright" title="Copyright" />
    
    <MTArchiveList>
    <MTEntries>
    <link rel="theme" type="text/x-theme" href="<$MTBlogURL$><$MTEntryKeywords$><$MTEntryBasename$>.css" />
    </MTEntries>
    </MTArchiveList>
    
    <title><$MTBlogName$></title>
  </head>
  <body>
    <p class="skip-nav"><a href="#content" title="メインコンテンツ">メインコンテンツ</a> | <a href="#menu" title="メニュー">メニュー</a></p>
    <div class="section" id="container">
      <div id="header">
        <h1><a href="<$MTBlogURL encode_html="1"$>" title="<$MTBlogName$>" class="banner"><$MTBlogName$></a></h1>
        <MTIfNonEmpty tag="MTBlogDescription"><p class="blog-description"><$MTBlogDescription$></p></MTIfNonEmpty>
      </div>
      <div id="content">
        <MTEntries><div class="section" id="entry<$MTEntryID pad="0"$>">
          <MTDateHeader><p class="datetime"><$MTEntryDate format="%x"$></p></MTDateHeader>
          <h2><a href="<$MTEntryPermalink encode_html="1"$>" title="<$MTEntryTitle encode_html="1"$>"><$MTEntryTitle$></a></h2>
          
          <ul class="inline meta">
            <li class="author">投稿者: <$MTEntryAuthorDisplayName$></li>
            <li class="datetime"><$MTEntryDate format="%H:%M"$></li>
            <MTIfNonEmpty tag="MTCategoryLabel"><li>カテゴリー: <MTParentCategories glue="&nbsp;&gt;&nbsp;"><a href="<$MTCategoryArchiveLink$>" title="カテゴリー&quot;<$MTCategoryLabel$>&quot;"><$MTCategoryLabel$></a></MTParentCategories></li></MTIfNonEmpty>
          </ul>
          <$MTEntryBody$>
          <MTEntryIfExtended><p class="extended"><a href="<$MTEntryPermalink encode_html="1"$>#more" title="<$MTEntryTitle encode_html="1"$>"><$MTEntryTitle encode_html="1"$>の続きを読む</a></p></MTEntryIfExtended>
          <ul class="inline feedback">
            <li><a href="<$MTEntryPermalink encode_html="1"$>" title="<$MTEntryTitle encode_html="1"$>">固定リンク</a></li>
            <MTIfCommentsActive><li><a href="<$MTEntryPermalink$>#comments" title="&quot;<$MTEntryTitle$>&quot; にコメントする・見る">コメント</a> (<$MTEntryCommentCount$>) </li></MTIfCommentsActive>
            <MTIfPingsActive><li><a href="<$MTEntryPermalink$>#trackbacks" title="&quot;<$MTEntryTitle$>&quot; にトラックバックする・見る">トラックバック</a> (<$MTEntryTrackbackCount$>) </li></MTIfPingsActive>
          </ul>
        </div></MTEntries>
      </div>
      <hr />
      <div id="menu">
        <div class="section" id="search">
          <h2>検索</h2>
          <form method="get" id="search-form" action="<$MTCGIPath$><$MTSearchScript$>">
            <fieldset><legend accesskey="s">検索フォーム: </legend>
              <label for="search-field">サイト検索</label><input id="search-field" name="search" value="" class="searchform" tabindex="1" />
              <div>
                <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
                <input type="submit" value="検索" class="searchform" tabindex="2" />
              </div>
            </fieldset>
          </form>
        </div>
        <MTIfNonZero tag="MTBlogEntryCount"><div class="section" id="recent-entries">
          <h2>最近のエントリー</h2>
          <ol><MTEntries lastn="5">
            <li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>"><$MTEntryTitle encode_html="1"$></a></li>
          </MTEntries></ol>
        </div></MTIfNonZero>
      </div>
      <div id="links">
        <MTIfNonZero tag="MTBlogCommentCount"><div class="section" id="recent-comments">
          <h2>最近のコメント</h2>
          <MTEntries recently_commented_on="5" sort_order="ascend"><ul>
            <li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>"><$MTEntryTitle$></a>
              <ul><MTComments lastn="3">
                <li class="commentator"><a href="<$MTEntryPermalink$>#comment-<$MTCommentID$>" title="<$MTEntryTitle$>への<$MTCommentAuthor$>さんのコメント#<$MTCommentID$>"><$MTCommentAuthor$></a></li>
              </MTComments></ul>
            </li>
          </ul></MTEntries>
        </div></MTIfNonZero>
        <MTIfNonZero tag="MTBlogPingCount"><div class="section" id="recent-trackback">
          <h2>最近のトラックバック</h2>
          <dl><MTPings lastn="5">
            <dt><a href="<$MTPingURL$>" title="&quot;<$MTPingBlogName encode_html="1"$>&quot;さんからのトラックバック"><$MTPingTitle$></a>
            <dd>
              <ul>
                <li><cite><$MTPingBlogName$></cite></li>
                <li><$MTPingDate format="%x"></li>
              </ul>
            </dd>
          </MTPings></dl>
        </div></MTIfNonZero>
        <MTIfArchiveTypeEnabled archive_type="Monthly"><div class="section" id="monthly-archives">
          <h2><a href="<$MTBlogURL$>archives.html" title="投稿記事一覧 - <$MTBlogName encode_html="1"$>">アーカイブ</a></h2>
          <MTArchiveList archive_type="Monthly"><MTArchiveListHeader><ol></MTArchiveListHeader>
            <li><a href="<$MTArchiveLink$>" title="<$MTArchiveTitle encode_html="1"$>"><$MTArchiveTitle$></a></li>
          <MTArchiveListFooter></ol></MTArchiveListFooter></MTArchiveList>
        </div></MTIfArchiveTypeEnabled>
        <MTIfNonZero tag="MTBlogEntryCount"><MTIfArchiveTypeEnabled archive_type="Category"><div class="section" id="category-archives">
          <h2>カテゴリー</h2>
          <MTSubCategories top="1"><MTSubCatIsFirst><ul></MTSubCatIsFirst>
            <MTIfNonZero tag="MTCategoryCount"><li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel encode_html="1"$>"><$MTCategoryLabel$></a><MTElse><li><MTCategoryLabel></MTElse></MTIfNonZero><MTSubCatsRecurse></li>
          <MTSubCatIsLast></ul></MTSubCatIsLast></MTSubCategories>
        </div></MTIfArchiveTypeEnabled></MTIfNonZero>
        <MTBlogIfCCLicense><div class="section" id="license">
          <h2>ライセンス</h2>
          <a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" src="<$MTBlogCCLicenseImage$>" /></a>
          <p>このブログは <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a> で保護されています</p>
        </div></MTBlogIfCCLicense>
      </div>
      <div id="footer">
        <ul class="inline">
          <li><a href="<$MTBlogURL encode_html="1"$>index.xml" title="<$MTBlogName encode_html="1"$> RSS Feed">RSS Feed(XML)</a></li>
          <li>Powered by <a href="http://www.sixapart.jp/movabletype/" title="Movable Type <$MTVersion$>">Movable Type <$MTVersion$></a></li>
        </ul>
      </div>
    </div>
    <address id="copyright">Copyright</address>
  </body>
</html>

サンプルスタイルシートアーカイブテンプレート (新規作成)

投稿者 kaminogoya
カテゴリー Movable Type

トラックバック

トラックバック URL

コメント投稿

本エントリーに関係のないご質問はサポートにお願いします。また、Movable Type に関するフィードバックは専用フォームよりお願い致します。

このページのトップへ

ProNet

ProNet 企業一覧
Six Apart ソリューションパートナー
ProNet登録をご検討の方
- ProNet (法人)
- ProNet SOHO (SOHO・個人)
関連製品・ソリューション
MT Ready ホスティング
MT公認トレーニング
FAQ（よくあるご質問）
お問い合わせ
ProNet特別インタビュー
MTQ | Movable Type 5 ユーザーコミュニティ
ProNet担当者ブログ