エキサイトブログで失敗なしに綺麗な画像をアップさせる方法 CSS編(2)
「エキサイトブログで失敗なしに綺麗な画像をアップさせる方法」・「エキサイトブログで失敗なしに綺麗な画像をアップさせる方法 CSS編(1)」に続くシリーズ第3弾です。
「エキサイトブログで失敗なしに綺麗な画像をアップさせる方法 CSS編(1)」では、「右クリック禁止ブログパーツ」を使っている人向けのカスタマイズだったんですけど、なかにはこのブログパーツを使ってない(知らない)人も多いと思うので前回よりは汎用性は高めです。
エキサイトブログは画像をアップするときに
こんなアップローダを使います。
このアップローダーがけっこう優れもので画像の配置を「左寄せ」、「中央寄せ」、「右寄せ」する指定が簡単にできます。
それぞれを指定するとimgタグに「.IMAGE_LEFT」、「.IMAGE_RIGHT」、「.IMAGE_MID」っていうclassセレクタが自動的に付与されるので、このセレクタを使って画像に枠線とかをCSSをつかってつけることができます。
公式スキンのCSSにはこの設定がなされていて、一番人気のスクエアベーシックのCSSはこんなかんじです。
IMG.IMAGE_LEFT {スキンによってこの設定は違ってるかもしれないので一応確認してみてください。
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 10PX;
}
IMG.IMAGE_RIGHT {
MARGIN-LEFT : 10PX;
MARGIN-BOTTOM : 10PX;
}
IMG.IMAGE_MID {
MARGIN-TOP : 15PX;
MARGIN-BOTTOM : 15PX;
}
単純に余白を白くして枠線をつけるだけだったら、以下をCSSに追加してください。
IMG.IMAGE_LEFT,IMG.IMAGE_RIGHT,IMG.IMAGE_MID {上の設定だと左・中・右をまとめて定義してますけど個別に変えることも可能です。
padding:5px;
background-color:#ffffff;
border:solid 1px #cccccc;
}
by killingmoon581
| 2012-02-28 23:03
| エキサイトブログ