HEIKINRITSU
  • illustration
  • off line
  • about this site

このblogは更新を停止しており、アーカイブとして残してあるものです。新しいサイトはhttp://heikinritsu.comよりお入り下さい。

08/02/18　在原晃士

Movable Type：TOP絵の自動表示

TOP絵の表示方法について。
MTは同じ動作を実現するためにも、たぶんたくさん方法があるんですが、Movable Type：サムネイルから個別記事のフルサイズ画像へリンクするで決めた絵の記事の書き方、

  • エントリーの内容（body）にはフルサイズの画像のみ（IMGタグごと）を入れる
  • 追記（extended）に、文章を入れる
  • 概要（excerpt）にサムネイル画像のみ（IMGタグごと）を入れる

を利用しているとき、自分のサイトではどうしているのかを書いておきます。

基本的に、
KK'sWS: TOP絵自動表示
こちらで紹介された方法を元にしているんですが、RSSにサムネイルを入れるために、概要にサムネイル画像を入れる、という方針は変えたくなかったので、エントリーの内容の中の画像を引っ張ってくるようにしました。

ひとまずTOP絵を入れたいページのテンプレートの、任意の場所に以下のソースを書き入れます。

<MTEntries category="Illustration" lastn="1"> <!-- (1) -->

<MTCollect tags="img"> <!-- (2) -->
<MTCollectThis><$MTEntryBody$></MTCollectThis>

<div class="topimage" style="background-image:url(<MTIfCollected><MTCollected tags="img" lastn="1"><$MTCollectedAttr attr="src"$></MTCollected></MTIfCollected>);"> <!-- (3) -->
<a href="<$MTEntryPermalink$>"><img src="/archives/blank.png" width="100%" height="100%" alt="" border="0" /></a> <!-- (4) -->
</div>

</MTCollect>

<div class="topimage1">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> / <$MTDate format="%Y %m.%d"$> <!-- (5) -->
</div>

</MTEntries>

（説明しやすくするために、自分で使っているものから、だいぶ簡単にしています。このままでも動作します。）

(1)で対象となるカテゴリを指定。この場合はIllustrationを指定してます。

(2)から(3)までで、エントリーの中から「特定のタグの中身を抜き出す」ことのできるプラグイン、Collect Pluginを使います。エントリーの内容からIMGタグを最初のひとつだけ抜き出して、画像のURL（<$MTCollectedAttr attr="src"$>）を、DIVタグの背景画像として指定しています。

(4)がやや強引なんですが、10px×10pxの透過pngの画像を、TOP絵のボックス全体に引き延ばして上から貼り付け、それに個別記事への固定リンクを張ります。TOP絵をクリックすると全体が見える、という動作をさせたいための仕掛け（ただ、HTMLの書き方として、あんまりよろしくないと思われます……）。

透過pngの画像はこちら：blank.png（右クリック→別名で保存　とかで保存して使ってください。この画像ファイルについては自由に使ってもらって構いません）

(5)でTOP絵のタイトルと日付を入れて終了。

スタイルシートのほうの記述はこんな感じです。

.topimage {
margin:10px 0 0 0;
padding:0;
width:290px;   /* TOP絵のボックスの幅 */
height:425px;  /* TOP絵のボックスの高さ */
border:1px solid #666666;
background-color:#333333;    /* 画像の大きさがボックスより小さかった場合の背景色 */
background-repeat:no-repeat;
background-position:25% 50%; /* 画像のどのあたりをトリミングするかの指定 */
}
.topimage1 {
margin:0;
padding:4px 0 4px 0;
width:290px;   /* TOP絵のボックスの幅 */
text-align:center;
font-size:90%;
border:1px solid #666666;
border-width:0 1px 1px 1px;
background-color:#white;
}

ボックスの幅と高さは適当に変えてください。トリミングの指定は……ど真ん中でも面白いといえば面白いんですが、顔が入らなかったりするとさすがに悲しいので、結局僕はその度に微妙に調整してしまってます。

また、人によると思いますが、いわゆる「最近の絵」を表示させている場合は、そちらの「MTEntries」の指定に、「offset="1"」と入れれば、「最新から2番目の絵」以降を表示させるので、TOP絵とかぶることを防ぐことができると思います。

関連記事など：
KK'sWS: TOP絵自動表示
Conflict Room: お絵かき人のブログ設定

04/06/07 11:29

TrackBack