ユーザーCSSで人狼物語系人狼スクリプトのキャラ画像横幅を統一する

人狼

　人狼物語は、キャラセットごとに異なるサイズの画像を使うことが可能です。

　これによりキャラセットのデザインで世界観を表現する自由度が上がっているのですが、複数のキャラセットを使用する村で、キャラごとにログ文章の表示幅が変わり、読みにくくなることがあります。

　ユーザーサイドでの対応として、ユーザーCSSを使い、ログ部分のキャラ画像幅を揃えて表示させることができます。

　以下、古いブラウザ等で対応しない部分があるかもしれません。

基本CSS

/* キャラ画像格納部の横幅を変更 ----------*/
.mes_chrimg {
    width:72px !important ;
}
/* キャラ画像横の文章格納部の横幅指定を消して自動配置 ----------*/
.mes_del>div:nth-of-type(2), .mes_que>div:nth-of-type(2), .mes_think>div:nth-of-type(2), .mes_wolf>div:nth-of-type(2), .mes_grave>div:nth-of-type(2), .mes_sympa>div:nth-of-type(2), .mes_bat>div:nth-of-type(2), div.mes_nom>div:nth-of-type(2) {
    width: auto !important;
    float: none !important;
    overflow: hidden;
}
/* 画像のサイズを親要素の幅に合わせて縦横比維持して縮小 ----------*/
img {
    max-width: 100% !important;
    height: auto !important;
}

 

　デフォルトの人狼物語では、文章の格納部に識別しやすいクラス名等がつきません。そのため、セレクタ指定がやや面倒な長いものになります。上記のCSSでは、画像や文章の格納部が収納されている親要素であるdivに各種発言タイプがクラス名としてつくことを利用し、「その中の二番目のdiv＝文章格納部」を、キャラ画像を使用する全発言タイプで指定します。

 

　 キャラ画像格納部の横幅を72pxとしたのは、現在人狼物語系サーバーで一般的なサイズ（画像横幅64px、余白が左右に4px）と想定したためですが、実際にはかなり多様なので、サーバーや村によってそのとき多いサイズに変えるのがよいかもしれません。

 

　このCSSは、人狼物語をベースにしたサーバーでは有効なことが多いですが、独自のスクリプトである人狼議事（キャラチップのサイズが統一的なので必要自体を感じないでしょうが）や人狼議事由来のスクリプトを使用するサーバー等では働きません。

　人狼物語オリジナルにない発言種別が増えているサーバーでは、その分を追加する必要があります。発言種別は、各サーバーのCSSを見て追加するのが楽でしょう。

　一方、格納部にクラス名がついていて、その部分の指定が楽なサーバーもあります。

例：人狼物語　瓜科国の場合

/* キャラ画像格納部の横幅を変更 ----------*/
.mes_chrimg {
    width:72px !important ;
}
/* キャラ画像横の文章格納部の横幅指定を消して自動配置 ----------*/
.mes_del>div:nth-of-type(2), .mes_que>div:nth-of-type(2), .mes_think>div:nth-of-type(2), .mes_wolf>div:nth-of-type(2), .mes_grave>div:nth-of-type(2), .mes_sympa>div:nth-of-type(2), .mes_bat>div:nth-of-type(2), div.mes_nom>div:nth-of-type(2), .mes_cry>div:nth-of-type(2), .mes_wooer>div:nth-of-type(2), .mes_loveletter>div:nth-of-type(2), .mes_naka>div:nth-of-type(2), .mes_wolf_naka>div:nth-of-type(2), .mes_cry_naka>div:nth-of-type(2), .mes_sympa_naka>div:nth-of-type(2), .mes_bat_naka>div:nth-of-type(2), .mes_wooer_naka>div:nth-of-type(2), .mes_loveletter_naka>div:nth-of-type(2), .mes_think_naka>div:nth-of-type(2) {
    width: auto !important;
    float: none !important;
    overflow: hidden;
}
/* 画像のサイズを親要素の幅に合わせて縦横比維持して縮小 ----------*/
.mes_chrimg>img {
    max-width: 100% !important;
    height: auto !important;
}

　画像格納部サイズは、瓜科では大きめのキャラチップも多いので、村にもよりますがやや幅広のほうが違和感が少ないかもしれません。

　独自役職によるもの以外に、「中の人」発言タイプがクラス名で追加されています。

 

主なキャラセットの画像サイズ
64x98
人狼審問（α2.5も）、mtmt、mtmt_BBS、イストワール、宵闇、霧雨降る街、文明開化、花のお江戸、ねこっぷ、メトロポリス、暗黒審問
74x94
トロイカ、哀愁のタタロチカ、ようちえんせんき かりんか、ハロリンカ、ゆめびより、ぐります、へっぽこ村、薔薇色、
74x98
ならむら、ナツメグ、カオス、悪夢（ame）
88x110
薔薇の下、薔薇EX
90x135
人狼物語
100x100
-40、甘味人形、等、瓜科国の幾つかのセット

　CSSで指定するサイズは、このサイズプラス8px（左右余白）です。

　瓜科国の大きめなキャラセットは、高さは多様なものの横幅は100pxであることが多いようです。