こんにちはー
CSS勉強中スタッフです。
お花見の頃だね
今日はメニューにアイコンをつけてみるよ
こんな感じ↓
プロフィールって書いてある左に歯車みたいなギアみたいなアイコン
をつけてみた改造がテーマのブログだから、ギアだよ
｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.
作業全体の流れはこんな感じ
まず アイコンにしたい画像を用意！かわいいアイコン？かっこいいアイコン？
画像はCSS編集の上のところからアップロードしておいてね
CSSを書くCSSはCSS編集の一番下に書いてみてね
こんな感じのCSSを書くよ↓
.skinMenuHeader{
background:url(http://xxxxxxxxxx) no-repeat;
background-position:4px 50%;
padding-left:20px;
}
｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.
CSSの中身について、行ごとに説明してみるよ
↓太字にアイコン画像のパスを入れる。アップロードした画像のパスを入れてみてね
background:url(http://xxxxxxxxxx) no-repeat;
↓太字にアイコン画像をどの位置に置くかを入れる
background-position:4px 50%;
初めの値「4px」が左からどれくらいか
二番目の値「50%」が上からどれくらいか
を指定しているよ
もし、左から 0px 上から 1pxにしたいならこうなるよ
値は pxでも %でも指定できるよ
background-position:0px 1px;
50%って書くと画像の中央が中心にくるよ
↓太字にメニューの文字の左の余白を指定する アイコンと文字が被らないように文字の左の余白を指定するよ
padding-left:20px;
もし、アイコンが大きかったら 文字の左の余白も大きくなるはず
padding-left:50px;
｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.
できたかな？
今回は細かい調整が入ったからちょっと難しかった。。
難しかった人は、このブログの基礎編や初級編からやってみてね
CSS編集をやってみたけど、なぜかうまくできない。原因が分からない人→この記事を見てみてね
CSS？カスタマイズ？って 何かよく分からない人→この記事を見てみてね
※このブログのカスタマイズは、「CSS編集用デザイン」 を使ったもので、CSS編集用デザイン以外のCSS編集に対応していません。
※画面や仕様は記事が投稿された時のものです。