タイトルの左にある縦線を消してアイコン画像入れました♪

記事のタイトルが初期では、左側にボーダーがあります。

かわいくしたいので、このボーダーを消して、画像に変更したいと思います。

以下の記述を探します

/* skinArticleHeader 記事タイトルエリア */

この部分がタイトル部分の修正箇所です。

アイコン用の画像をＵＰロードして以下の記述に変更しましょう！

/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader {
background-image:url(http://画像のＵＲＬ );
background-repeat: no-repeat;
background-position: left top;
margin:20px 29px;
padding:2px 10px;

｝

.skinArticleHeader .skinArticleTitle{
padding-left:40px
}

これで画像がタイトルの左側に表示されます。

マージンとパディングは画像の大きさによって変わるので調整してください。

今回はリボンなので、左と位置づけています。

さてさて、タイトルの左にリボンの画像を入れましたが、なんだかうっすらと縦線が残っています。

これは初期設定で書いてあったボーダー？？？

ボーダーの記述は削除して画像がくるように設定はできましたが、どうやら残っている模様。

なので、一行追加して、消しちゃいましょう～♪

/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader {
background-image:url(http://画像のＵＲＬ );
background-repeat: no-repeat;
background-position: left top;
margin:20px 29px;
padding:2px 10px;
border:none
}

この一番最後の

border:none

ボーダーいらない！と言いました。

これで、リボンの隣にあった縦線消えました。めでたしめでたし。

背景画像をカスタマイズ！ 上半分が画像で下は色指定

背景の画像は色々な指定ができますが、大きくわけると以下の２つです。

●背景色を設定する

●背景画像を設定する

背景色の場合は、単色を決めたら設定は完了します。

2012年4月現在のデザインは、上記２個を組み合わせて設定しています。

上部が縦長の背景画像を繰り返し並べています。

画像にグラデーションをかけているので、画像より下の部分は画像になじむよう単色で設定しています。

この設定は以下の記述で行えます。

デザイン変更ページについては前回記事「ヘッダー画像設定の仕方 」を参考にしてください。

編集画面の中の

/* (3-1) ボディ（全体）
--------------------------------------------*/

が、背景全体の変更をするところです。

記事の背景を変更したい、サイドバー（横にあるメニュー）の背景とは違いますので、お気をつけください。

以下のように記述します。

/* (3-1) ボディ（全体）
--------------------------------------------*/

/* skinBody ボディ */
.skinBody{
background:url(http://××××××.jpg );
background-repeat: repeat-x;
background-position: left top;
background-color:#ffffcc;
}/* ←ブログ全体に背景を敷きたいとき */

background:url(http://××××××.jpg );

↑これが背景画像です。先にアップロードしておいてください。

background-repeat: repeat-x;

↑背景画像の繰り返し設定。repeatにすると垂直水平すべて繰り返します。

xはx軸方向に繰り返し。上部にしたい時はこちらを選びます。

yにするとY軸方向に繰り返します。

background-position: left top;
これは位置を表します。上部に指定したいので、topと入れています。

background-color:#ffffcc;

こちらで背景色の設定ができます。上部のみ背景画像なので、ここの設定をしないと、画像より下の部分が真っ白になります。写真画像で背景が白の場合ならこの指定はいりませんが、今回の場合はグラデーション下部の色を背景色にして、なじませています。

この書き方以外の方法もあります。

わかりやすくなるよう、指定ごとに記述しています。参考までに。

※あくまでの私のやり方ですので、カスタマイズされる方はご自身の責任のもとお願いします。

また変更前のスタイルシートをメモ帳やフリーソフトのterapadなどにコピーしてバックアップしておくと上書きして何かあった時に戻せるので便利ですよ♪

ヘッダー画像の設定の仕方

アメブロのカスタマイズをするには、簡単カスタマイズという機能もありますが、私が利用しているのはスタイルシートを直接変更する方法です。

【１】デザインの変更

【２適用中のデザイン「ＣＳＳ編集用デザイン」

【３】ＣＳＳの編集をクリック

クリックすると編集画面が出ます。

まずはヘッダー（タイトル部分）に使用したい画像をアップロードします。

アップロードすると画像のＵＲＬが表示されます。

そのＵＲＬは以下で使用します。

画像のアップローダーの下にあるスタイルシートが修正できる

ウィンドウがあります。

ここを修正するとスタイルシートが適応され、ブログデザインの変更ができます。

それでは、ブログのヘッダー画像の変更をしましょう！

ずずっと見ていると

/* (3-2) ブログヘッダー
--------------------------------------------*/

という記述があらわれます。

今回変更するのはここです。

以下のように変更します。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(http://×××××××.jpg );
height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

ここで使用するＵＲＬが、最初にＵＰした画像のＵＲＬになります。

コピーして貼り付けてください。

heightは画像の高さです。

アップロードした画像の高さに変えてください。

気をつけるのは「;」マークです。

これがなかったり、最後の「｝」がなかったりするとスタイルシートが反映されません。

うまくいかないときはチェックしてください。