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

Rainierをカスタマイズ(タグ)

Movable TypeのレスポンシブWebデザインテーマ「Rainier」では、ブログ記事に付けたタグを表示するようになっていないので、テンプレートを修正してタグを表示し、同じタグが付いた記事の一覧へリンクさせるようにしました。

ブログ記事のテンプレートに下記のコードを追加しました。

<MTEntryIfTagged>
 <div><p>タグ<span class="delimiter">:</span><mt:EntryTags glue='<span class="delimiter">,</span>'><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;" rel="tag"><$mt:TagName$></a></mt:EntryTags></p></div> 
</MTEntryIfTagged>

javascriptの部分は、無くても大丈夫だと思います・・・。

Rainierの詳細情報は、レスポンシブWebデザインテーマ 「Rainier」にあります。

Movable TypeでYoutubeの動画を埋め込む

Movable TypeでYoutubeの動画を埋め込む方法です。

https://www.youtube.com/watch?v=GZ9m6-Q-ddoの動画を埋め込む場合、「埋め込みコード」をクリックして表示される下記のコードをコピーして貼り付ければ、ブログの記事に動画を埋め込むことができます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/GZ9m6-Q-ddo" frameborder="0" allowfullscreen></iframe>

この方法だと、毎回コードをコピーして埋め込むのが、ちょっとだけ面倒です。また、ブログのスタイルを変更して、動画のサイズを変更したい時などには、検索や置換機能を使用する必要があるので、後々のメンテナンスのことを考えて、カスタムフィールドを使用して簡単に埋め込むことにしました。

youtube用のカスタムフィールドを下記のように新規作成します。
名前:youtube
種類:テキスト
必須:チェックなし
ベースネーム:youtube
テンプレートタグ:EntryDataYoutube

Movable Type スマートフォンオプションのテンプレートを修正

Movable Type スマートフォンオプションをインストールして使用していますが、一つのページにh1タグが複数あり、あまりよろしくないので修正しました。

アーカイブテンプレートのブログ記事で、

<h1 class="title entry-title">
<mt:if tag="EntryTitle">
<$mt:EntryTitle$>
<mt:Else>
タイトルなし
</mt:If>
</h1>

を下記のように修正。

<h2 class="title entry-title">
<mt:if tag="EntryTitle">
<$mt:EntryTitle$>
<mt:Else>
タイトルなし
</mt:If>
</h2>

フォトギャラリー(DynamicMTML)

DynamicMTMLを使うとリアルタイムで更新されるフォトギャラリーが簡単に出来ました。

DynamicMTMLをインストール後、ウェブページに下記のコードを入力します。

<mt:DynamicMTML>
<MTAssets type="image" lastn="20">
<a class="asset-image" rel="shadowbox[photo_gallery]" title="<$MTAssetDescription$>" href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL width="320"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetDescription$>" /></a>
</MTAssets>
</mt:DynamicMTML>

MTAssetsタグのlastnモディファイアで、表示する画像を20に制限しています。

画像(アイテム)に付けたのタグで制限する場合は、 tagモディファイアを追加します。
例: tag="tag-name"

tagを削除した時の対処

Movable Typeでtagを削除したり、サーバー移転などによりブログIDが変わった時に、tagの検索結果がなくなった場合の対処です。

Apacheの設定や.htaccessで対処する方法が思いつかたかったので、Movable Typeのシステムテンプレートにある検索結果を変更しました。

検索結果が0件=検索結果が0ページという事で、下記のコードを<head></head>間に追加しました。

<mt:unless tag="totalPages">
    <meta name="robots" content="noindex" />
</mt:unless>

検索サイトからはすぐには消えないですが、放置しておくよりは良いんじゃないかと思います。

shadowbox設置

今までthickboxを使っていましたが、動画にも対応できるshadowboxへ変更しました。

Movable Typeでの設置は、以下のような手順でできます。

shadowboxのサイトからダウンロードし、圧縮ファイルを解凍します。

cssファイルで指定している画像へのリンクを修正し、サーバーへアップロードします。

HTMLヘッダーテンプレートに下記を追加します。

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
 language: 'ja',
 autoplayMovies: false,
 players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
 });
</script>

