ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > スポンサー広告 > title - 最近の記事・コメント・トラックバックにNEW画像をつけたい! TOP > カスタマイズをしよう! > title - 最近の記事・コメント・トラックバックにNEW画像をつけたい!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

最近の記事・コメント・トラックバックにNEW画像をつけたい!

今回は記事が新しく投稿されてから24時間の間、最近の記事・コメント・トラックバックにNEWの画像がつく方法を紹介します。

最近の記事にNEWの画像をつける方法

【参考記事】 「FCafe」様:新着マーク

まず画像がない事にはつけれませんから「new 素材」などで検索して設置したい画像を見つけてきて下さい。

気に入った画像が見つかったら、それをアップロードしてその画像のアドレスを把握しておきます。

準備ができたら、管理画面のテンプレートの設定からHTMLの編集を開きます。そして</head>を探します。「Ctrl」+「F」などの検索を使うと楽ですよ。

このブログの場合は・・・
title="<%nextentry_title>" /><!--/nextentry-->
</head>
<body>
この様になっていました。

<script type="text/javascript"><!--
var today=new Date();
function nw(u1,u2,u3,u4) {
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<img src="画像URL">')}
}
--></script>

見つかったらこれをコピーします。

コピーしたら先ほど見つけた</head>のすぐ上にコピーしたものを張りつけます。
title="<%nextentry_title>" /><!--/nextentry-->
<script type="text/javascript"><!--
var today=new Date();
function nw(u1,u2,u3,u4) {
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<img src="画像URL">')}
}
--></script>

</head>
<body>
この様に張りつけます。

張り付けたら最後の方の('<img src="画像URL">')}の画像URLをさっきアップロードして把握したアドレスに付け替えます。

僕ならdocument.write('<img src="http://blog-imgs-41.fc2.com/r/g/r/rgrg/new.gif">')}の様になります。

次に管理画面の環境設定からプラグインの設定を開きます。そしてあなたがNEWをつけたいプラグインを開きます。今回は最近の記事にNEWをつける例で進めていきます。
開いたら次は上の方にあるHTMLを編集するをクリックします。

すると・・・
<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>
この様になっていますよね。

ここの赤字で書いた</a>の後に

