お知らせ欄一括変更スクリプト

現在（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です。