小粋空間  -  a cheap joke and a play on words site

１．テンプレートの修正

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

　　　　：
<!-- 中央カラム開始 -->
<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>
<!-- エントリー日付終了 -->
　　　　：

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

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

当サイトで配布しているテンプレート（3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト）の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。

まずはサンプルをご覧ください。

変更前

変更後

以下、変更方法です。

１．固定レイアウト（3カラム／2カラム／1カラム）の場合

リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。

リスト1.1 固定レイアウト（3カラム／2カラム／1カラム）の場合

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}

２．1カラムリキッドレイアウトの場合

リスト2.1に示すスタイルシートの赤色部分を変更します。１項と同様、この設定もスタイルシートの後方にあります。

リスト2.1 1カラムリキッドレイアウトの場合

body.layout-one-column-liquid {
    background: #36414d;
}

３．変更例：背景色をグレーに変更

冒頭のスクリーンショットの「変更後」の設定はリスト3.1のように変更しています。色はお好みに応じて変更してください。

リスト3.1 変更例

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #dddddd;
}

カラーの指定方法は、例えば下記にあります。

eWeb：Web配色の見本：Webセーフカラー216色／カラーネーム一覧

その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。

現在公開中の livedoor ブログテンプレートのリキッドレイアウトに不具合がありました。

具体的には、表示された画面をスクロールアップしてタイトルバナーを見えない状態にして、スクロールダウンしてタイトルバナーを表示するとタイトルバナー上部が真っ白になる、というものです（下）。

原因は、タイトルバナー上に設定されている livedoor ブログの table 要素が影響しているようです。

この不具合を解消するにはスタイルシートのバナー用の設定箇所に width プロパティ（青色）を追加します。

　　　　　　　：
/* タイトルバナー */
.layout-three-column-liquid #banner,
.layout-two-column-liquid-left #banner,
.layout-two-column-liquid-right #banner {
    _width: 100%;
}
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
　　　　　　　：

前述の問題は IE のみ発生し、Mozzila 系ブラウザでは正常に表示されます。逆に width プロパティを Mozzila に適用すると横スクロール常に表示されてしまうという不具合が発生するため、アンダースコアハックで IE のみに適用しています。

なおダウンロードアーカイブは修正済です。
この修正を行うことで下記のようにスクロールによる影響は解消されます。

当サイトで配布している livedoor ブログテンプレートの設定方法です。クリックおよび操作する部分をスクリーンショット内の青枠で示しています。
なお、livedoor IDに登録し、ブログが作成済であることを前提に説明していますので予めご了承ください。

とりあえずログインからスタートします。livedoorブログトップページから右上の「ブログを作成／管理ページにログイン」をクリック。

livedoor ID とパスワードを入力してログインをクリック。

これでブログ管理ページにログインしましたので、上部メニューの「カスタマイズ／管理」をクリック。

次ページで左メニューの「デザインの設定」をクリック。

次ページでページ右下にある「カスタマイズ」または「CUSTOM」の画像をクリック。

これでスタイルシート編集ページが表示されますので、テキストエリアの内容を消去します。スクリーンショットは既に新しいテンプレートに入れ替えた後の内容になってますのが予めご了承ください。

Windows でテキストエリアの内容をまとめて削除するには、テキストエリアの任意の位置をクリックし、その状態で Ctrl+a をタイプ入力するか、マウスを右クリックして「すべてを選択」を選択します。選択できるとテキストが反転した状態になりますので、Delete キーを入力してください。

削除すると、このようにテキストエリアに何もない状態になります。この状態のまま、次の作業に進んでください。

予めダウンロードしたテンプレートアーカイブを解凍し、その中にある「スタイルシート.txt」をダブルクリックするとメモ帳が開きますので、ここに表示されている内容を全て選択状態にします（メニューの[編集]-[すべて選択]で全てが選択されます）。選択状態になったら、Ctrl+c または[編集]-[コピー]を選択します。これで新しいテンプレートがメモリに記憶された状態になりました。

livedoor ブログの編集画面を開いているブラウザに戻り、先ほど空にしたテキストエリアのどこかをクリックして、Ctrl+v または 右クリックで「貼り付け」を選択します。これで先ほどコピーされた新しいテンプレートがテキストエリアに設定されます。その後、下にある「この内容で保存する」をクリックし、変更したテンプレートを保存します。

テキストエリア上部に表示されている「メインページ／個別記事ページ／カテゴリーアーカイブ／月別アーカイブ」のリンクをクリックし、他のテンプレートについてもスタイルシートと同様の手順で入れ替えてください。テキストエリアに設定するテンプレートを間違えないように気をつけてください。

全てのテンプレートの入れ替えが終わったら、左上の「ブログに設定を反映（再構築）」をクリックします。クリックすると左のような画面が表示されますので、プルダウンメニューから「全てのページ」を選択して、その下の「再構築」をクリックします。

「サイトの再構築が完了しました」というメッセージが表示されたら、左上にある「このブログについて」欄にあるブログ名のリンクをクリックし、ブログの表示を確認してください。