モニャピロセカンドシステム MT覚え書き：CSSでエントリータイトルに画像を表示する　と、更新マーク

ウチの場合、更新するとこの画像に更新画像をすり替える形なのでさらに修正します。
　
考えたのは、更新マークを画像じゃなく文字（テキスト）で表示させることで、スタイルシートのclass命令に付け加えられる。。。するってーと、更新した時と更新してから数日経った時の画像をスタイルシートのclass命令で分けることが可能に。。。なる？なった？
　
で、使ったのは前にもエントリーした、「カテゴリーリストにも更新マークを。」を再度利用しました。※要PHP

<?
$days=1; //set this to how many days are considered NEW!
$date=strtotime("<$MTDate format="%y%m%d"$>");
$entry=strtotime("<$MTEntryDate format="%y%m%d"$>");
$diff = date("U", ($date - $entry))/86400;
if ($days > $diff) {
echo "<strong>New! </strong>"; //Text to display goes here
}
?>

「days=1」が表示日数。で、ウチは３日にしてちょっと欲張ってみたり（笑）
「<strong>New! </strong>」が表示文字部分。
を、スタイルシートでの命令に使うだけなので、
「<strong>」と「</strong>」を抜いて、「-new」を。

<?
$days=3; //set this to how many days are considered NEW!
$date=strtotime("<$MTDate format="%y%m%d"$>");
$entry=strtotime("<$MTEntryDate format="%y%m%d"$>");
$diff = date("U", ($date - $entry))/86400;
if ($days > $diff) {
echo "-new"; //Text to display goes here
}
?>

を、上で記述した

<h3 class="entry-header"><a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryTitle$></a></h3>

に組み込んでみると。。。

<h3 class="entry-header<?
$days=3; //set this to how many days are considered NEW!
$date=strtotime("<$MTDate format="%y%m%d"$>");
$entry=strtotime("<$MTEntryDate format="%y%m%d"$>");
$diff = date("U", ($date - $entry))/86400;
if ($days > $diff) {
echo "-new"; //Text to display goes here
}
?>"><a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryTitle$></a></h3>

これで、更新されると、class="entry-header-new"になるってわけ。
あとはスタイルシートに、更新されたときのマーク（画像）を指定してあげたものを追加。

.entry-header-new {
padding-left: 45px;/*更新マーク画像とタイトルの位置調整*/
background: url(&lt;$MTBlogURL$&gt;entry_new.gif) no-repeat 0px 0.7em;/*画像自体のアップ場所と位置調整*/
}

んな感じでしょうか。普通のタイトル画像と更新時に表示される画像サイズがウチみたいに違う場合はそれぞれ調整してみてください。
　
これで、最新記事には、一定期間だけclass指定に「-new」が追加されることで、画像が変わるって仕組みです。
　
　
ウチで使ってるタイトル画像および更新マーク画像は、「TRIPPER'S GARAGE - フリー素材のガレージ」さんのモノを使用させていただいております。釣りやアウトドア関係のかわいいアイコンがたくさんあります。