2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。記事」の解説をします。前回のコラムでは、「記事」部分のスタイルシートの構成を解説しました。今回はそれを踏まえたうえでタイトルの部分に背景を付けるカスタマイズを解説します。今回のコラムのゴールを確認しましょう。このコラムでのゴールは?まず今回のゴールは下のイメージのようになります、分かりやすくするためにタイトルの背景をオレンジにしていますが、これはあなたの好みにあわせて自由にかえられますのでまずはイメージを確認してください。CSSを編集しようでは早速始めます。記事」の部分を以下のように編集します。赤字が編集箇所ですが、かなりの部分をさわっていますので、この部分をまるごとコピーしてあなたのスタイルシートの「記事」の部分に上書きで貼り付けても問題ありません。上のスタイルシートの緑色の部分の数字にそって簡単に解説します。することでタイトルと記事周りの余白をなくし、ぴったりとくっつける設定をしています。余白を増やしてみたいという方は次の2で調整します。余白の設定その2ここはタイトル文と記事周りの余白の設定をしています。記事の枠にぴったりとつけたいため、数字を0としていますが、この数字を増やすと,タイトルと記事枠の間に余白ができます。すると以下のようになります。ボーダーの設定この部分でタイトル文の左にあるボーダーを消去します。タイトルの文字の大きさの設定この部分でタイトルの文字の大きさを設定します。現在は「1.3em」としていますが、ここを調整することでタイトル文字の大きさを変えることができます。タイトルの背景色の設定この部分でタイトルエリア全体の背景色を設定しています。「#FF9900」はオレンジ色を示すカラーコードを表し、このコードを変更することで背景色を変更することができます。私のコラムでカラーコードの一覧表をアップしていますのでそちらを確認しながら、色を変えてみてください。ボーダーの設定その2ここでタイトル文の左側の線の設定を再定義しています。3でボーダーを消去して6で再定義する理由は割愛します。このボーダーがなくてもよい場合は、6を消去します。borderのあとにつづく数字(今回は5px)を大きくすると線が太くなります。#ffffffとありますが、これがボーダーの色を示すカラーコードになります。タイトルとボーダーの余白の設定ここではタイトル文とボーダーの余白を設定します。現在10pxとなっている部分を調整することで、タイトル文とボーダーの余白の間隔を変更することができます。ちなみに6のボーダーの一文を消去した場合は当然ですが、こちらの7の一文もいりません。タイトル文の文字色の設定ここでタイトル文の文字色を設定します。現在は#ffffffとなっていて白色のカラーコードが設定されています。カラーコードを参考するまとめ記事のタイトル部分に背景をつけたり、青色だったタイトルの文字色を変更することで見やすいブログになることと思います。最後に、タイトルの背景色を変更すれば当然サイドバーのタイトルの背景色とのバランスが悪くなってしまいます。・・・サイドメニューの詳細はのちほどの解説にはなりますが、今回の変更に合わせて、一緒にカスタマイズすると良い部分を一点だけ補足しておきます。メニュー」の部分を確認してください。その中に以下のようなコードがあります。赤字に変更した部分がサイドメニューのタイトル色が記載されているカラーコードなので、あなたが指定したタイトル部分の背景色に合わせて変更してみてください。※下記コードは今回の例に合わせて既に、カラーコードを変更しています。*/}これでプレビューでは以下のようになります。上のイメージのように、タイトルの背景とサイドメニュータイトルの背景色を変更し、色のバランスを見てみてください。次回は記事の本文の部分のカスタマイズをします。新CSS編集用【2016年3月追加分】アメブロの記事下に定型文を張るためのサンプルカスタマイズ記事下に定型文を挿入する方法が、できなくなる。パソコン初心者でもできる。