トップページやカテゴリページを見やすくする

Movable Typeのデフォルト設定では、ブログのメインページは各記事のすべての内容が出てきます。 これはこれで一つのポリシーですが、一つ一つの記事が長いと、メインページも長大になってしまいます。

ここでは、やはりいろいろなサイトがやっているように、「ブログ記事内最初の写真」と「本文の最初の部分」を入れたくなります。 ここではそれをやってみました。 本ブログのトップページのように表示する方法です。ちなみに、カテゴリアーカイブ(たとえば搭乗記 (別タブを開きます))や月別アーカイブ(たとえば2014年12月 (別タブを開きます))なんかでもやっています。

方法

1. まず、ブログの設定画面で「デザイン」→「テンプレート」を選択します。

2. 「テンプレートモジュール」内に「記事の概要」があるので、これをクリックします。

3. この「記事の概要」が、メインページ内で各記事の概要を載せるために使われているわけですが、デフォルトでは下の方にこんな行があります。

  <div class="asset-content entry-content" itemprop="articleBody">
    <$mt:EntryBody$>
  </div>

これだと、記事全文を出力してしまうので、これを「最初の写真」と「記事の最初の200文字(日本語環境の場合。英語環境だと200ワード)」を表示するようにします。 上記を以下のようにします。

  <div class="asset-content entry-content" itemprop="articleBody">
    <mt:SetVarBlock name="imgurl"><$mt:EntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace="/^[^\.\/h].*/g",""$></mt:SetVarBlock>
    <mt:If name="imgurl" like="(jpg|png|gif)$">
    <a href="<$mt:EntryPermalink encode_html="1"$>" itemprop="url"><img src="<mt:Var name="imgurl">"/></a><br/>
    </mt:If>
    <$mt:EntryBody words="200"$>...
  </div>

何をしているのか、軽く説明すると、2行目で記事内の最初の画像(imgタグ)のurlアトリビュートを 取り出しimgurl変数に代入します。 3行目でその変数の値(URL)が実際の画像ファイルの拡張子だった場合(この例ではjpg, png, gifであるなら)、4行目で画像を表示し、その画像を実際の記事のリンクにしています。 6行目では本文を200文字(ワード)出力します。 なお、wordsアトリビュートを設定すると本文内にある改行は無視されるようです。

この記事を書くにあたり、urlアトリビュートの取り出し用の正規表現はこちらを参考にさせていただきました。