アメブロカスタマイズのアメプロ～Amepro～ https://ameblo.jp/ameblo-new-css/ アメブロカスタマイズについて細かいところまでご説明しております。　※こちらのカスタマイズは『CSS編集用デザイン』のみ対応です。 ja 背景複数つけよう！①～ヘッダーを永遠に～ 今日は、ヘッターが横にずっと続くようにしてみたいと思います。


チャレンジするのは以下のような画像のヘッターがずっと続くように！！



アメブロカスタマイズのアメプロ～Amepro～


まず、ヘッターを敷きます。　→ヘッダーを敷くには・・・


そして、ウィンドウの上の部分からヘッダーの下までの長さを調べます。


調べたサイズの高さの画像を用意します。


幅はいくらでもかまいません。


いよいよCSSです。


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


/* skinBody ボディ */
.skinBody{

（ここには一番下の背景が入っています）→こちらをご覧ください

}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{

（今回はこちらにCSSを入れます）

}
.skinBody3{}


CSSは（今回はこちらにCSSを入れます）に入れます。


background:url(http://*****);
background-repeat:repeat-x;


を追加します。


background-repeat:repeat-x;は横にだけ繰り返すという意味です。


青文字は画像のURLを入れてください。


これで完成です！

 ]]> https://ameblo.jp/ameblo-new-css/entry-11349113251.html Sat, 08 Sep 2012 09:49:17 +0900 ヘッダー画像を入れてみよう！ 今回は、ブログの顔であるヘッターを入れてみましょう！！


ヘッターを敷く方法は・・・


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


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{

（ここにCSSを入れます）

}/* ←ブログヘッダーに背景画像を敷きたいとき */


/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}


/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
}


/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{}


９８０ｐｘのヘッター画像を用意します。


そして（ここにCSSを入れます）のところに


background:url(http://******);

height:300px;


を追加します。


青文字は画像のURLを入れてください。


これで完成です！


 ]]> https://ameblo.jp/ameblo-new-css/entry-11349105539.html Sat, 08 Sep 2012 09:35:04 +0900 アメブロカスタマイズ質問募集！！ いつもブログをご覧いただきありがとうございます。


今回、アメブロカスタマイズに関する質問を募集します。


よろしければ質問をお寄せください。


　→　質問はこちら


待ってま～すラブラブ



]]> https://ameblo.jp/ameblo-new-css/entry-11348699764.html Fri, 07 Sep 2012 21:15:59 +0900 記事枠の色を変えてみよう！！ 今回は、記事枠の色を変えてみたいと思います。


これも結構簡単にできます。


/* (3-6) 記事
--------------------------------------------*/

/* skinArticle 記事エリア */
.skinArticle{
/* 注　ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:3px solid #ff6699;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}


/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #ff6699;
}
.skinArticleHeader2{}


/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}


/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 29px 0;
border-top:1px dotted #949494;
}

上のようなCSSを探して青色のカラーコードを変えるだけです。


是非チャレンジしてみてねっチョキ




]]> https://ameblo.jp/ameblo-new-css/entry-11348215368.html Fri, 07 Sep 2012 07:36:22 +0900 背景を敷いてみよう！！ 今回は、背景を敷くことにチャレンジしてみようと思います。


背景を敷くには・・・


/* skinBody ボディ */
.skinBody{


○●○●○●○●○●　←　ここに目的に応じて追加していく！


}
.skinBody2{}
.skinBody3{}


■背景に色を敷く


　背景に色を敷く場合には　background:#000000;　を追加します。


　　※青文字に敷きたい色を記入してください。


■背景に画像を敷く


　背景に画像を敷く場合には　background:url(http://*****);　を追加します。


　　※青文字に敷きたい画像のURLを入力してください。


背景は、いろいろ追加することによってアレンジできます！！


そのやり方についてはまた後日ご紹介いたします。



]]> https://ameblo.jp/ameblo-new-css/entry-11348082415.html Fri, 07 Sep 2012 00:06:02 +0900 『アメーバID登録（無料）』の背景を変えてみよう！ 今回は、『アメーバID登録（無料）』の背景の変更にチャレンジしてみます！


アメーバID登録（無料）ってどこにあるの？


アメブロチョコっといじる君のブログ

上の丸で囲まれたところの背景を変更したいと思います。


変更する位置は・・・


/* (2-1) ボタン[横180px 縦35px]
--------------------------------------------*/


