ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
FC2ブログ  Newマーク  javascript  変数  コメント  

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

変数の裏技を使って 新着表示 を好きな場所に

2010/01/04 (月)  カテゴリー: ブログカスタマイズ上級
新着 Newマーク

新着コメントが付いたこと 皆さんはどのように確認していますか? 

  1. 自分のブログで確認 
  2. 管理ページで確認 
  3. お知らせメールを受信 
  4. RSSフィードを利用 

私は、「自分のブログで確認」 することが一番多いのですが、 上のナビゲーションメニューを開かないと確認できないのがちょっとネックで... 「今日はコメント無しか。。。」 「今日も無しか。。。」 「今日もコメント無しか。。。」 こんな作業を数日続けているとだんだん嫌に(?)なってきます。

プルダウン式などではなくても、最近のコメント一覧(リスト表示)が ブログのかなり下の位置 にあるサイトも結構多いと思うので、「新着コメントあり!!」 っていうのが一目で判る方法があったら便利 ではないでしょうか?


新着コメント や 新着記事がある場合、そのお知らせ (例:Newマーク) を好きな場所に1つだけ表示する方法

畳紙(kofumo) さんの裏技 『リスト型変数の内容を最初の1つだけ出力する』 を使ったら、その希望が叶いました。 Newマークなどを 好きな場所に1つだけ表示できます♪

ベースになるスクリプトには FCafe(daniel) さんの 新着マーク を使わせていただいてます。 私はテキストを使っていますが、画像などでもOKです。

新着Newマークの設置方法 (導入例)

共有テンプレートユーザーさん向け に このテンプレートでの導入例 を載せておきます。

1. テンプレートの <head> ~ </head> 部分 に以下を記入

<script type="text/javascript">
// <![CDATA[
var today=new Date();

function newC(u1,u2,u3,u4) {
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<span style="color:#ffff66">&#187;</span>');
} else {
document.write('&#187;');
}
}

function newE(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="newmark">New</span>');
} else {
document.write('<span class="t_fff">&#187;</span>');
}
}

// ]]>
</script>

var nt=72; 部分には 何時間以内のものに Newマーク を付けるかという設定を入れます。72だと 3日以内で、24なら 24時間以内 のような設定です。

&#187; は » と表示されます。 document.write 部分はお好みで書き換えてください。 document.write('<img src="http://xxxxxxx/newmark.gif" alt="new" />'); などとすれば画像にもできます。
else { } (そうでなければ・・・) 部分は必要なければ省いてOKです。
数ヶ所で使用する場合、表示したい時間 や 表示したい内容 が同じであれば併用が可能で、 変えたい場合は function 関数名(u1,u2,u3,u4) 以下を追加します。

上の内容であれば、外部スクリプト化 しても使えます。 逆に <head> 部分に入れておけば、document.write に変数を入れて使うことも可能なので... 使い道は無限大??

追記 : 2010/01/07 
外部スクリプトで使う場合、document.write 部分に「日本語」を使ってしまうと、Opera でバグが起こり、その周囲のレイアウトが崩れてしまうようです。 文字コードを指定したり、エンコード化したものを使ってみてもダメでした IE,Firefox,Chrome では大丈夫だったのに。。。 しぶしぶ title="新着あり" などの日本語部分を 削除。問題なく表示できるようになりました。

外部スクリプトの1行目に
// 日本語なんだってば! とかコメントを入れたら、ちゃんと表示できるようになりました...が、ちょっと不安なので日本語は入れずに様子をみます。

2. 新着を表示させたい場所に 太字スクリプト を追加

※追記:2011/01/10 以下ソースの一部を修正しました。 変更箇所を分かりやすく書くと ↓ のようなものになっています。 間違えないように丸ごとコピーがおススメです。
<%年>,'<%月>','<%日>'-0,'<%時>'-0
Paroday さん、ありがとうございました!

[ 記事(変更した理由など) : Newマーク 表示スクリプト を少し変更しました。 ]

