Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

カテゴリのカスタムフィールドを使ってヘッダー画像を変更する方法

先日、新機能としてカテゴリとフォルダのカスタムフィールド対応を行いました。

今回はこの機能を使ってテーマStylishCorporateの特定のカテゴリの記事一覧ページと個別記事のヘッダーを変更してみます。

カスタムフィールドの作成

まず、カスタムフィールド>新規からカテゴリのカスタムフィールドを作成します。

カスタムフィールド作成画面

システムオブジェクトでカテゴリを選択し名前や説明を入力し、タイプは画像を選びます。識別子は今回はcatimageにします。

カテゴリのカスタムフィールドに画像を設定する

次に、記事>カテゴリからヘッダー画像を指定したいカテゴリ名をクリックし、編集画面に移動します。

カテゴリ編集画面先程作成した画像のカスタムフィールドが表示されているので、画像を選択し保存します。

これで該当のカテゴリと背景画像が結びつきます。

テンプレートへの実装

続いてテンプレートの編集を行います。今回は以下のテンプレートが対象になります。

  • カテゴリの記事一覧ページ→アーカイブテンプレートのカテゴリ別ニュース記事リスト
  • 個別記事→アーカイブテンプレートの記事

まず、カテゴリ別ニュース記事リストですが、テンプレート内の以下の部分を

テンプレートのクラスがUnderlayerJumbotron UnderlayerJumbotron__newsimgの部分

以下に変更します。

<div class="UnderlayerJumbotron UnderlayerJumbotron__newsimg"<mt:CustomFieldAsset identifier="catimage"> style="background-image: url(<mt:AssetURL />);"</mt:CustomFieldAsset>>

この処理はまずmt:CustomFieldAssetでcatimageという識別子のカスタムフィールドの値をみて、今回は画像があれば実行するというのを利用してstyle属性を挿入し、識別子がcatiimageの指定された画像のURLが表示されるようにしています。

カスタムフィールドの基本的な表示の仕方は、以下の記事も参考になります。

ブクマ必須!カスタムフィールドの出力基本パターンをご紹介

これで、カテゴリ別の記事一覧ページのヘッダーが指定した画像に変わるようになりました。

次に記事テンプレートを編集します。テンプレートの以下の部分を

クラス名がUnderlayerJumbotron UnderlayerJumbotron__newsimgの部分以下のソースに変更します。

<div class="UnderlayerJumbotron UnderlayerJumbotron__newsimg"<mt:EntryCategories type="primary"><mt:CustomFieldAsset identifier="catimage"> style="background-image: url(<mt:AssetURL />);"</mt:CustomFieldAsset></mt:EntryCategories>>

ここではまず、記事のメインカテゴリーを表示するブロックタグで囲みます。これにより複数カテゴリが指定してあった場合にメインのものだけを指定できます。

その中身のソースはで先程と全く同じで、カテゴリに指定した画像があれば実行されstyle属性に画像が指定される、というものです。

これで、個別記事でも特定のカテゴリであればヘッダー画像が変更されました。

以上のように、カテゴリ(フォルダも同様に)のカスタムフィールドを使えば、より複雑な表現などできるようになりますので、是非テンプレート開発にご活用いただければと思います!

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス