現在(2012年12月18日)新しいスキンに変更中なのですが、すべてのページの上部に「お知らせ」欄を設けて、「作業中につき、ご迷惑をお掛けします」という内容のお断りを書いています。
今回はこの「お知らせ」欄を変更する際に1個の原稿でいっぺんに済ませる方法です。
というのも、記事の上に項目を追加するには、通常はスキン(テンプレート)に直接変更を書き込むからです。ただし、ブログのサービスによっては、元々の設定で「お知らせ」欄を一元管理できます。
- livedoorブログ
- ブログの「設定画面」から「基本設定」のページを開いて「メッセージボード」という項目に書き込むとすべてのページの上部に、そのメッセージが表示されます。
上記ブログは、それですべてのページの「お知らせ」を一元管理できます。
それ以外のブログでも同じように一元管理をしたければ、次のようにします。
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です。