広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

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

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

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

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

livedoorブログ
ブログの「設定画面」から「基本設定」のページを開いて「メッセージボード」という項目に書き込むとすべてのページの上部に、そのメッセージが表示されます。
Seesaaブログ
管理画面の「デザイン」から「コンテンツ」を選択し、開いたページで記事の上下に自由に項目を追加できます。

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

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

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

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

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

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

表示領域の設定

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

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

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

<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;"と書くことで、その部分は非表示になります。普段「お知らせ」がない場合はそこにタイトルも何も表示しません。

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

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

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

<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です。

参考記事:
表テーブルが下がる原因と対処法 <br />タグについて説明しています
モジュールの設置方法 ファンブログでサイドバーに項目を追加する方法を説明しています

新ブログ「Big Bang」で続きを読む