2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次>>こちらもどうぞブログで集客したい!3980円で確実に自分でカスタマイズ!このコラムは連載コラムです。今回は前回のコードの解説ですでは早速はじめましょう。今回は前回に設定したスタイルシートのコードの解説編です。CSS編集用画面を開いてください。メニューのカスタマイズ・背景色のカスタマイズ前回のコードの確認から前回のコードは以下の通りでした。解説は今回と次回の2回構成です。下のイメージを見てみてください。サイドメニューの一部を拡大したものです。上記のスタイルシートのコードと上のイメージの番号は対応しているので確認してみてください。これら1~4は、実は下から順番に重なっているんです。言葉では表しにくいので、さらに立体イメージを作りましたのでこちらも見てください。上のイメージを見てもらうと1~4はこのような順番で下から重なりあっていることがご理解いただけるかと思います。1~4の幅は同じということがポイント実は1~4は全て同じ幅と言うことがポイントになります。それが分かると以下のクイズに答えられるはずです♪一度確認してみましょう☆ではクイズです♪1に黒色の背景を指定する2に黄色の背景を指定するこれでプレビューするとあなたにはどう見えると思いますか?「答え」あなたには、黄色に見えるのです。上の条件でさらに3に青色の背景を指定する4に茶色の背景をしてするとどうなるでしょう?「答え」あなたには青色のタイトル背景とその下部分は茶色の背景にしかプレビュー上は分からないはずです。このような重なりの順番を理解することで、どの部分に背景色をつけるとどの部分の背景が変わるかがより理解できるのではないでしょうか?もう一度スタイルシートのコードを確認します。かなりの解説量で申し訳ありません。ひるまずついてこれますでしょうか・・・?(って挑戦的ですみません・・・)。初めに掲載したスタイルシートのコードを再度確認します。このうち今回は1のブロックと2のブロックを見て行きます。*/}.skinMenu2{}赤字で「none」と記されている部分があります。これは1の背景色をなしにする設定をしています。2の部分である.skinMenu2には{}(中括弧)の中が空白となっておりこちらも背景色の設定がありません。上の立体図に照らし合わせるとお分かりだと思いますが、今回の背景色の設定は3のブロックと4のブロックを修正することで全て成立する設定にしているということになります。ここまでを抑えてください。長くなりますので次回3と4の解説をし、あなたのもやもやを晴らしますね♪いつもしつこい解説におつきあいいただきありがとうございました。新CSS編集用【2016年3月追加分】アメブロの記事下に定型文を張るためのサンプルカスタマイズ記事下に定型文を挿入する方法が、できなくなる。パソコン初心者でもできる。