カスタムフィールドとCutStringを利用してエントリーを装飾してみる

いろんなサイトの記事で、その記事の文頭に画像が入れてあるのを見掛ける事があります。
少し大きめで幅広の目立つ感じで。
リンク先のサイトのスクリーンショットを加工したものだったりするかと思うのですが、これけっこう好きだったりします。

例えばの感じでスクリーンショット貼ってます。
この画像を、カスタムフィールドで専用の入力欄を設けて、ついでにマウスホバーで変化するようにしてみました。

やってる事は「今ここエントリー」と変わらない事です。
それに＋カスタムフィールド＋CutString プラグインで。

記事装飾画像用のフィールドを用意

フィールドの名前や説明は、自身の判り易いように入れておくと良いです。種類は「画像」で。
この部分は管理画面上で表示されます。
ここでは一例として「EntryTitleImage」というテンプレート名になるようにしてみました。
「テンプレートの例」というのが出て来るのがユーザ・フレンドリーですよね。

準備が出来たら、投稿画面でそのフィールドが表示されるようにしておきます。
投稿画面右上の「表示オプション」から表示選択を行う事が出来ます。

テンプレートに追記

ブログ記事用のテンプレートの表示させたい箇所に以下を追加します。

<MTIfNonEmpty tag="EntryTitleImage">
<MTEntryTitleImageAsset>
<p id="asset-<$MTAssetID$>">
<a href="<$MTAssetDescription$>"><$MTAssetLabel$></a>
</p>
</MTEntryTitleImageAsset>
</MTIfNonEmpty>

次に、「今ここエントリー」の要領でスタイルシートを生成させるようにします。

アーカイブテンプレート⇒ブログ記事を作成
アーカイブマッピング⇒css/ent-<$MTEntryID$>.css
生成したCSSの読み込み例⇒<link type="text/css" rel="stylesheet" href="<$MTBlogArchiveURL$>css/ent-<$MTEntryID$>.css" />

テンプレート内容は以下のような感じで。

<MTIfNonEmpty tag="EntryTitleImage">
<MTEntryTitleImageAsset>
#asset-<$MTAssetID$> a {
   background: url(<$MTAssetURL$>) no-repeat center bottom;
   width: <$MTAssetLabel cutbefore="_" cutnext="#"$>px;
   height: <$MTAssetLabel cutbefore="#"$>px;
   display: block;
}
#asset-<$MTAssetID$> a:hover {
   background: url(<$MTAssetURL$>) no-repeat center top;
}
</MTEntryTitleImageAsset>
</MTIfNonEmpty>

テキストは飛ばして非表示にしたり、好きにすると良いです。

CutStringプラグインが必要になりますので、DLしてインストールしておいて下さい。
■任意の文字列を抽出する：CutString | MTプラグイン配布 | MT エンジニアブログ | スカイアークシステム

画像の準備

最初の例で上げたような画像を画像を用意します。
この画像は2種類を繋げたものを用意します。
通常の表示と、マウスホバー時で表示されるもの。
例として上下に2種類を繋げたものを出してみました。こういった感じで。

ファイルのアップ

ファイルアップを行う時に以下のようにします。

名前・・・「アイテムの固有名」_画像の横幅サイズ(px単位)#画像の縦幅サイズの2分の1(px)
説明・・・ジャンプ先のURL
タグ・・・好きなように。

CutStringプラグインの機能を用いて「_(アンダースコア)」と「＃(シャープ)」を区切り文字にして、繋がっている文字列から任意の部分を抜き取る処理を行います。

画像の横幅サイズ部分と画像の縦幅サイズ部分がスタイルシートに記述される事になります。
縦のサイズは、画像の縦幅の半分を記述する点に注意です。

アップした画像の確認には以下のプラグインを利用しているとすごく便利です。
■小粋空間: カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン 0.02
あとは記事を出力すればOKです。

まとめ

新しいフィールドはひとつで済むようにしてみたので、画像サイズのところに別フィールドを用いたり、挟まれるテキストに別フィールドを用意したりしても良いです。
マウスホバーで表示される画像を別個に用意するのも良いです。
区切り文字に関しても、自由に文字列を設定可能なので都合の良いように変更すると良いでしょう。

今回はひとつの場合を試してみたのですが、複数の場合もフィールドを用意して、それに対応した同様の記述を同じテンプレートに行えば良いです。
それと、これは「ブログ記事」部分の場合なので、mainindexなどでも同じように表示させたい場合は、必要な箇所にテンプレートタグを埋め込んで、生成させたCSSファイルを読み込ませるようにしましょう。

ちなみに、なぜかカスタムフィールド部分が出力されない状況に陥って、なんで？(´･ω･)
となっていたのですが、閉じタグを入れてなかっただけという事で、テンプレートタグはしっかり確認するようにしましょう。。。

カスタムフィールドとCutStringを利用してエントリーを装飾してみる｜Materializing [マテリアライジング]