タグ「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"

Movable Typeでタグを削除した時の対処

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

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になっています。

Movable Typeで携帯電話用ページの作成

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;
}

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