PDF、ワード、エクセル等のファイルリンクを列挙するレイアウトってよくありますよね。
フォーマットダウンロード系のページとか。
学校のおたより●月号とか。
ファイルの拡張子のアイコンをつけたりすると分かりやすくて。
.pdf ｛ 背景 ｝
うんぬん。
なんですが、いちいちそのたびにコピー元になるサイトを探してきて、使う拡張子アイコンコピーして、CSSコピーして、、、
というのが、横着otogawaには面倒でたまらなく、
あとから「pdf以外にdocもお願い」とか「あ、xlsも対応して」とか、結局全部かい＼(*｀∧´)／という展開もしばしば。
それなら初めからプリセットとしてあったら便利だなーと思います。
------------------
あと、MTのカスタムフィールドでアイテムを登録したりするとき、ファイルの種類・拡張子でアイコン表示も出し分けれたらとっても便利。
やればできるもんですね！
↑MTなら、ただアイテムをアップロードするだけで、
クラスも振り分けてくれるように、テンプレート側で制御できちゃいます。
拡張子を表示してくれるタグも、
ファイルのサイズを表示してくれるタグも、
あるんですねー。
賢い。
--------------------
続きに、サンプルと、HTMLと、CSSと、MTテンプレートのサンプル書いておきます。
サンプルページ
▲拡張子アイコン8個セットのzipです。
HTMLサンプル
<ul> <li><span class="date">XXXX年XX月XX日</span> <p> <a class="icon i_pdf" href="#" target="_blank">XXXXX</a> </p> </li> <li><span class="date">XXXX年XX月XX日</span> <p> <a class="icon i_doc" href="#" target="_blank">XXXXX</a> </p> </li> </ul>
CSS
.icon {
padding-bottom:3px;
padding-left:20px;
background: url(img/i_other.gif) no-repeat 0px 0px;
}
.i_doc { background: url(img/i_doc.gif) no-repeat 0px 0px;}
.i_mov { background: url(img/i_mov.gif) no-repeat 0px 0px;}
.i_pdf { background: url(img/i_pdf.gif) no-repeat 0px 0px;}
.i_ppt { background: url(img/i_ppt.gif) no-repeat 0px 0px;}
.i_txt { background: url(img/i_txt.gif) no-repeat 0px 0px;}
.i_xls { background: url(img/i_xls.gif) no-repeat 0px 0px;}
.i_zip { background: url(img/i_zip.gif) no-repeat 0px 0px;}
Movable typeに使うときのテンプレートサンプルソース
entrydataはカスタムフィールドの値です。
<MTEntries> <mt:EntriesHeader><ul></mt:EntriesHeader> <li><span class="date"><$MTEntryDate format="%Y年%B月%e日"$></span> <mt:If tag="entrydata"> <MTentrydataAsset><a class="icon i_<$MTAssetFileExt$>" href="<$MTAssetURL$>" target="_blank" title="<$MTEntryTitle$>"><$MTEntryTitle$></a><span class="size">(<$MTAssetProperty property="file_size" format="1" $>)</span></MTentrydataAsset> </mt:If> </li> <mt:EntriesFooter></ul></mt:EntriesFooter> </MTEntries>