/* ボタンの背景画像 ※[横180px 縦35px]のボタンの背景画像を指定 */
.skinImgBtnM{
background-image:url(http://*******************);
}


/* ボタンの文字色 */
.skinImgBtnM:hover span,.skinImgBtnM:focus span,.skinImgBtnM span{
color:#333333 !important;
}

これは、結構簡単です。


上の青文字の画像URLを変更するだけオッケェ～ラブラブ


なお、画像サイズは180×35で作ってください。


さらにさらに・・・


もう一歩、ステップアップしたカスタマイズにチャレンジしてみましょうｗｗ



/* (2-1) ボタン[横180px 縦35px]
--------------------------------------------*/


/* ボタンの背景画像 ※[横180px 縦35px]のボタンの背景画像を指定 */
.skinImgBtnM{
background-image:url(http://*******************);
}

/* ボタンにマウスオーバー */
.skinImgBtnM:hover,.skinImgBtnM:focus{
background-image:url(http://*******************);
}

/* ボタンの文字色 */
.skinImgBtnM:hover span,.skinImgBtnM:focus span,.skinImgBtnM span{
color:#333333 !important;
}

のように赤文字を追加することによってマウスを載せると背景がかわるようになるよ！！


ピンクの文字を変更すると文字色を変えることができます。


いろいろカスタマイズにチャレンジしてみるのもおもしろいかもっチョキ



]]> https://ameblo.jp/ameblo-new-css/entry-11348071299.html Thu, 06 Sep 2012 23:54:53 +0900 プロフィールの読者ボタンなどの背景をチョコっと変更！ プロフールの読者ボタンとは、以下のような赤枠で囲った部分です。


アメブロチョコっといじる君のブログ

今回は、そのボタンの背景を変えてみたいと思いますｗｗ


/* (2-2) アイコン付きボタン[横128px 縦28px]
--------------------------------------------*/


/* アイコン付き ボタンの背景画像 ※[横128px 縦28px]のボタンの背景画像を指定 */
.skinImgBtnS{
background-image:url（http://*******************);

}


.skinImgBtnS:hover span,.skinImgBtnS:focus span,.skinImgBtnS span{
/*
アイコン画像は下記から指定
menu_icons_pastel.png (パステル）
menu_icons_gray.png（グレー）
menu_icons_black.png（黒）
menu_icons_white.png（白）
*/
background-image:url(http://********************);
color:#333333 !important;/* ←ボタンの文字色 */
}

これは、結構簡単です。


上の青文字の画像URLを変更するだけオッケェ～ラブラブ


なお、画像サイズは128×28で作ってください。


さらにさらに・・・


もう一歩、ステップアップしたカスタマイズにチャレンジしてみましょうｗｗ


/* アイコン付き ボタンの背景画像 ※[横128px 縦28px]のボタンの背景画像を指定 */
.skinImgBtnS{
background-image:url（http://*******************);

}

/* ボタンにマウスオーバー */
.skinImgBtnS:hover,.skinImgBtnS:focus{
background-image:url(http://*******************);
}

.skinImgBtnS:hover span,.skinImgBtnS:focus span,.skinImgBtnS span{
/*
アイコン画像は下記から指定
menu_icons_pastel.png (パステル）
menu_icons_gray.png（グレー）
menu_icons_black.png（黒）
menu_icons_white.png（白）
*/
background-image:url(http://********************);
color:#333333 !important;/* ←ボタンの文字色 */

font-size:12px;
font-family:富士ポップＰ;
}



赤い文字を既定の位置に青文字の画像URLを入力して追加すると・・・


マウスオーバーすると（マウスを上に乗せると）画像が変わっちゃうんです！！


緑色の文を追加するとsizeがフォントサイズ、familyがフォントスタイルで変更が可能です。


これも、一味違っていいかもしれません＾＾


ぜひ、チャレンジしてみてね～チョキ



 ]]> https://ameblo.jp/ameblo-new-css/entry-11280824045.html Thu, 06 Sep 2012 17:59:55 +0900 ブログタイトルをチョコっとアレンジ♪ 文字を変更する際は、以下の示すところをいじってみてください。


(1) 文字のスタイル


/* (1-2) ブログタイトル文字
--------------------------------------------*/


/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;　　　　←ブログタイトル文字の色
font-weight:bold;
font-size:2.11em;　　　←　ブログタイトル文字のサイズ
}


/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;　　　←　説明文字の色
}


「(1)文字スタイル」の「(1-2)ブログタイトル文字」の青文字をそれぞれ変えると変更できます。


また、こんなアレンジもできるよ音譜


/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;　　　　←ブログタイトル文字の色
font-weight:bold;
font-size:2.11em;　　　←　ブログタイトル文字のサイズ

　（ここに、いろいろ追加するとアレンジできるよ！！）


}


/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;　　　←　説明文字の色

　（ここに、いろいろ追加するとアレンジできるよ！！）



}


たとえば、こんなものを入れてみてはいかがでしょう？


フォントスタイル（例　MS　ゴシック、富士ポップ）


　font-family:富士ポップ（好きなフォントの名前を入れてみてねｗｗ）;



説明のほうでは、サイズを設定したり、スタイルなどの設定もできるのでチャレンジしてみてね＾＾



]]> https://ameblo.jp/ameblo-new-css/entry-11280803680.html Wed, 05 Sep 2012 17:46:21 +0900