英雄クロニクル/自由記入欄の書き方/画像の加工

画像の加工

画像を少し加工する方法について説明します。

使用する画像について

このページ、および、レイアウトについて説明したページの入力例では次の画像を使用しています。

この画像は、公式ギャラリーの「自由記入欄（最大640x480）」のみをチェックしたときに、最後に表示される画像です。

その著作権は株式会社サクセスに帰属します。

入力例に対する表示を再現するために、利用させていただきます。

また、入力例の中で、縮小、回転、切り抜きなどの加工したものを表示しています。

このページの入力例を実際にゲーム内で使うには、上の画像を「ストック中」にする必要があります。（公式ギャラリーの画像なので、誰でもストック中にすることができます。）

自由記入欄に<画像mpKUFT1jY6ehBaLdeApRxg==>という文字を入れることで上の画像が挿入されます。ただし私はＳ鯖でしか遊んでいないため、他のサーバーでもこの文字で挿入できるか否かわかりません。もし違っていたらいたら適宜正しい文字に置き換えて、以降の文章を読んでください。

切り抜く（トリミング）

次のようにすれば、画像の一部だけを切り抜いて表示することができます。画像原点（左上の角）から縦横１６０ピクセル分だけ表示しています。

        <div style="overflow: hidden; width: 160px; height: 160px;"><画像mpKUFT1jY6ehBaLdeApRxg==></div>

"width: 160px; height: 160px;"があるので、ブロックのサイズは160x160です。

画像の元のサイズは280x440なので、160x160からはみ出ます。

そして、"overflow: hidden;"を指定することで、はみ出た部分が非表示になります。（hidden＝「隠しなさい」という指定値なのです。）

表示されるのが160x160になるので、そこだけ切り取ったように見えるのです。

（これは、蛇足かもしれませんが、）自由記入欄の外にはみ出た部分が表示されないのも、自由記入欄に"overflow: hidden;"が設定されているからです。

平行移動

前の例では画像原点（左上）を基点として切り抜いていますが、切り抜く基点を変えることもできます。次のように入力してください。

        <div style="overflow: hidden; width: 160px; height: 160px;"> <div style="margin: -210px -55px;"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div>

ネガティブマージンを使う事で、画像原点が左上にずれます。（平行移動します。）

上の例では、"margin: -210px -55px;"で、上方向に210px、左方向に55pxずれています。その結果、画像のXY座標の(55,210)とdivタグの左上が重なっている状態になります。

さらにoverflowの指定ではみ出した部分が表示されなくなるで、最終的に基点を変えて切り抜いたように表示されます。

もちろん、こんな面倒なことをしなくても、自分の画像なら最初から切り抜いた画像をアップしてしまえばよいのですが、

自作でない絵を、キャプチャ→加工→アップロードすることに抵抗感があるとき。
画像ストック数が上限に近いので、切り抜いただけのバージョンを用意したくないとき。

といった場合には使えるテクニック…かもしれません。

平行移動その２

平行移動するには、もう１つ別の指定方法があります。次のように入力してください。

        <div style="overflow: hidden; width: 160px; height: 160px;"> <div style="transform: translate(-55px,-210px);"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div>

transformは表示を平行移動したり、回転したり、拡大したり、など様々な加工ができてしまうCSSです。

"transform: translate(-55px,-210px);"で、横軸方向に-55px（つまり左に55px）、縦軸方向に-210px（つまり上に210px）の平行移動します。これはネガティブマージンの時と同じ平行移動になるので、同じように表示されます。

この指定方法は、ネガティブマージンより少し文字数が多くなってしまうので、平行移動だけならネガティブマージンのほうが便利です。

回転

１つ前でうっかりネタバレしていましたが、画像を回転することもできます。次のように入力してください。

        <div style="background-color: red;">上</div> <div style="transform: rotate(45deg); overflow: hidden; width: 160px; height: 160px;"> <div style="margin: -210px -55px;"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div> <div style="background-color: red;">下</div>

上

下

"transform: rotate(45deg);"で、160x160に切り抜かれた画像が４５度回転しています。

