|
前回のCSS編集で背景画像と背景色の変更を加えたことで、 ブログ全体のイメージも変わっていい感じになってきました。 でも、このままの設定では気になる点が残っています。  赤い枠の部分のアイコンの周りが白っぽいですね。 アイコンが前回のデザインテンプレート用のため、 前回設定した背景色と合っていません。 この部分のアイコンを背景に合うように替えてしまいましょう♪ 今回はこれらのアイコンを替えるためのCSS編集をしたいと思います。 まずはアイコンを用意します。 アイコンは作成してもいいですし、ウェブで素材を探すのもいいでしょう。 また、使うアイコンは背景色が変わっても違和感無いように、 絵の回りが透過しているものがいいと思います。 見出しに使う画像は、幅 32px × 縦 32px のGIFイメージを用意しました。 ※実はこの用意した見出しのアイコン画像では、後々問題が出てきます 後で説明しますがこのまま説明を続けます。 リスト部分は見出しよりちょっと小さめのが見やすいですね。 幅 15px × 縦 15px のGIFイメージにしました。  コンポーネント領域のアイコンを変更する♪ それでは編集してみますね（にこ） この部分を探してください。 B 『 トップ、月別、テーマ別ページ 』 CSS 全体Map /*-------------- コンポーネント群 --------------*/ まずは、見出し部分のアイコンです。 『/* コンポーネント見出し(共通) */』のところです。 『 #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置き換えます。 /*-------------- コンポーネント群 --------------*/ 書き込んだら設定ボタンをポチっと押すとアイコンが変わります（にこ） これで背景色とアイコンの回りの違和感なくなったましたね。  でもよく見ると見出しのアイコンと横の文字がずれています（しょぼ） アイコンを貼り付ける際に余白を設定する必要があるんですね。 ここで注目するのが『 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となっていたので余白の加工をさせてもらっています。  手描きメインの淡い色を使ったやわらかい感じの素材やカット、 また上品な手書きフォントなどを作成しておられます。 ※ウェブで見つけた素材を使用するにあたって 作者様の意向で素材の加工がNGとなっているものもあるので注意してください。 それでは、今回はこのくらいで（わら） 次回は、記事本体部分のアイコンを替えたいと思います♪ |ω・)ﾉｼ See you♪ |彡 ｻｯ  【 CSS編集（スタイル編） 】 ・ オリジナルデザインのブログを作ろう♪ ・ 第１回 タイトル画像を変更する♪ ・ 第２回 背景の画像と背景色を変更する♪ ・ 第３回 アイコンを変更する♪ 〜 コンポーネント領域 現在地 ・ 第４回 アイコンを変更する♪ 〜 ページヘッダ部分 ・ 第５回 トラックバック、コメント領域も変えてみよう♪ ・ 第６回 一覧の画像と罫線のサイズと色♪ ・ 第７回 ブログの幅を広げてみよう♪ ・ 第８回 いろんな場所の線のデザインをいじってみよう♪ ・ 第９回 コメントの入力欄の高さを変える♪ ・ 第１０回 コメントを区切る罫線のデザイン♪ （要考察） 【 CSS編集（フォント編） 】 ・ ブログのフォントのデザインを変えてみる♪ ・ 第１回 トップページのフォント♪ 『タイトル〜プロフィール』 ・ 第２回 トップページのフォント♪ 『新着記事一覧』 ・ 第３回 リンクの付いているフォント♪ 【再編集】 ・ 第４回 コンポーネント領域ののフォント♪ ・ 第５回 記事ページのフォント♪ 『タイトル 〜 記事題名』 ・ 第６回 記事ページのフォント♪『 関連テーマ 』 【 ブログ編 】 ・ ウェブリブログでパンヤの絵文字〜フリースペースの活用♪ |
| << 前記事（2008/02/03） | トップへ | 後記事（2008/02/03）>> |
| タイトル （本文） | ブログ名／日時 |
|---|
| 内 容 | ニックネーム／日時 |
|---|---|
mairisさん、初めまして。 |
souka 2008/02/05 22:03 |
soukaさん、こんにちは。 |
mairis 2008/02/06 20:06 |
| << 前記事（2008/02/03） | トップへ | 後記事（2008/02/03）>> |
ノ