cssとjsファイルのURLは、アップロードした場所にあわせて修正します。 

autoplayMoviesは、動画の自動再生の設定で、デフォルトではtrueになっています。

携帯電話用ページの作成

DSC05425.jpg

CMSとして使う Movable Type 5 ガイドブックを参考にして、Movable Typeで携帯電話用のページを作成しました。

サンプルファイルを流用させていただきましたが、自分のブログに合わせてカスタマイズするのに、苦労した点がいくつかありました・・・。

本の間違いでハマった点。

  • P.357にあるブログ記事(ケータイ)テンプレートと詳細(ケータイ)のリンクしているファイルが、両方ともdetail.tmplになっています。詳細(ケータイ)がリンクしているのは、mod-detail.tmplです。
  • トラックバック(ケータイ)がリンクするファイルは、trackback.tmplではなくtrackbacks.tmplです。

タグクラウドのテンプレートを変更

Movable Type 5.01のウィジェットにあるタグクラウドのテンプレートを変更し、javascriptを無効にしてみました。

javascriptで表示するようにしていると、javascriptが処理できない携帯携帯電話からアクセスしても、タグクラウドのリンクがクリックできるようになります。

最新記事のフィード

Movable Type 5.01 最新記事フィード(atom.xml)のデフォルトテンプレートは、全文配信するようになっていますが、続きを読むという形式に変更してみました。

そのうち気が変わって、また全文配信するかもしれません・・・(^^;;。

モーションテンプレートセットの修正

モーションテンプレートを使用しているブログでは、Youtubeの動画が簡単に張り付けることが可能ですが、HD動画を張り付けるとはみ出してしまいます。

スタイルシートを以下のように修正して対応しました。

#content {
   background: #fff;
   /* width: 980px; */
   width: 1040px;
   margin: 0 auto;
   font-size: 1.2em;
}
#content-inner {
    padding: 30px 20px 25px;
    /* width: 940px; */
    width: 1000px;
    margin: 0 auto;
}
#alpha {
    /* width: 620px; */
    width: 680px;
    margin-right: 20px;
}

赤字の部分が変更した箇所です。

フォトギャラリー

MTOS 4.2 RC4でプラグインを使わずに、デフォルトのタグや機能でフォトギャラリーみたいなものを作成してみました。

ウェブページのテンプレートを下記のように修正します。

                                <div class="asset-content">
<mt:If tag="PageBody">
                                    <div class="asset-body">
                                        <$mt:PageBody mteval="1"$>
                                    </div>
</mt:If>
<mt:If tag="PageMore">
                                    <div id="more" class="asset-more">
                                        <$mt:PageMore mteval="1"$>
                                    </div>
</mt:If>
                                </div>

mtevalモディファイアを追加することで、ウェブページ内でMovable Typeタグが展開されるようになります。

ウェブページを新規作成し、本文もしくは追記に下記のようなタグを入力します。

<MTAssets type="image" lastn="20">
<a class="asset-image thickbox" rel="photo_gallery" title="<$MTAssetDescription$>" href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL height="120"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetDescription$>" /></a>
</MTAssets>

MTAssetsタグにtagモディファイアを追加すれば、画像に設定されいるタグで表示する画像を絞り込むことが可能です。ダイナミックではtagモディファイアは使えません。

オリジナル画像の表示にThickboxを使わない場合は、<a></a>内にあるclass="asset-image thickbox" rel="photo_gallery"を削除します。ThickboxではなくLiteboxを使いたい場合は、rel="lightbox[photo_gallery]"に修正すれば良いと思います。

ウェブページの公開方法をスタティックにしていると、画像を追加してもフォトギャラリーは更新されませんので、随時保存し直して再構築する必要があります。公開方法をダイナミックに変更すれば、画像を追加すれば自動的に更新されますので、手間を考えればダイナミックをお勧めします。

OpenSearchへの対応

2008-07-10_1.png

OpenSearchに対応しているInternet Explorer 7でサイトを見ていると、画像のように検索オプションボタンの色がオレンジ色に変わることがあります。Firefox 2.0以上のバージョンでも同様に、検索オプションのボタンが変わることがあります。

参照:OpenSearch とは

