新着記事に「New」をつける

今回はブログの記事タイトルの横に新着マーク(「New!」など)を表示させる方法です。

新着記事のタイトルの横に「New」マークがついているブログありますよね(#^.^#)
↓ こんなふうに…。
(それぞれの画像をクリックしてください。サンプル表示されます。左は「new!」を文字だけで表示、右は画像で表示してあります。)
new!_moji    NEW_gazou
これは「テンプレートの設定」画面で「HTML編集」を触ると簡単にできます。

<head>~</head>の間に以下(どちらか)を貼り付けます。
(よくわからない場合は</head>の直前に貼り付ければよいと思います。)

赤の太字の数字「24」は、このマークを表示させる時間です。
この場合は24時間表示されるという意味です。
12時間表示の場合はこの「24」の数字を「12」に変更します。
【文字で表示させる場合】

<script type="text/javascript"><!--
function nw(u1,u2,u3,u4) {
var today=new Date();
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<font color="#ff0000" size="x-small;">new!</font>')}
}
--></script>
この例では「ff0000」の部分が文字色、「x-small」は文字の大きさ、「new!」が表示させる文字ですので、お好みでこの部分を変更してください。

【画像で表示させる場合】

<script type="text/javascript"><!--
function nw(u1,u2,u3,u4) {
var today=new Date();
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<img src="http://blog-imgs-32.fc2.com/x/x/x/xxxxooo/12345.gif" border="0">')}
}
--></script>
こちらは、青字の部分が表示させる画像をアップロードしたURLになります。

次に下記を新着マークを表示させたい場所に貼り付けます。
<a id="<%topentry_no>" name="<%topentry_no>"><script type="text/javascript">
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
</script>
HTML編集の中からタイトル部分を探し出します。

09071003.gif
私の今使っているテンプレートだと赤く囲んだ部分の直前に↑を挿入するとタイトルの前に表示され、青く囲んだ部分の直後に↑を挿入するとタイトルのあとに表示されます。

09071004.gif
テンプレート作者さんの違うテンプレートもほぼ同じで、このテンプレートの場合でもこの赤や青色で囲んだ部分の直前、直後に挿入すると表示されます。


関連記事

7 Comments

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009/07/11 (Sat) 00:18 | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009/07/11 (Sat) 10:46 | REPLY |   

れん  

鍵コメ2009/07/11(Sat) 00:18様

うまくできてよかったです♪
もう一つの方は後日記事にしますね(#^.^#)

2009/07/11 (Sat) 14:41 | REPLY |   

れん  

鍵コメ2009/07/11(Sat) 10:46様

こんにちは。
そちらのブログに秘密コメントでコメント入れましたのでご覧くださいね。
もしまだ不明の点があればご連絡ください。

2009/07/11 (Sat) 14:43 | EDIT | REPLY |   

ニュータイガー8  

済みません

こんにちは

れんさん出来ましたよ!有り難うございます
・・・・ただ私のお願いのテーマとは違っていました、私が教えて頂きたかったのは、
例えばれんさんのブログ画面の左側にプラグイン有りますよね、
そこに『お気に入り」のにリンクされたブログ名が並んでいますね、その中に上から6番目に「いきまっしょ~い!」と言うブログ名の右にUPのマークがでていますね、これが表示されれば記事の更新が分かりますので便利だと思いお願いした次第です・・・私の説明不足で済みませんでした・・・UPの表示の仕方をお願いします

2009/07/11 (Sat) 15:05 | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009/07/11 (Sat) 15:15 | REPLY |   

れん  

ニュータイガー8様

今日その記事を書いてみました。
外部サービスに登録しなければ、この機能が使えませんが、よろしければ参考にしてみてくださいm(__)m

2009/07/11 (Sat) 18:36 | EDIT | REPLY |   

Post a comment