人気ブログランキング | 話題のタグを見る

エキサイトブログで失敗なしに綺麗な画像をアップさせる方法 CSS編(2)

エキサイトブログで失敗なしに綺麗な画像をアップさせる方法 CSS編(2)_e0223652_22452190.jpg

エキサイトブログで失敗なしに綺麗な画像をアップさせる方法」・「エキサイトブログで失敗なしに綺麗な画像をアップさせる方法 CSS編(1)」に続くシリーズ第3弾です。



エキサイトブログで失敗なしに綺麗な画像をアップさせる方法 CSS編(1)」では、「右クリック禁止ブログパーツ」を使っている人向けのカスタマイズだったんですけど、なかにはこのブログパーツを使ってない(知らない)人も多いと思うので前回よりは汎用性は高めです。

エキサイトブログは画像をアップするときに
エキサイトブログで失敗なしに綺麗な画像をアップさせる方法 CSS編(2)_e0223652_22514213.jpg

こんなアップローダを使います。

このアップローダーがけっこう優れもので画像の配置を「左寄せ」、「中央寄せ」、「右寄せ」する指定が簡単にできます。

それぞれを指定すると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 | エキサイトブログ
<< エキサイトブログでも使えるアク... エキサイトブログでYoutub... >>
LINK LINK LINK LINK LINK

Page Top