↓ 通常の適用方法 例:トップページ にある最近の記事一覧 の場合
<ul class="top_r">
<!--recent-->
<li>
<a href="<%recent_link>" title="<%recent_body>">[<%recent_year>/<%recent_month>/<%recent_day>] <%recent_title></a>
<script type="text/javascript">
newE(<%recent_year>,'<%recent_month>','<%recent_day>'-0,'<%recent_hour>'-0);
</script>

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

<!--recent--> <!--/recent-->(最近投稿されたエントリーの一覧を表示する リスト型の変数,繰り返しの変数) の中で使っているので、設定した時間内の記事 があれば、Newマーク はいくつでも表示されます。いわゆる普通の使い方。

裏技を使った適用方法 例:上部ナビゲーション(メニュー)部分 の場合
<!--==========区切り-->
<li>
<a href="./?xml&amp;comment" class="navitop" target="_blank">最近のコメント <script type="text/javascript">
newC(<!--rcomment--><%rcomment_year>,'<%rcomment_month>','<%rcomment_day>'-0,'<%rcomment_hour>'-0<!--not_edit_area--><!--/rcomment--><!--rcomment--><!--/not_edit_area--><!--/rcomment-->);
</script>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_month>/<%rcomment_day> <%rcomment_name><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="<%rcomment_link>"><span class="sentence"><span><%rcomment_title></span><%rcomment_body> …</span><br />親記事 「<%rcomment_etitle>」 へ</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--/rcomment-->
<li><a href="./?xml&amp;comment" title="コメントのRSSフィード" target="_blank">Comment RSS</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->
<li>
<a href="./page-0.html" class="navitop">最近の記事 <script type="text/javascript">
newE(<!--recent--><%recent_year>,'<%recent_month>','<%recent_day>'-0,'<%recent_hour>'-0<!--not_edit_area--><!--/recent--><!--recent--><!--/not_edit_area--><!--/recent-->);
</script>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<!--recent-->
<li>
<a href="<%recent_link>">[<%recent_year>/<%recent_month>/<%recent_day>] <%recent_title><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li class="r_sentence"><%recent_body> …</li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--/recent-->
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->

※共有テンプレートのデフォルトの状態では Comments Trackbacks New Entries の並び順で メニュー部分が英字表記 になっています、貼り付けの際はご注意ください。

ちなみに トラックバック の場合 は ↓ 下のスクリプトを加えます。
<script type="text/javascript">
newC(<!--rtrackback--><%rtrackback_year>,'<%rtrackback_month>','<%rtrackback_day>'-0,'<%rtrackback_hour>'-0<!--not_edit_area--><!--/rtrackback--><!--rtrackback--><!--/not_edit_area--><!--/rtrackback-->);
</script>

<!--rcomment--> <!--/rcomment-->(投稿されたコメントを新着順に一覧表示する リスト型の変数,繰り返しの変数) や <!--recent--> <!--/recent-->(最近投稿されたエントリーの一覧を表示する リスト型の変数,繰り返しの変数) を使っているのに、kofumo さんの裏技 を使うと、どういう仕様なのか 最初の1つだけ出力されます。

もし将来、この不思議な仕様が変わったとしても、このような使い方なら大きな不具合が起きることはないので (この場合、常に 「新着あり!」 の状態になるだけなので。その時がきたら止めればOK?) 充分使えるのではないでしょうか?

3. スタイルシート に ↓以下を記入

/* NewMark */
.newmark {
color:#ff6699;
font-weight:bold;
font-family:'Times New Roman';
}
.top_r .t_fff {
display:none;
}

display:none; は 私の使い方での調整用 です。

[ 参照 : リスト型変数の内容を最初の1つだけ出力する - 畳紙 ]
[ 参照 : FCafe 新着マーク ]
[ 参考 : 初心者でもできる簡単FC2ブログの作り方 新着マークをつけたい! ]
[ 関連記事 : FC2ブログ共有テンプレート ari_seo シリーズ # ReadMe # ]

キーワード検索 : FC2ブログ  Newマーク  javascript  変数  コメント  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-102.html

2010/01/04 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-0 Comment

コメントを投稿する 記事: 変数の裏技を使って 新着表示 を好きな場所に


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

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