2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次>>こちらもどうぞブログで集客したい!3980円で確実に自分でカスタマイズ!このコラムは連載コラムです。今回は前回のコードの解説の続きですでは早速はじめましょう。今回は前回の解説のつづきでした。CSS編集用画面を開いてください。前回は編集したスタイルシートの1と2の部分を解説しました。メニューのカスタマイズ・背景色のカスタマイズ(解説編その1)前回のコードの確認から修正したスタイルシートのコードは以下の通りでした。#ccccff;}解説では解説です。前回解説したイメージ図を見てください。前回に1と2の解説は終えましたので今回は3のタイトルのエリアと4のタイトル下のエリアをさらに深堀します3と4のエリアについて上の立体イメージの3の部分(イメージ青色の部分)は、サイドメニューのタイトルを包括するブロックです。4の部分(イメージ茶色の部分)はタイトル部分の下の部分になります。細かいコードを解説すると、あなたのあたまがこんがらがってしまってもいけないので、今回はこれらを変更して自由にカスタマイズするポイントを解説したいと思います。上記のコードのどこを触ればよいのかさえ分かればいくらでも変更は可能になります。カスタマイズにおけるポイントこのコードのポイントは上記でCSSコードの赤字の部分にあるカラーコードです。ここでは「#ffffff」(白色)のカラーコードと「#ccccff」のカラーコードが掲載されていることが分かるかと思います。あなたに変更してもらいたいのはこの二つのカラーコードだけです。この部分のカラーコードを変更することであなたが思うがままのサイドメニューの背景色ができあがると思います。以下に私が上記コードを変更して2パターンを作ってみました。今回は乱暴ですが・・・習うより慣れろです。私がどの部分をさわっているから、ブログが変化しているかを確認しながら見てもらうと良いかと思います。ちなみにカラーコードの一覧は、私の過去のコラムでも紹介していますのでそちらもあわせてご確認ください。カラーコードを参照するそれではいってみましょう。変更例1オレンジの枠囲いに、タイトル文字の背景色を白抜きで表現する場合CSS編集画面では以下のようになります。#FF9900;}変更例21を少し変更します。タイトルの背景色を黄色、サイドメニュー本文の背景色(現在は白色)をピンクに変更する。修正箇所は紫の文字CSS編集画面では以下のようになります。次回は続きで、さらにサイドメニューのタイトルの文字サイズを変更する方法を解説します。アメブロカスタマイズガイドは当サイトのカスタマイズサイトマップとなっています。新CSS編集用【2016年3月追加分】アメブロの記事下に定型文を張るためのサンプルカスタマイズ記事下に定型文を挿入する方法が、できなくなる。パソコン初心者でもできる。