☆スタイルシートのいじり方☆アイコン編

スタイルシートのいじり方！

まずはアイコン（お友達、グループ、最新ブログ、最新パーツレビュー、最新整備手帳など一覧が書いてある左側にある小さな部分→アイコン）の変更です！自分はお友達やブログの文字の左側にあるキューブを設定するやり方です！
リンク先に
行ってみた方がわかりやすいかもしれないですが見て頂けたらうれしいです！
まず・・・。
①みんカラの左にあるメニューの中にあるスタイルシートを選択。
②そうすると下にカスタマイズがあります。
（まず、画像ですがＧＩＦ画像なら問題ないですが小さい方がいいですよ！）
③スタイル画像？っていうところでを先にここに画像を取り込みます。
④そこに自分のパソコン内にある画像を持っていき登録するとＵＲＬが出てきます。
⑤そこのＵＲＬはあとで使いますんでコピーしておいて下さい！
⑥つぎにスタイルシートのカスタマイズ１のほうを選択し編集します。
⑦そうすると宇宙語が沢山出てきます！！
その中から下のものを見つけて！！

.Title
{
background-position: 0px 2px 0px 0px;
margin: 1px 0px 9px 0px;
padding-left: 19px;
font-weight: bold;
font-size: 16px;
background-image: url('/styles/black/point.gif');
vertical-align: middle;
color: #eee;
background-repeat: no-repeat;
background-color: transparent

}
⑧color: #eee;
↑これは文字の色を変える事が出来ます！

⑨background-image: url('/styles/black/point.gif');
下線部分を登録した画像のURLに置き換えます。（注意：そのとき’この中に画像のＵＲＬ’を入れてください！）

⑩この時点でプレビューすると、ブログ部分のアイコンが変更になっていたりしなかったり。。で、必ず半分切れています！
ここで、画像が切れてたり、記事タイトルが画像にかぶってしまう場合は、以下でサイズを変更します。

⑪
padding-left: 19px;
下線の数字を調整します。これは、アイコン画像の横幅＋画像横の空白部分の数値を指定するので、
何回か試してみて調整してください。
私は横幅32ピクセルの画像を使用しているため、空白部分8ピクセルを足して、40px;としています。私みたいな車の画像なら40です！他は微調整が絡んできますんでなんともいえませんが20～40で
変更してみてください。そうすると文字がかぶらなくなります！

⑫
次は高さの調整。
これは、1行書き足します。（コピーＯＫ）
padding: 10px;
この設定は 上から何ピクセル下に縦の位置を合わせるか、という設定です。
プレビューしながら調整してみてください。

⑬
{}内の、padding-leftの上に1行足します！。
{}ないならどこでもいいとおもっていましたが駄目でした・・。（paddingだけで 上下左右の設定が出来るので、padding-leftの行必要ないのですが、ややこしくなりそうなのでこれで）
ブラック、ピンク以外の方は padding-leftがなく、padding 3px 15px 2px 19px;という記述になっているかと思います。
この場合は、4つ目の19pxが左からのスペース設定だと思います。上からはどれか分かりません。たぶん2番目じゃないかな？？と予想してますが、分からないので、いろいろ試してみてください。

これで、ブログ部分のアイコンの変更が完了します。

⑭次、.Titleの下に
.ProfileTitle
{
background-position: 0px 0px 0px 0px;
margin: 10px 0px 9px 0px;
padding-left: 16px;
font-weight: bold;
font-size: 14px;
background-image: url('/styles/black/point.gif');
vertical-align: middle;
color: #EEEEEE;
background-repeat: no-repeat;
background-color: transparent

}
があります。

設定はブログ部分と同様です。（下線部分の変更です）
これでプロフィール部分のアイコンの変更になります。

お友達、グループ、最新ブログ、最新パーツレビュー、最新整備手帳など一覧が書いてある部分のアイコンです。（変更になります！）

なぜか、お友達の部分のアイコンだけ、画像が切れてしまいましたが、原因不明ですんでここは気にしないで・・・。

⑮
次に愛車紹介ページ
ブログやプロフィールに比べると、かなーーり離れて下の方に 下記項目があります。

.CarTitle
{
color: #EEEEEE;
font-size: 16px;
font-weight: bold;
padding-left: 17px;
background: url('/styles/black/point.gif') no-repeat 0px 0px;
}

これも同じように設定します。

これで、ブログ、プロフィール、愛車紹介のページでアイコンの変更が出来ていると思います。

いかがでしょうか？？
すべていろんなところから参考にしたものばかりです。


アイコン画像はここがお勧めです↓
http://www.za.ztv.ne.jp/kamichan/