<script type="text/javascript">
nw(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script>

を挿入します。

<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
<script type="text/javascript">
nw(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script>

</li>
<!--/recent-->
</ul>
この様になります。これで完成です。さっそく記事を投稿してNEWの画像がつくか確認してみて下さい。

この方法だと24時間以内に投稿された記事に対してNEWの画像がつきます。この時間を変えたければ一番最初に設置した<script type="~~~--></script>の中のnt=24の数字を変えれば変わります。(1時間単位)

最近のコメントにNEWの画像をつける方法

他にコメントにNEWをつけたければ、

<script type="text/javascript">
nw(<%rcomment_year>,<%rcomment_month>,<%rcomment_day>,<%rcomment_hour>)
</script>

を最近のコメントのプラグインの該当場所に挿入する。

最近のトラックバックにNEWの画像をつける方法

トラックバックにNEWをつけたければ、

<script type="text/javascript">
nw(<%rtrackback_year>,<%rtrackback_month>,<%rtrackback_day>,<%rtrackback_hour>)
</script>

を最近のトラックバックのプラグインの該当場所に挿入する。

この方法はプラグイン対応のテンプレートの人が対象です。もしプラグイン非対応のテンプレートを使っている人はテンプレートの設定のHTMLの編集にある最近の記事・コメント・トラックバックの該当場所に最後に紹介した物をそれぞれ挿入して下さい。
プラグインがよくわからない人はプラグインって何?を読んでみて下さい。

できたので「FCafe」のdanielさんにお礼を言いに行く。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
始めまして。
PC初心者がブログしております。
ブログ内でリンクしている相手が記事を更新した時に、NEWマークが付くやり方が分かりません。
教えていただけると嬉しいです。宜しくお願いします。
さやマリンままさんへ
始めまして。
リンクしている相手が記事を更新した時に、NEWマークがつく様にするには普通にリンクするだけではつきません。
http://rgrg.blog61.fc2.com/blog-entry-360.html
こちらの記事をご覧下さい。
「BlogPeople」というサービスを使ってリンク集をつくれば更新時にNEWマークをつけれますよ。NEWマークをつけたいほとんどの人がこのサービスを使ってますよ!
少し理解するのに時間がかかりましたが、リンクにNEWマークつける事が出来ました~♪♪
教えていただきありがとうございました。
これで少しずつ自分の思い通りのブログに近づいています!(^^)!

事後報告ですが、こちらのサイトリンクさせていただいています。
今後とも利用させてください。
宜しくお願いします。
BlogPeople
BlogPeopleって最初理解するのに少し時間かかりますよね~。僕もそうでした!
でもリンクはリンクで結局はあまり変わらないのでそこまで難しくないんですけどね。
足跡のNEWマークカワイイです!!お役に立ててよかったです。
リンクしていただいてありがとうございました!こちらこそよろしくお願いしますね!
素材屋さんで見つけたかわいいnewマークをつけることができました!
ありがとうございました☆
ただもう一つ知りたいことがあります。
私のテンプレートでは最近の記事や最近のコメントの欄に日付が入るようになっているようなのですが、この日付がつくことによって、せっかくのnewマークが段がづれて付いてしまうので、日付がつかないようにしたいんです。
しかし、私はまだ自分でHTMLを解読できないので、この日付がつかないようにするにはどうしたら良いのか、わかりましたら教えて欲しいのです。
よろしくお願いします!
栞ママさんへ
newマークつけれて良かったですね!!
「mika-ring」を見たら最近の記事や最近のコメントにすでに日付が入っていないから解決できたみたいですね。
ちなみに <%recent_month> とか <%rcomment_day> などの日付に関係する単語が入っているタグを消すと日付は消えます。
ありがとうございました!
ブログ始めたばかりの、素人主婦です。
どうしてこうなるのか、という部分は全くわかっていませんが(笑)
こちらにある通りにコピーして貼り付けていったところ
新着マークを付けることができました。
ありがとうございました!
みーちゃんママさんへ
お役に立てたようでよかったです。
自分もなぜ新着マークがつくのかは完全にわかっていません(笑)
1から考える人は本当にすごいですよね!!
長いこといろいろなサイトを探し回ってもつけられなかったNewマークが
こちらの説明のとおりにやったらとうとうできました!
丁寧な説明でとてもわかりやすく、本当に感謝してます^^
ところが・・・・
文字でNewマークを表示させるとちゃんと出るのですが、画像にすると
段ズレしてしまうのですが、これはなにが原因なのでしょう;
あと、新着コメントにもマークが出るようにしたいのですが、ツリー化して
あるため、プラグインのHTMLに、説明のような
「<ul><!--recent--><li &align>・・・・・」という部分がありません。
この場合はスクリプトをどこに入れたらよいのでしょうか><
きささんへ
とりあえずNewマークをつけられておめでとうございます!!

ツリー化してある時のスクリプトを入れる位置は、
recent_body>"><%recent_title>[ココ]</a>(<%recent_month>/
[ココ]の部分に入れて下さい。
後ろから2番目の</a>の前です。

画像にすると段ズレしてしまうのは、たしかスタイルシートの画像部分などをいじればよかったと思います。きささんのブログを見たのですが、ちょうどNEWマークがなかったのでズを確認できませんでした。また今度見てみますね!
とてもわかりやすく、参考にさせていただいています♪
本当にありがとうございます。
ところが少し問題が発生しまして・・・
どうも行間がヘンにつまったりとするみたいなのですが、どこが原因なのでしょうか;
マークがつくとどうやら行間がつまってしまっているようです。
同じ新着記事でもマークがついていないものは正しい行間で表示されています。
どうかよろしくお願いいたします;
ありがとうございます!
るんばばさんの「スタイルシートの画像部分をいじれば・・・」という
お言葉を参考にあれこれやってみたら、
ズレずにちゃんと表示されるようになりました!
どうもありがとうございました(*^^*)
希紗さんへ
スタイルシートをいじってズレが直ったようでよかったです!!
的確なアドバイズではないけれど、ちょっとはお役に立てたようでよかったです。
兎和さんへ
ブログを見させてもらったのですが、新着マークがついていても別に行間がつまって見えることはなかったのですが、もう直ってしまいましたか?
それともブラウザの違いでその様に見えないだけでしょうか?
たこ焼き
「最近の記事」の所で
「ツリー化」 「NEW画像」を1つずつなら出来るんですが
これを一緒にしようとするとうまくいきません・・。orz

どうすればこれを同時に表示できるんでしょうか?

よければご指導おねがいします (。-人-。)
すいません・・。
↑に書いてあった通りにやってみたら
なんとか「ツリー化」 「NEW」の同時表示が
できました・・。(´・ω・`;A)

お騒がせしてすいませんでした orz
最近の記事にNEWの画像をつける方法
こちらの記事を参考に
無事にマークをつけることが出来ました^^
ありがとうございました!
あと少しなのですが・・。
はじめまして。わかりやすいご説明に助けられています。
まだブログをはじめて1か月未満です。
記事とコメントにnewを表示させたいのですが、アップロードした画像のアドレスを把握・・というのがよく分らないのです。
このアドレスとはどういったものなのでしょうか?
初歩的なミスで、申し訳ありません。
HTMRの編集や、プラグインの設定は、正確にできました。
ちなみに、るんばば様が例に出されています、document.write('<img src="http://blog61.fc2.com/r/rgrg/file/new.gif">')}を使ってみたのですが・・。
画像は出てこず×しるしが出てきました・・。
お忙しいとは思いますが、ご回答宜しくお願い致します。

また、私はhobbypのテンプレートを使っていますが、太文字に対応できないのです。
記事をアップすると通常の字に戻ってしまうのです。
こちらの質問は、こちらでは無理でしたら別途改めますので!


わかりました!
アドレスはプロパティを見れば良かったのですね。
ご説明通りにしたら、できました!ありがとうございました!
また、お世話になると思いますm(__)m
たこ焼きさんへ
「ツリー化」 「NEW画像」の両方できてよかったですね。コメントのやりとりの中でしか書いていないので、わかりづらかっと思います。申し訳です。
ichimarugo-いちまるごさんへ
最近の記事にNEWマークをつけられておめでとうございます!!
のぞみさんへ
はじめまして。アドレスの説明が少しわかりづらかったですね。アドレスは色々な方法で確認することができます。プロパティでもわかるし、画像をクリックして左上のアドレスにも表示されますし、記事を書くボタンを押すとテキスト入力欄にアドレスが表示されます。あと例は実際に書くとこんな感じになりますよというあくまでも例なので画像はでないですね。

太文字に対応できないのは、スタイルシートの最初の
* {
margin : 0;
padding : 0;
font-style : normal;
font-weight : normal;
font-size:12px;
word-break:break-all;
}
の部分の font-weight : normal; を削除すると太文字にも対応できるのではないでしょうか?
ありがとうございます。
ご丁寧にお返事くださっていたのですね。
どうも有難うございました。
おかげで、新着マークをつけることができました。
これからも、いろいろ頑張ってみます!
のぞみさんへ
返信が遅くなってしまって申し訳なかったです。
新着マークをつけられて良かったですね!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/151-1b579c68   

Template Designed by DW99

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。