Top | RSS | Admin
infomation
    なにかお報せ事項などがあれば、こちらにしるします


スポンサーサイト

--/--/-- --:--

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


[new!] のスクリプト

2005/10/28 15:56

[yugami-bath]

ブログの記事に、3日くらい「NEW」の文字を入れたいなぁと思っていたのですが、
私が作ったJAVAだとうまく動いてくれません・・・

いつかそういうテンプレートも作って頂けたら・・・と思い、
コメント欄に書かせていただいております。



というお話を賜りました。
ジャバスクリプトかぁ・・、ということで


HPの作り方のサイト等を調べましたが判らず、あきらめかけていたときに

FC2サポートフォーラムのこちらを見て、「これだわ!」と。

で、今回

を【Xmazuシリーズ】の1発目wとして共有テンプレに挙げさせていただきました。



yugami-xmas

↑こちら、ダウンロード後、
ご本人がなーんにもしなくても3日間の〔NEW〕が表示されるよう
あえて、プラグイン非対応で組んでいます。




むろん、プラグイン対応テンプレでも、
プラグインの設定 部分で、ご自身でHTMLにスクリプトを追加いただければ
使用可能です。



〔NEW〕の部分のカラーはご自由に替えられますし、(スタイルシート部分)
現在は3日間の新着に・・、という設定にしてありますが
それを2日間にも、5日間にもお好みで替えられます。(HTML部分)


ダウンロードいただいてソースをご覧くださればご理解いただけるよう、
説明文を入れてあります。

表示は3日経てば自然に消えます。
貴方の更新頻度によりけりで、設定してみてね。




=============

さて・・、お問い合わせくださった方の現在のテンプレ。


yugami-bath-plugin

こちら、プラグイン対応になっておりますので、
(&、最新更新版のテンプレをお使いいただいているようですので)
以下にそれ対応のカスタマイズ方を記しますね。






まずHTMLソース頁を開いてください。
その上のほうに目をこらしてみて。


<!--■■<head>始まり■■-->
<head>

という部分のすぐ下に


<!--▼以下、3日間(72時間)[new]の為のスクリプト-->
<script type="text/javascript"><!--
var today=new Date();
function nw(u1,u2,u3,u4) {
var nt=72; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<span class="new">New</span>')}
}
--></script>
<!--/ここまで▲-->


をコピペで貼り付けてください。




次に、スタイルシートソース部分の一番最後(下)でいいです。そこに

/*●以下、[new]の為*/
.new {color:#000000; font-weight:bolder;}


をコピペで貼り付けてください。この時点で〔NEW〕の文字色は黒になっていますが変更可。




これで準備は整いました。
さあ、
プラグインの設定 画面を開いてみましょう。

まずは・・
最新記事 に〔NEW〕をつけてみましょう。
最新記事のHTML編集を開き
現在、


<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>


となっているかと思いますが(何も手を加えていなければ)
そこにスクリプトを追加します。
追加後を以下に記しますので、追加前のを消してこのままコピペすればOKです。


<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>

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


<!--/recent-->
</ul>





緑色で書かれた部分が追加されたことがお解りでしょうか?

これで、貴方のblogのサイドバーにある最新記事には3日間、〔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>
<!--/[new]スクリプトここまで△-->



間違えやすいのは(わたしも最初は間違えましたw
最新記事の時に加えた

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



をそのままコメントやトラバにも加えてしまうとNGだということです。


最新記事→ recent
コメント→ rcomment
トラックバック→ rtrackback

と、数箇所書き換えないと表示はされませんww<って、誰も間違えないかww





以上が今のわたしのできる精一杯です^^
[NEW]の表示部分を画像で表示したり、ツリー式への対応などは
現段階でわたしの知識の中にはありません。

でも既に、そんなテンプレ([new]機能搭載)を使用されている方、
けっこう沢山いらっしゃいますよ^^
そういうテンプレを探してそちらのソースを研究させていただいたら
もっと素敵にカスタマイズできるんじゃないかしら・・
(ジャバスクリプトには著作権が謳われているものもあるようですので
黙ってお持ち帰りはNGなようですw)










スポンサーサイト

テーマ=ブログカスタマイズ - ジャンル=ブログ

[小技]@ジャバスクリプト  | Top↑






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