きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第3回 アイコンを変更する♪ 〜 コンポーネント領域

<<   作成日時 : 2008/02/03 11:47   >>

ブログ気持玉 0 / トラックバック 0 / コメント 2

前回のCSS編集で背景画像と背景色の変更を加えたことで、
ブログ全体のイメージも変わっていい感じになってきました。

でも、このままの設定では気になる点が残っています。

画像


赤い枠の部分のアイコンの周りが白っぽいですね。
アイコンが前回のデザインテンプレート用のため、
前回設定した背景色と合っていません。
この部分のアイコンを背景に合うように替えてしまいましょう♪
今回はこれらのアイコンを替えるためのCSS編集をしたいと思います。


まずはアイコンを用意します。
アイコンは作成してもいいですし、ウェブで素材を探すのもいいでしょう。
また、使うアイコンは背景色が変わっても違和感無いように、
絵の回りが透過しているものがいいと思います。

見出しに使う画像は、幅 32px × 縦 32px のGIFイメージを用意しました。
※実はこの用意した見出しのアイコン画像では、後々問題が出てきます
後で説明しますがこのまま説明を続けます。


リスト部分は見出しよりちょっと小さめのが見やすいですね。
幅 15px × 縦 15px のGIFイメージにしました。





 コンポーネント領域のアイコンを変更する♪ 

それでは編集してみますね(にこ)
この部分を探してください。

 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 

/*-------------- コンポーネント群 --------------*/
#utilities{
}

/* コンポーネント見出し(共通) */
#utilities h2{
}

/* コンポーネント内リスト(共通) */
#utilities ul{
}




まずは、見出し部分のアイコンです。
『/* コンポーネント見出し(共通) */』のところです。
『 #utilities h2{ 』の後に、次の文字列を追加します。

background-image:url(見出しアイコンのURL);
background-repeat: no-repeat;
padding:0px 0px 0px ▲px; height:●px; border:none;


見出しアイコンのURL 』は見出しアイコンのURLに置き換えます。
URLを入力する際には改行を入れずに1行で入力してください。
は画像の横幅、は画像の高さをそれぞれいれてください。


次にリスト部分のアイコン。
『/* コンポーネント内リスト(共通) */』のところです。です。
『 #utilities ul{ 』の後に、次の文字列を追加します。

list-style-image:url(リストアイコンのURL);

リストアイコンのURL 』をリストアイコンのURL置き換えます。

/*-------------- コンポーネント群 --------------*/
#utilities{
}

/* コンポーネント見出し(共通) */
#utilities h2{
background-image:url(見出しアイコンのURL);
background-repeat: no-repeat;
padding:0px 0px 0px ▲px; height:●px; border:none;

}

/* コンポーネント内リスト(共通) */
#utilities ul{
list-style-image:url(リストアイコンのURL);
}



書き込んだら設定ボタンをポチっと押すとアイコンが変わります(にこ)
これで背景色とアイコンの回りの違和感なくなったましたね。

画像


でもよく見ると見出しのアイコンと横の文字がずれています(しょぼ)
アイコンを貼り付ける際に余白を設定する必要があるんですね。
ここで注目するのが『 padding:0px 0px 0px ▲px; 』の部分で
す。

padding 』というのが、余白を設定する記号で、
padding 』の後の『 0px 0px 0px ▲px 』は
余白のサイズを表します。
数値は左から順番に『 上、右、下、左 』 が指定場所になります。
先程の『 0px 0px 0px ▲px 』は、
左から▲ピクセル余白を空ける』という意味です。


上に書いたようにアイコンの上下の調節をするのですが、
用意したアイコンで調整を行っても、画像の表示が切れたりしてうまくいきません。
なんでかな〜?と思ってたんですが…




どうやらこれが原因らしいです。
ここの文が改行されて2列になっているためにずれたみたいです。
丁度アイコンの縦の中心と2列の文の中心が一緒くらいになっています。


【追記 08/04/28】
アイコンのずれは選択しているデザインシートのデザイン指定によるもののようです。
原因はともあれ、以下の回避策に変更はありません。



そこで、アイコンのサイズを 8px ずつ上下に増やして
幅 32px × 縦 48px の大きさのGIFイメージに加工してみました。
加工したアイコンに合わせて余白の調整をしたところ…、

画像


これでアイコンと文字が揃い見栄えも良くなりました。
ちなみに、うちのブログでアイコンと文字が揃うようになった数値は…

padding:30px 0px 0px 32px; height:32px; border:none;

アイコンの縦のサイズが違っていますが文字は揃ってます(〃▽〃;A アセアセ・・
アイコンと文字が揃うように、実際のアイコンのサイズをごまかしてる感じかな?

うちのPCでは揃っているように見えていますが、
もしかするとPC環境によっても見え方が違うかもしれません。
この件についてはまたじっくり確認してみたいと思いますが、
とりあえず現状のままでオーケーとしておきます。


なにはともあれ、これでアイコンと文字が揃いましたね(ういんく)

※アイコンの上下左右の位置設定は大きさや余白、横の文字の大きさで変わります。
何度か数値を入れなおして確認しながら設定を行ってください。





 Spcial Thanks
今回使用したアイコンは Field's Color 様から頂きました。
アイコンの加工もOKとなっていたので余白の加工をさせてもらっています。
〜 Field's Color 〜
手描きメインの淡い色を使ったやわらかい感じの素材やカット、
また上品な手書きフォントなどを作成しておられます。


※ウェブで見つけた素材を使用するにあたって
作者様の意向で素材の加工がNGとなっているものもあるので注意してください。




それでは、今回はこのくらいで(わら)
次回は、記事本体部分のアイコンを替えたいと思います♪


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
mairisさん、初めまして。
「Field's Color」のsoukaです。
ゲストブックへの書き込みありがとうございました。
アイコンなどは勝手が合わないとなかなか使いにくいですよね。
このような加工は私は全く気にしません(むしろ推奨です)ので、上手にされて楽しんで使ってくださいね。
素材の使用に併せて、ステキな説明もありがとうございました。
これからもよろしくお願いしますね。
souka
2008/02/05 22:03
soukaさん、こんにちは。
わざわざご来訪していただき光栄です。
書き込みまでしてもらってありがとうございます。
そのように言ってもらえて嬉しいです。

素材の雰囲気がとても気に入っていますので、
アイコンだけでなく他の素材もまた使わせていただきます。

それでは、また。
いろいろとお世話になりありがとうございました。
こちらこそよろしくです(ぺこ)
mairis
2008/02/06 20:06

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編)第3回 アイコンを変更する♪ 〜 コンポーネント領域 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる