Big Bang

自動で正月の三が日だけブログにお祝いメッセージを表示させる方法です。

１. まず、画像でも文章でもいいので正月に表示するメッセージを完成させてください。

表示場所はどこでも構いません。当然ですが、記事の中だとその記事が開かれないと実行されません。

２. 完成されたメッセージを次のようにHTMLで囲みます。

<div id="new_year_message">ここにメッセージを入れます</div>

次のステップで正月まで非表示になるので、その前にブラウザで表示内容を確認しておいてください。

３. ２で作ったHTMLの直後に下のソースを追加します。

<style type="text/css">
div#new_year_message{display:none;}
</style>

<script type="text/javascript">
<!--
var new_year1=(new Date(2013,0,1)).getTime();
var new_year2=(new Date(2013,0,4)).getTime();
var now=(new Date).getTime();

if(new_year1<=now&&now<new_year2){
  var div=document.getElementById('new_year_message');
  if(div){
    div.style.display='block';
  }
}
// -->
</script>

これで２０１３年の1月1日から1月３日の間だけ、メッセージが表示されます。期間が過ぎた後は表示されませんが、無駄なソースになるので忘れずに削除してください。

注：万が一表示されなかった場合もTomさんは責任を負わないものとします。それをご了承いただける場合のみご使用ください。

誤解があるといけないので、明記しますが、1月1日の午前0時0分0秒から1月4日になる直前までの間にページが読み込まれると、メッセージを表示します。それ以前に開かれていたページには何も起こりません。

既に開いてあるページには、元旦になると同時にメッセージが表示されたりはしませんし、開いているページに表示されているメッセージが1月4日になると自動で消えたりもしません。

現在（2012年12月18日）新しいスキンに変更中なのですが、すべてのページの上部に「お知らせ」欄を設けて、「作業中につき、ご迷惑をお掛けします」という内容のお断りを書いています。

今回はこの「お知らせ」欄を変更する際に1個の原稿でいっぺんに済ませる方法です。

というのも、記事の上に項目を追加するには、通常はスキン（テンプレート）に直接変更を書き込むからです。ただし、ブログのサービスによっては、元々の設定で「お知らせ」欄を一元管理できます。

上記ブログは、それですべてのページの「お知らせ」を一元管理できます。

それ以外のブログでも同じように一元管理をしたければ、次のようにします。

1. まず、サイドバーに「お知らせ」の原稿を書いたパーツを設置する。
2. その「お知らせ」原稿をスタイルシートで非表示にする。
3. JavaScriptで非表示の文章を表示したい場所にコピーしてから、表示する。

お気づきだと思いますが、サイドバーに表示するものはすべて一元管理が出来るので、サイドバーに表示できればいいのなら、一つ目の作業だけで完了です。

これから説明するのは、サイドバーではなく、ブログの記事の上にお知らせを表示する方法です。

「お知らせ」原稿を一元管理せず、ページごとに変える場合は、前回このブログがスキンを変更した時の記事「ブログ記事の前にお知らせ欄を作る」にやり方を書いてあります。

表示領域の設定

上で作業内容として３つの項目を列挙しました。しかし、実際にはその前にひとつ、下準備が必要です。これは、このブログを書いているファンブログを例に説明します。

「ブログ記事の前にお知らせ欄を作る」と同じ要領で実際に表示する場所をスキンに作ります。

ファンブログのスキンには下の箇所があります。

<div id="content">
<div id="entries">
<BlogEntries>

この<div id=”content”>と<div id=”entries”>の間に「<div id=”message” style=”display:none;”><h2>お知らせ</h2></div>」と追加します。

<div id="content">
<div id="message" style="display:none;"><h2>お知らせ</h2></div>
<div id="entries">
<BlogEntries>

<h2>お知らせ</h2>は「お知らせ」欄のタイトルです。不要なら削除してください。

style=”display:none;”と書くことで、その部分は非表示になります。普段「お知らせ」がない場合はそこにタイトルも何も表示しません。

下準備は以上です。ファンブログ以外でもテンプレートを見ながら表示場所を確かめて、追加します。

サイドバーに設置するパーツの内容

サイドバーに次のとおり書いた項目を追加します。これで先ほど３つ列挙した作業をまとめて行ないます。

<div id="message_hidden" style="display:none;">ここにメッセージ本文</div>

<script type="text/javascript">
<!--
var message_area=document.getElementById('message');
var text_area=document.getElementById('message_hidden');

if(message_area&&text_area){
  message_area.innerHTML+=text_area.innerHTML.replace(/\r?\n/g,'<br />');
  message_area.style.display='block';
}
// -->
</script>

.replace(/\r?\n/g,'<br />’)とあるのは自動で改行を<br />に変換するオプションです。不要なら削除してください。この意味が分からなければ削除しないでください。

「お知らせ」の内容を「ここにメッセージ本文」と書いた部分に記入します。先ほど説明したstyle=”display:none;”があるので、サイドバーに文章は表示されません。

今後、変更がある時は「メッセージ本文」だけを変更します。表示するお知らせがないときはサイドバーのパーツを取り外せばOKです。