今回は枠の前面に武将絵が出てきている画像について
このような(他にも本願寺や吉川等特には多くいます)
![](https://blogimg.goo.ne.jp/user_image/25/19/528c9a71ce0215375df00612a47186aa.jpg)
ちょっと拡大
![](https://blogimg.goo.ne.jp/user_image/12/0c/5f0a8910655126b6d6eb7d269a8913ba.jpg)
簡単な理屈
これは周りを透明化した武将絵を前面に置き、背景を別にしています(普通は背景自体に武将絵があります)
この場合は画像変更する場合、そのままですと武将が見えず、また見えるようにしても今度は枠が見えなくなります
よって武将の周りを透明化するか、もしくは
![](https://blogimg.goo.ne.jp/user_image/57/e8/bb3f9e44ac3054aa96b478ffac20a61b.jpg)
このような絵を用意してください。透明化が面倒ならば最初から枠を重ねるように切り貼りして絵に組み込む方法が簡単です。周りの赤枠(上なら黄、序なら青)を入れない場合は下のようになってしまいます
![](https://blogimg.goo.ne.jp/user_image/4a/ef/8983c485fd14abe3a0529b8e1b9f0469.jpg)
命令文は
/* 3025 宇喜多 */
img[src$="chara/3025_nH6S5Qp2.png"] { background: url("http://img139.imageshack.us/img139/108/89q.jpg") no-repeat !important; width: 0 !important; padding: 315px 224px 0 0 !important; }
img.smallcard_chara[src$="3025_nH6S5Qp2.png"] { background: url("http://img829.imageshack.us/img829/5808/89qsmoopng.png") no-repeat !important; width: 0 !important; padding: 162px 116px 0 0 !important; }
通常武将では赤文字の部分はbackgroundですがcharaと変更するだけです
完成
![](https://blogimg.goo.ne.jp/user_image/6f/f3/5d6789b713a31f0742d564861cda99c6.jpg)
3回に分けて説明しましたが、大体これだけ知っていれば十分だと思います。
後は自分で色々と試しながら楽しんでください
このような(他にも本願寺や吉川等特には多くいます)
![](https://blogimg.goo.ne.jp/user_image/25/19/528c9a71ce0215375df00612a47186aa.jpg)
ちょっと拡大
![](https://blogimg.goo.ne.jp/user_image/12/0c/5f0a8910655126b6d6eb7d269a8913ba.jpg)
簡単な理屈
これは周りを透明化した武将絵を前面に置き、背景を別にしています(普通は背景自体に武将絵があります)
この場合は画像変更する場合、そのままですと武将が見えず、また見えるようにしても今度は枠が見えなくなります
よって武将の周りを透明化するか、もしくは
![](https://blogimg.goo.ne.jp/user_image/57/e8/bb3f9e44ac3054aa96b478ffac20a61b.jpg)
このような絵を用意してください。透明化が面倒ならば最初から枠を重ねるように切り貼りして絵に組み込む方法が簡単です。周りの赤枠(上なら黄、序なら青)を入れない場合は下のようになってしまいます
![](https://blogimg.goo.ne.jp/user_image/4a/ef/8983c485fd14abe3a0529b8e1b9f0469.jpg)
命令文は
/* 3025 宇喜多 */
img[src$="chara/3025_nH6S5Qp2.png"] { background: url("http://img139.imageshack.us/img139/108/89q.jpg") no-repeat !important; width: 0 !important; padding: 315px 224px 0 0 !important; }
img.smallcard_chara[src$="3025_nH6S5Qp2.png"] { background: url("http://img829.imageshack.us/img829/5808/89qsmoopng.png") no-repeat !important; width: 0 !important; padding: 162px 116px 0 0 !important; }
通常武将では赤文字の部分はbackgroundですがcharaと変更するだけです
完成
![](https://blogimg.goo.ne.jp/user_image/6f/f3/5d6789b713a31f0742d564861cda99c6.jpg)
3回に分けて説明しましたが、大体これだけ知っていれば十分だと思います。
後は自分で色々と試しながら楽しんでください
img[src$="chara/3025_nH6S5Qp2.png"] { visibility: hidden; }
の一文を追加し、キャラ画像を消した上で
差し替え画像を背景とする。
または、chara画像として透過だけのファイルをダミーとして差し替え画像を背景に。
などの方法もとれるかと
私自身はログインすらまともに出来ていない状態ですが
色々な手を知っておくとより画像変更も楽しめそうですね
質問なのですがここで説明してる飛び出してる画像で大きい画像は縁を出すことはできたのですが
小さい162pxサイズは縁を出すことができなかったのですが
画層自体を編集するしか方法はないのでしょうか?
小さい画像の方は一枚絵になっているので
縁は自分で入れるしか無いですね