HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > ブログカスタマイズ上級 > 変数の裏技を使って 新着表示 を好きな場所に

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

http://arinogotokuatumarite.blog19.fc2.com/blog-entry-102.html
新着 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 # ]

スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-102.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 0件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : ブログカスタマイズ上級

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る