フリースペースにも他と同じ背景をつける | 新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン(CSS編集用デザイン)のカスタマイズ
アメーバブログをCSSでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

2011.11.18間違いがありました

<div class="skinMenu themeMenu">

これではテーマのCSSが適用されてしまいます

<div class="skinMenu">


記事中は修正済みです m(_ _)m


++++++++++++++++++++++++

フリースペースにも他のような背景が付けばいいのに・・・


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ



フリースペースの一番最初に


<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader"><span class="skinMenuTitle">●●●フリースペース●●●</span></div><div class="skinMenuBody">


●●●フリースペース●●●にはタイトルを書きます



この間にフリースペースに表示するものを書きます


フリースペースの一番最後に


</div></div></div>


※青字部分の改行はNGです



CSSの編集で一番最後に・・

/*フリースペース*/
.freespaceArea.subModule{
margin:0;
}


見本のブログ



また・・・↓こうすることで見本のようにフリースペースを分けることが出来ます


<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader"><span class="skinMenuTitle">●●●ここはフリースペース1です●●●</span></div><div class="skinMenuBody">


ここにフリースペース1を書きます


</div></div></div><div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader"><span class="skinMenuTitle">●●●ここはフリースペース2です●●●</span></div><div class="skinMenuBody">

ここにフリースペース2を書きます


</div></div></div>



新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ




フリースペースに同じように書くだけで
CSSの編集が出来ないデザインでも使うことが出来ます

(ブログの横幅の広い新しいデザインのブログだけです)

見本のブログ



新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ
フリースペースは改行に注意ください

枠がおかしかったらどこかにおかしな改行があると思います



フリープラグインもメッセージボードも同じようにすることが出来ます

また別の記事で説明します・・・