今回新たにした作業は

記事タイトルとサイドバーメニュータイトルの文字変更です。
背景を濃いめの青にしているので、文字を水色っぽくしました。
変更は以下のとおり。

/* (1-3) 記事／メッセージボード内の文字のスタイル
--------------------------------------------*/

/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#ffcccc;

}

/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/

/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{
font-size:1.31em;
font-weight:bold;
color:#0066cc;
/*

ここを変更すれば、文字の色や大きさを自由にできます。
背景の色に合わせてお好きにチェンジ♪

もしも、営業さん向けの日誌ブログがあったとしたら…

と、いうことで青バージョンを作ってみました。

★青バージョンへの道のり★
１．デザインを考える
２．画像をアップロード
３．スタイルシート編集

基本はこのスリーステップ!!

早速、営業さん仕様のデザインを開始♪
 
fireworksで作成しています。
画像を書き出したら、アップロードします。

スタイルシートを編集して画像のURLを変更します。
今回は基本はピンクの時の２カラムのまま作成。

作業完了です。

ということで、サイドバーにも同じ画像を使ってカスタマイズしたいと思います！

以下の記述を探します。

/* (3-8) サイドバー　メニュー
--------------------------------------------*/

ここの部分がサイドバーの変更部分です。

現在のテーマがピンク系なのでその色に合わせてバックグラウンドも変更しました。

/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:10px 0 10px 50px;
background:url(http://画像のＵＲＬ );
background-repeat:no-repeat;
background-position:10px 50%;
background-color:#ffcccc;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}

これでサイドバーのメニューの隣にリボンが出来ました

かわゆいー

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

以下の記述を探します

/* 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は画像の高さです。

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

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

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

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

とりあえず入れてみたけれど、これからカスタム☆カスタムですね。

ふむふむ。