Movable Type 3.3以降で検索結果のテンプレートがOpenSearchに対応しているようですが、完全に対応しているとは言えないようですので、調べたり試行錯誤したりして対応させてみました。

Widget: 最近のトラックバック

MTOS 4.2 RC2で最近のトラックバックを表示するwidgetを作成してみました。

<MTIf name="main_index">
<MTIfNonZero tag="MTBlogPingCount">
    <MTPings lastn="5">
        <MTPingsHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">最近のトラックバック</h3>
    <div class="widget-content">
        <ul class="widget-list">
        </MTPingsHeader>
        <MTPingEntry>
            <li  class="widget-list-item">From <a href="<$MTPingURL$>"><$MTPingTitle$></a> To <a href="<$MTEntryLink$>#trackbacks"><$MTEntryTitle$></a></li>
        </MTPingEntry>
        <MTPingsFooter>
        </ul>
    </div>
</div>
        </MTPingsFooter>
    </MTPings>
</MTIfNonZero>
</MTIf>

コメントの場合、<MTEntries>タグのrecently_commented_onモディファイアを使えばエントリー毎にまとめることが出来ますが、トラックバックにはそのようなモディファイアが無いので、Movable Type標準のタグだけでは、まとめて表示するのは難しそうです・・・。

関連するエントリーへのリンク

エントリーアーカイブで関連するエントリーへのリンクを貼りたいと思い、WingMemo: エントリーアーカイブに関連する記事一覧を表示するを参考にして、テンプレートモジュールを作成してみました。

<MTSetVarBlock name="eid"><MTEntryID></MTSetVarBlock>
<MTEntryIfTagged>
    <MTSetVarBlock name="etag"><MTEntryTags glue=" OR "><$MTTagName$></MTEntryTags></MTSetVarBlock>
    <MTEntries lastn="11" tags="$etag"><MTSetVarBlock name="tid"><MTEntryID></MTSetVarBlock>
        <MTSetVarBlock name="ecount"><MTEntriesCount></MTSetVarBlock>
        <MTIf name="ecount" gt="1">
            <MTEntriesHeader><div class="trackbacks"><h2 class="trackbacks-header">関連するエントリー</h2><ul></MTEntriesHeader>
            <MTUnless name="tid" eq="$eid">
                <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
            </MTUnless>
            <MTEntriesFooter></ul></div></MTEntriesFooter>
        </MTIf>
    </MTEntries>
<MTElse>
    <MTSetVarBlock name="ecat"><$MTEntryCategory$></MTSetVarBlock>
    <MTEntries lastn="11" category="$ecat">
        <MTSetVarBlock name="xid"><MTEntryID></MTSetVarBlock>
        <MTSetVarBlock name="ecount"><MTEntriesCount></MTSetVarBlock>
        <MTIf name="ecount" gt="1">
            <MTEntriesHeader><div class="trackbacks"><h2 class="trackbacks-header">関連するエントリー</h2><ul></MTEntriesHeader>
            <MTUnless name="xid" eq="$eid">
                <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
            </MTUnless>
            <MTEntriesFooter></ul></div></MTEntriesFooter>
        </MTIf>
    </MTEntries>
</MTElse>
</MTEntryIfTagged>

