＞ ＞ ＞ 中央カラムに「ニュース」「お知らせ」を表示する

中央カラムに「ニュース」「お知らせ」を表示する

Posted at April 3,2007 2:08 AM
Tag：[Customize, Template]

中央カラムに「ニュース」「お知らせ」欄を作る公開テンプレートの中央カラムの先頭に「ニュース」「お知らせ」等の、エントリーとは別のちょっとした情報を表示させる方法です。ご質問を頂きましたので本エントリーにて紹介致します。

ここでは Movable Type をサンプルに説明していますが、公開テンプレートであればどれも大体同じカスタマイズで実現可能です。

１．テンプレートの修正

基本は下記のように、テンプレートの中にあるエントリー表示開始位置の少し前に、表示したい情報（青色）を埋め込みます。ここではエントリーと同じスタイルになるようにタイトルと本文を表示しています。

　　　　：
<!-- 中央カラム開始 -->
<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" を与えています。

２．スタイルシートの修正

下記の内容をスタイルシートに追加します。

.news-header {
    margin: 5px 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
}
.news-content {
    margin-top: 5px;
}

設定は以上です、あとは表示したいタイトルと本文をお好きな内容に書き換えてください。

ただしこの方法では、メインページやアーカイブページに同じ情報を表示したい場合、各テンプレート全てを修正する必要があります。次項ではもう少し変更時の手間が省ける方法を紹介します。

３．テンプレートモジュールにする

お知らせ部分を「テンプレートモジュール」として登録すれば、モジュールの中身を書き換えるだけで、他のテンプレートに同じ内容を反映させることができます。

３．１ 新しいテンプレートモジュールの作成

管理メニューより[テンプレート] - [モジュール] - [モジュールを新規作成] の順にクリックし、下記の内容を設定します。

テンプレート名：news
モジュールの内容：下記をコピー

<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>

３．２ テンプレートの修正

テンプレートモジュールの内容を表示させたい位置に MTInclude タグを設定します。

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<$MTInclude module="news"$>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　：

スタイルシートは２項の内容をそのままお使いください。

なおこの方法を利用した場合、テンプレートモジュールの内容を変更・保存しただけではメインページや他のアーカイブページに反映されません。
必ず再構築を実施してください。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ 「お知らせ」の表示を一部にする from 瑞了奇譚
私のブログでは「小粋空間」さんで紹介している「中央カラムに「ニュース」「お知らせ」を表示する」を使わせていただいています。 しかし、これだけのカスタマ... [続きを読む]

Tracked on December 16, 2007 4:29 PM

≫ 「お知らせ」の表示を一部にする from 瑞了奇譚
私のブログでは「小粋空間」さんで紹介している「中央カラムに「ニュース」「お知らせ」を表示する」を使わせていただいています。 しかし、これだけのカスタマ... [続きを読む]

Tracked on December 16, 2007 4:29 PM
コメント

yujiroさん、早速エントリーして頂いてありがとうございます。とても参考になります。

これを基に、TABLEを使って、自分の思うようなデザインにしようとしているところです。
今のところ、なんとか表の高さを変えられないか奮闘中です。

[1] Posted by haru : April 5, 2007 1:16 AM

＞haruさん
こんばんは。
ご連絡ありがとうございました。
また何かございましたらご連絡ください。
それではよろしくお願い致します。

[2] Posted by yujiro : April 5, 2007 5:54 PM

こちらのサイト凄く充実して凄いですねぇ　で、教えて頂きたいのですが、3-2のテンプレートモジュールとはどこのことでしょうか?　よろしくお願い致します。

[3] Posted by たけし : May 8, 2008 10:37 AM

＞たけしさん
こんにちは。
ご質問の件ですが、本文がやや表現不足でした。「テンプレートモジュールの内容を表示させたい位置に MTInclude タグを設定します。」というのは、「３．１項のテンプレートモジュールの内容を表示させたい各テンプレートに、 MTInclude タグを設定します。」が正解です。

「各テンプレート」というのは、MT4であれば、インデックステンプレートのメインページや、アーカイブテンプレートのブログ記事・ブログ記事リストが該当します。
それではよろしくお願い致します。

[4] Posted by yujiro logo : May 8, 2008 6:00 PM

yujiroさん

こちらですが、WordPress日本語版2.5.1にて適用できませんでしょうか？
中央カラムにバナー広告を表示する　ですと、お知らせなどの頻繁に更新するものに
対しては、修正個所が多すぎて管理が辛くなります。

1ファイル更新すれば、ページやアーカイブに変更が反映できる方法が
ありましたらお教え頂けませんでしょうか。

よろしくお願いします。

[5] Posted by タマ : May 9, 2008 11:29 AM

タマさん＞

WordPressのページ機能とか使わない邪道？な方法でしたら下記でいけると思いますよ。

中央カラムにバナー広告を表示する　のタグを使い、外部にお知らせ等を記載するPHPを作成し、index.php/single.php/archive.php等から読みこませればOKです。

具体的には・・・

1.お知らせ用のexample.phpを作成

内容は

<div class="ad">

お知らせ内容

</div>

で書きます。


2.index.php/single.php/archive.php等の表示させたいところに下記を記載

<?php include('example.php'); ?>

挿入位置などはhttp://www.koikikukan.com/archives/2006/08/31-002322.phpをご参考ください。

<div class="blog">

以下でいいと思いますよ。


3.CSSに下記を追加

.ad {
margin:8px 0 18px 5px;
font-size: 10px;
}

フォントサイズなどは適当に修正してくださいね。

これでexample.phpを編集すれば<?php include('example.php'); ?>を挿入したページへの反映が1度でできるようになりますが・・・
WordPressの機能でexample.phpを編集できないのでちょっと不便かもです。

他に編集しやすい方法があればいいのですけどね。


＞yujiroさん

他にスマートな方法がありましたら私にも教えてください(苦笑)

[6] Posted by ken : May 11, 2008 1:08 PM

追加です。

書き込み権限をテンプレートフォルダ等に与えておけば、管理画面→デザイン→テーマエディタ からexample.phpの編集はできそうなのでブラウザオンリーで変更が可能そうですね。
#未検証です。

[7] Posted by ken : May 11, 2008 1:13 PM

＞タマさん
こんばんは。
kenさんの方法をご利用ください。

＞kenさん
こんばんは。
フォロー、ありがとうございました！

[8] Posted by yujiro logo : May 17, 2008 4:07 AM

＞kenさん
ありがとうございます。
お教え頂いた方法でしたい事ができました。

example.phpへ書き込み権限を与えると管理画面→デザイン→テーマエディタから
対象を変更できるので、いつでも更新ができるようになりました。

＞yujiroさん
忙しいのにありがとうございます。
また何かありましたらお願い致します。

[9] Posted by タマ : May 19, 2008 10:14 AM

＞タマさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは！

[10] Posted by yujiro logo : May 19, 2008 6:56 PM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）