記事内の1部分だけ背景を変えたい!!!

こんばｎ…おはようございますの時間です。いわのりです


今、アメブロカスタマイズを始める前準備　記事を投稿したのですが、

肝心の説明部分が読みにくい＆画像と背景が馴染み過ぎて判りにくいので、
記事内のカスタマイズ関連部分だけ　背景色を変える　CSSとタグを打ちます。


ここで必要なのは…まず、記事を「タグ編集エディタ」で書くこと！！！

「タグ編集エディタ」とHTMLって云うものが判らない人は、
今回は読み飛ばしちゃって下さい

いつか時間がある時にご説明します★



さぁて…背景色を変えるタグは…至極簡単です…が、
この先アメブロカスタマイズを進めていくと、
いつか編集しなければならなくなるはずなので…うん

思いっきりこの記事を書きながら作業しますｗ

まず「スキンCSSの編集」を開きます♪


そしてこのタグ打ち込みました…

/*　記事内背景　*/

.kasutamaizu{
background: #FEE;
margin: 0 20px;
padding: 10px;
}

内容の説明は後述しますー

CSSを追記したら、保存忘れずに★


そして背景色を付けたい記事本文にタグを書きこみます。
ので

んと…背景色を付けたい文章の最初に

‹div class="kasutamaizu" ›

文末には…

‹/div›

と記入して下さい♪


下の画像は、私の最初の記事の背景色を付けたい内容の最初と最後ですｗ
因みに私のブログではその部分を中央揃えにしているので
　align="center"　が入っています。

文頭側　反転させているところが追記部分です！



文末側　こちらも反転させているところが追記部分です♪





そんな訳で
before

after




こんな感じになります

簡単でしょ？？そうでも無い？？？

理屈が判ったら…もっと判りやすいかなってことで、
前述したCSSの中身解説です♪
しかもニワカ知識なのでかなり曖昧です

/*　記事内背景　*/　　←　メモです…記事には反映されません

.kasutamaizu{　　　　←　クラス名なのかな?タグの名前です
background: #FEE;　　←　背景の色指定です。color名でもRGBでもOKです。
margin: 0 20px;　　　←　記事エリアからどれだけ離すか！です。
　　　　　　　　　　　　　この場合…上下は隙間無し　左右20px空けて！！になってます。
padding: 10px;　　　　←　背景色指定エリアの余白です！
　　　　　　　　　　　　　背景と文字の間に全体10pxの隙間を！！って指定です。
}

ざーーーっくりですが、何となく判りますでしょうか？？？
この辺の話は、本家本元なアメブロカスタマイズブログ様を参考にされると、
より詳しくお勉強できますおー

アメブロ向上企画書さん　が易しいかなぁって思います★
大好きなのは　アメブロ カスタマイズでここまで出来るさん　です！！！
憧れます…

いわのりブログは…カスタマイズ解説サイトではないので、
細かくは書きません…というか書けません　ニワカカスタマイザーなので…


では引き続き、カスタマイズ頑張りますー