もう少しスマートにできそうな気がしないでもないですが・・・(^^;。

同じタグがつけられたエントリーが他に無かったり、カテゴリーに他のエントリーが無い場合は、表示させないようにしています。

Movable Type 4.1で確認していますのが、Movable Type 4.01でちゃんと動くかはわかりません。

タグクラウドのテンプレートを修正

Movable Type 4.1のウィジェットテンプレートにタグクラウドというのがあります。

mt:Tagsというタグのモディファイアの設定が間違っている部分があり、修正しないと期待した通りの結果が得られません。

<div class="widget-tag-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
        <ul class="widget-list">
    <mt:Tags limit="20" sort_by="rank">
            <li class="rank-<$mt:TagRank max="10"$> widget-list-item"><a href=""><a href="<$mt:TagSearchLink$></a>"><$mt:TagName$><a href=""></a></a></li>
    </mt:Tags>
        </ul>
    </div>
</div>

赤く表示しているrankという部分を下記のようにcountと修正します。

<div class="widget-tag-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
        <ul class="widget-list">
    <mt:Tags limit="20" sort_by="count">
            <li class="rank-<$mt:TagRank max="10"$> widget-list-item"><a href=""><a href="<$mt:TagSearchLink$></a>"><$mt:TagName$><a href=""></a></a></li>
    </mt:Tags>
        </ul>
    </div>
</div>

mt:Tagsについては、MTTags | テンプレートタグリファレンスを参照してください。

テンプレート「ブログ記事のメタデータ」を修正

Movable Type 4.01 のテンプレートに「ブログ記事のメタデータ」というものがあります。

このテンプレート内で

<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック(<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>

となっている部分があります。#trackbackとname属性を指定していますが、 これだとリンクをクリックしてもトラックバックの部分へジャンプできませんので、下記のように修正しました。

<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackbacks">トラックバック(<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>

最近のコメントのテンプレートを変更

Movable Typeに標準でインストールされるようになった、Widgetを使用して最近のコメントを表示するようにしていました。

デフォルトのテンプレートだと、コメントを新しい順に並べるだけですので、ちょっと見にくい感じがしていました。

エントリー毎にコメントをまとめて表示すれば、少しは見やすくなると思いましたので、そのようにテンプレートを変更してみました。

Widget: 最近のコメント(デフォルトテンプレート)。

<div class="module-recent-comments module">
  <h2 class="module-header"><MT_TRANS phrase="Recent Comments"></h2>
  <div class="module-content">
<MTComments lastn="10" sort_order="descend">
    <a href="<MTCommentEntry><$MTEntryPermalink$></MTCommentEntry>#comment-<$MTCommentID$>"><$MTCommentAuthor$> on <MTCommentEntry><$MTEntryTitle$></MTCommentEntry></a>: <$MTCommentBody remove_html="1" trim_to="10"$><br />
</MTComments>
  </div>
</div>

緑色で表示されている部分を削除して、赤色で表示されている部分を追加します。

Widget: 最近のコメント(変更後のテンプレート)。

<div class="module-recent-comments module">
   <h2 class="module-header">最近のコメント</h2>
   <div class="module-content">
      <MTEntries recently_commented_on="10">
         <p><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
         <MTComments lastn="5">
          └ <$MTCommentAuthor$> <a href="<$MTEntryPermalink$>#comment-<$MTCommentID$>">at <$MTCommentDate format="%Y.%m.%d"$></a><br />
         </MTComments></p>
      </MTEntries>
   </div>
</div>

エントリー・アーカイブのテンプレートを修正

metaタグの追加をして、keywordsを設定していましたが、キーワードを入力していないエントリの場合、contentの設定内容がブランクになってしまいます。これだと、あまりよろしくないというか、あまり美しくない(笑)ので、キーワードに何も入力が無い場合、metaタグを出力しないように、テンプレートを修正しました。

修正前

<meta name="keywords" content="<$MTEntryKeywords$>" />

修正後

<MTIfNonEmpty tag="MTEntryKeywords"><meta name="keywords" content="<$MTEntryKeywords$>" /></MTIfNonEmpty>

MTIfNonEmptyやMTIfNonZeroを使うと、テンプレートのカスタマイズが色々と出来るので、使い方を覚えると良いんじゃないかと思います。

Widget: 最近のコメント

Movable Type 3.3に同梱されるようになったプラグインに、Widget Managerというのがあります。

デフォルトでインストールされるWidgetに、Widget: 最近のコメントというものがあります。

Widget: 最近のコメントのテンプレートで、HTMLのルール上おかしなところがありますので、修正しておいた方が良いと思います。

<a href="<MTCommentEntry><$MTEntryPermalink$></MTCommentEntry>#comment-<$MTCommentID$>"><$MTCommentAuthor$> on <MTCommentEntry><$MTEntryTitle$></MTCommentEntry></a>: <$MTCommentBody remove_html="1" trim_to="10"$></a><br />

赤く表示した</a>が余計なので、これを削除します。

単純に改行されるだけで、ズラズラとコメントが表示されるので、<p>や<li>のタグを使用すると読みやすくなると思います。