degは「度」を表す単位です。 degが無いと単位が変わるので意図した回転角度になりません。他の単位もありますが、詳しくは検索してしらべてください。

はみ出しの処理１

上の例では、正方形を回転していることになるので、上下左右にはみ出してしまいます。赤い背景のブロックを上下に配置したので、上下のはみ出しが見えるでしょう。左も自由記入欄からはみ出してしまい、表示されなくなっています。

transformによる回転（や他の加工処理）はあくまで表示が変化するだけです。元々のブロックのサイズや位置は変化しません。はみ出しが気にならないならそのままでよいですが、気になる場合は調整が必要です。

調整方法の１つは、余白を設定することです。今回の回転のケースなら、上下左右にmarginを設定するだけでもよいでしょう。

        <div style="background-color: red;">上</div> <div style="margin: 40px; transform: rotate(45deg); overflow: hidden; width: 160px; height: 160px;"> <div style="margin: -210px -55px;"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div> <div style="background-color: red;">下</div>

上

下

上の例では、トライエラーの繰り返しで、余白の大きさを決めました。40pxにしています。

厳密にぴったりのサイズにしたい場合は、回転角度を三角関数でなんやかんやして、はみ出し幅を求めた方がよいでしょう。

はみ出しの処理２

はみ出し処理の別方法として、先に画像の回転だけを行っておき、（それをdivで囲って）平行移動と切り抜きを行なう方法もあります。

        <div style="background-color: red;">上</div> <div style="overflow: hidden; width: 160px; height: 160px;"> <div style="margin: -220px 10px;"> <div style="transform: rotate(45deg);"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div></div> <div style="background-color: red;">下</div>

上

下

ただし、この方法は、平行移動の位置合わせがとても難しいです。上の例も、なんどかトライエラーで平行移動のパラメーターを決めました。

また、上のケースは、transformのtranslateとrotateを同時に使って、回転と平行移動をまとめて指定することもできます。

        <div style="background-color: red;">上</div> <div style="overflow: hidden; width: 160px; height: 160px;"> <div style="transform: translate(10px, -220px) rotate(45deg);"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div> <div style="background-color: red;">下</div>

上

下

回転と平行移動を同時に行なうなら、こちらの方がブロックの入れ子の数を減らすことができますし、文字数も少なくすることができるので、おすすめです。

縮小／拡大

もちろん縮小／拡大だってできます。

        <div style="background-color: red;">上</div> <div style="transform: rotate(45deg) scale(0.707); overflow: hidden; width: 160px; height: 160px;"> <div style="margin: -210px -55px;"><画像mpKUFT1jY6ehBaLdeApRxg==></div></div> <div style="background-color: red;">下</div>

上

下

正方形を４５度回転した場合、高さと幅は　√２倍＝1.414倍になります。それならば、１／√２倍＝0.707倍の大きさにすれば、元の高さと幅にもどります。

"transform: rotate(45deg) scale(0.707);"で、４５度回転と0.707倍を行っています。これではみ出すことが無くなりました。

はみ出しになどに注意

拡大/縮小も表示が変わるだけということに注意して下さい。

拡大すれば、回転同様に自由記入欄からはみ出したり、枠線や上下左右の他のものを隠したりします。

縮小は、はみ出しの問題は有りませんが、上下左右と間隔があきすぎてしまいます。

画像と文字を重ねる

画像の加工という意味では少し方向性が違いますが、ネガティブマージンを応用することで、画像の上に文字を重ねることもできます。

        <div style="width: 280px; height: 300px; border: 1px solid; margin: 10px; overflow: hidden;"><画像mpKUFT1jY6ehBaLdeApRxg==>
            <div style="margin: -210px 30px 0px 30px;"> <div style="text-shadow: #FFF 0 2px 2px, #FFF 0 -2px 2px,#FFF 2px 0 2px, #FFF -2px 0 2px; font-size:150%;">私にまかせてください。</div></div>
        </div>

私にまかせてください。

ただし、上の例はあまりうまく行っている感じは私もしません。

漫画の吹き出しや、ゲームでよくある「会話欄」のようなものを画像にあらかじめ仕込んで置き、そこに文字を重ねるとよいかもしれません。