フレキシブルなウィンドウ画像【微妙】

どんなサイズにも対応するフレキシブルなメッセージ画像が使えたらいいな~!
border_image
border-image で簡単に出来るんじゃ?と思ってたら、ティラノではあまり実用的じゃなかった(´・ω・`)
微妙だけど、忘れそうなので一応記事にしとくです。

残念ポイント

セーブのサムネイル画像に対応してない!

html2canvasさんは、border-image をサポートしてないようで、
transform でレンダリングがおかしくなる現象も含めて、とても残念な画像になりました(泣)
border_image_thumb

画面サイズ固定じゃないと、画像分割部分にライン入る

ScreenRatio = fix でも、きちんと指定サイズで表示すれば問題ないです。
拡大縮小するから、端がボケてしまうのは致し方ない・・・。
border_image_1

この縛りは結構デカいな~(T_T)

使い方

CSSで border-image を指定するだけですが、ちょっとわかりにくいので(ちょっとどころかサッパリわからん…)解説サイトさんを参照しながらジェネレーターを使うのが手っ取り早いです(汗)

参照サイト

CSS例

元画像

pipo-WindowBase002 1.10 KB 30×30 px
ぴぽやさんからお借りした、ウディタ用ウィンドウ画像。これを9分割しています。
これ一つで済めば軽くて楽なのになぁ・・・(未練)

ティラノスクリプトで指定する場合の注意

  • メッセージ枠に使う場合、tyrano.css に書いちゃうと、起動時に一瞬表示されてとても格好悪いので、別途cssファイルを作って、first.ks から iscript で header に入れるとか工夫が必要です。
    [iscript]
    $('head link:last').after( '<link rel="stylesheet" href="./data/others/style.css">');
    [endscript]
  • message_outer は、指定が無い場合 backgroundopacity が自動で指定されちゃうので、!important で無効にしておく必要があります。
  • box-sizing:border-box を指定しておかないと、枠の外に border-width 分広くなってしまう。

どうでもいいネタのわりに長い・・・(;´・ω・)

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です