中央カラムに「ニュース」「お知らせ」を表示する
公開テンプレートの中央カラムの先頭に「ニュース」「お知らせ」等の、エントリーとは別のちょっとした情報を表示させる方法です。ご質問を頂きましたので本エントリーにて紹介致します。
ここでは Movable Type をサンプルに説明していますが、公開テンプレートであればどれも大体同じカスタマイズで実現可能です。
1.テンプレートの修正
基本は下記のように、テンプレートの中にあるエントリー表示開始位置の少し前に、表示したい情報(青色)を埋め込みます。ここではエントリーと同じスタイルになるようにタイトルと本文を表示しています。
:
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>
<MTEntries>
<$MTEntryTrackbackData$>
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
:
追加部分全体を div 要素で括り、エントリーと同じ class="entry" を与えています。これで全体のスタイルがエントリーと同じものになります。
その下のタイトルは class="news-header" という新しい class 属性を与え、表示位置を整えています。また本文の p 要素にも class="news-content" を与えています。
2.スタイルシートの修正
下記の内容をスタイルシートに追加します。
.news-header {
margin: 5px 0;
color: #444444;
font-size: 12px;
font-weight: bold;
}
.news-content {
margin-top: 5px;
}
設定は以上です、あとは表示したいタイトルと本文をお好きな内容に書き換えてください。
ただしこの方法では、メインページやアーカイブページに同じ情報を表示したい場合、各テンプレート全てを修正する必要があります。次項ではもう少し変更時の手間が省ける方法を紹介します。
3.テンプレートモジュールにする
お知らせ部分を「テンプレートモジュール」として登録すれば、モジュールの中身を書き換えるだけで、他のテンプレートに同じ内容を反映させることができます。
3.1 新しいテンプレートモジュールの作成
管理メニューより[テンプレート] - [モジュール] - [モジュールを新規作成] の順にクリックし、下記の内容を設定します。
テンプレート名:news
モジュールの内容:下記をコピー
<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>
3.2 テンプレートの修正
テンプレートモジュールの内容を表示させたい位置に MTInclude タグを設定します。
:
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
<$MTInclude module="news"$>
<MTEntries>
<$MTEntryTrackbackData$>
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
:
スタイルシートは2項の内容をそのままお使いください。
なおこの方法を利用した場合、テンプレートモジュールの内容を変更・保存しただけではメインページや他のアーカイブページに反映されません。
必ず再構築を実施してください。