過去の記事ページにメッセージボードを表示させる（アメブロカスタマイズ）

二回にわたりご説明したメッセージボードのアレンジでしたが、メッセージボードには欠点があります。

それは過去の記事ページには表示されないということです。トップページにしか表示されません。

すべてのページに表示させてアピールする方法をご紹介します。メッセージボードは使わずに、フリープラグインとＣＳＳを使います。

��１．）メッセージボードをコピーする
すでにメッセージボードを使っている人は、その内容をそのまま移します。
各種設定→メッセージボードの順でクリックし、編集画面を呼び出します。
下の方にある「ＨＴＭＬタグを表示」というボタンを押します。
窓にある内容をすべてコピーしましょう。

コピーできたらメッセージボードの内容を削除します。

��．フリースペースに記述
サイドバー→フリースペース編集の順でクリックします。

��１．）の手順を踏んできた方は、ここにコピーした内容を貼り付けます。
また、今までメッセージボードを使ってなかった方や新しい内容を書きたい方は、ここにすべての記事ページの上に表示させたい内容を記述します。

表示内容を

<div class="AllMessageSpace">
</div>

で挟んでください。表示内容の前に<div class="AllMessageSpace">を置きます。メッセージの最後に</div>を追加します。

��．ＣＳＳを編集
ブログデザイン→デザインの変更→ＣＳＳの編集の順でクリックします。

��ＳＳの最後に以下の記述を追加しましょう

/* 記事上に余白 */
.skinMainArea2{
margin-top:200px; /* メッセージボードの縦幅＋余白 */
}

/* メッセージボードを配置 */
.AllMessageSpace{
width:448px; /* メッセージボードの横幅 */
height:100px; /* メッセージボードのの縦幅 */
border:1px solid #d3d3d3; /* 外枠線 */
background-color:#ffffff; /* 背景色 */
padding:10px;
position:absolute;
top:0px; /* 上から下に移動 */
left:195px; /* 左から右へ移動 */
}

marginやpositionの値を調整してベストの位置を見つけましょう。
��ＳＳの編集画面の「表示を確認する」で見た場合と実際にブログを確認した場合でメッセージの位置が異なる場合もあります。よって、編集後は必ずブログを開いて位置を確認しましょう。