クライアント様向け｜メッセージボードを更新する際の注意事項

今回は特定のお客様に向けての内容となります。当サービスの無料サポートでは、メールでお答えしづらい内容の場合、下記のようにアメブロ記事を使ってご説明しています。

ボード内の本文を編集する際における表示不具合の原因は、お使いのブラウザ（インターネットエクスプローラー：IE）の仕様によるものです。その理由についは、いずれご説明するとして、まずは以下が基本的なソース構造となります。

基本：

<div class="skinMessageBoard4">
<div class="skinMessageBoard5">
<div class="skinMessageBoard6">
メッセージボードの内容
</div>
</div>
</div>
<p class="readerRequestBtn"><a href="http://blog.ameba.jp/reader.do?bnm=bm-loveletter"><img width="192" height="37" border="0" src="http://copyself.jp/ameblo/loveletter/img/btn_reader.gif" alt="西宮・苦楽園 ベビーマッサージ教室 LoveLetterの読者になる"></a></p>

編集画面を「タグの非表示」から「HTMLタグを表示」に切り替えてください。表示されるソースの中で、以下のHTMLタグが確認できると思います。ボード内の本文を修正する際はピンクの箇所、<div class="skinMessageBoard6"></div>、のタグが重複（一回以上は使わない！）しないようにする必要があります。

現状：

<div class="skinMessageBoard4"><div class="skinMessageBoard5"><div class="skinMessageBoard6"><span style="COLOR: rgb(255,102,0)">■ベビーマッサージ開催日時 </span><br />
3月30日（金）11時～12時半　満員御礼<br />
4月16日（月）11時～12時半　受付中！<br />
<br />
※詳しいスケジュールは<a href="http://ameblo.jp/bm-loveletter/theme-10049204794.html">こちらのページ</a>
 からどうぞ！</div>
</div>
</div>
<p class="readerRequestBtn"><a href="http://blog.ameba.jp/reader.do?bnm=bm-loveletter"><img width="192" height="37" border="0" src="http://copyself.jp/ameblo/loveletter/img/btn_reader.gif" alt="西宮・苦楽園 ベビーマッサージ教室 LoveLetterの読者になる"></a></p>

失敗例：

<div class="skinMessageBoard4"><div class="skinMessageBoard5"><div class="skinMessageBoard6"><span style="COLOR: rgb(255,102,0)">■ベビーマッサージ開催日時 </span><br />
3月30日（金）11時～12時半　満員御礼<br />
4月16日（月）11時～12時半　受付中！</div>
<div class="skinMessageBoard6">4月23日（木）11時～12時半　受付中！<br />
<br />
※詳しいスケジュールは<a href="http://ameblo.jp/bm-loveletter/theme-10049204794.html">こちらのページ</a>
 からどうぞ！</div>
<br />
<p class="readerRequestBtn"><a href="http://blog.ameba.jp/reader.do?bnm=bm-loveletter"><img width="192" height="37" border="0" src="http://copyself.jp/ameblo/loveletter/img/btn_reader.gif" alt="西宮・苦楽園 ベビーマッサージ教室 LoveLetterの読者になる"></a></p>
</div>
</div>

ご指摘いただいた「一回改行しただけで、ものすごく隙間が空いてしまいます…」という原因は、改行（キーボードのエンターキー）した際に、上記タグも自動的にコピペされてしまうという、ブラウザ「IE」の独特の癖によるものです。

成功例：

<div class="skinMessageBoard4"><div class="skinMessageBoard5"><div class="skinMessageBoard6"><span style="COLOR: rgb(255,102,0)">■ベビーマッサージ開催日時 </span><br />
3月30日（金）11時～12時半　満員御礼<br />
4月16日（月）11時～12時半　受付中！<br />
4月23日（木）11時～12時半　受付中！<br />
<br />
※詳しいスケジュールは<a href="http://ameblo.jp/bm-loveletter/theme-10049204794.html">こちらのページ</a>
 からどうぞ！</div>
</div>
</div>
<p class="readerRequestBtn"><a href="http://blog.ameba.jp/reader.do?bnm=bm-loveletter"><img width="192" height="37" border="0" src="http://copyself.jp/ameblo/loveletter/img/btn_reader.gif" alt="西宮・苦楽園 ベビーマッサージ教室 LoveLetterの読者になる"></a></p>

解決先としては、
・本文修正後、画面を切り替え、上記タグが重複していた場合は削除
・始めから「HTMLタグを表示」画面上でコピペなどの編集作業を行う

慣れないうちは少し面倒かもしれませんが、タグと本文の関係を理解すれば簡単ですよ。
間違っても当方でフォローしますので、まずはお試しください。※クライアント様限定

補足事項：

改行：<br />
テキスト色：<span style="COLOR: rgb(値)"></span>
リンクの追加：<a href="リンク先のURLアドレス"></a>

以上、アメブロカスタマイズ＆ホームページ制作*Mydesignの*Copyselfでした。
アメブロカスタマイズ料金プラン＆過去の制作実績はコチラからご覧いただけます。

アメブロカスタマイズ*Mydesign

プロのデザイン力で魅せるブログに集客カスタマイズ！アメブロカスタマイズやホームページ制作ならお任せください！

クライアント様向け｜メッセージボードを更新する際の注意事項