最近スマホサイトをコーディングすることが増えてきました。
時代の流れですね。
スマホサイトでの画像の扱い方ですが、画像を綺麗に見せるために２倍のサイズで出力して半分のサイズにしています。

Retinaディスプレイ対応ってやつです。

最近のスマホは解像度が高いので、2倍で書きだした画像でないとぼやけてしまうためです。

ここでは200×100の画像を100×50のサイズ指定にしています。
さすがに暗算できますね。
しかしいろんな画像を扱ううち、暗算が難しいサイズもでてきます。
算数苦手なんです…

こんな小学生レベルのことで時間をかけてはいけない！ということで、効率化を測ってみました。

元ソース

以前コーディングを効率化するコマンド、ソフトの記事内で紹介したDW画像の幅と高さをリセットするコマンドがあります。
選択した領域内の画像のwidthとheightの値を自動で入力してくれるものです。
このwidthとheightの値を半分にしたものを自動で入力するように少し手を加えました。

元のソースはDW画像の幅と高さをリセットするコマンド/きんくまデザインからおねがいします。

ソース書き換え

imgDW.resizeSelection(naturalSize[0], naturalSize[1]);  }

の部分を以下に書き換えてください。

if( naturalSize[0]%2 == 0 && naturalSize[1]%2 == 0 ){ naturalSize0 = naturalSize[0]/2; naturalSize1 = naturalSize[1]/2; imgDW.resizeSelection(naturalSize0, naturalSize1); } else { alert(imgSrc); } }

以上です！
あとはコマンドから実行するだけで、実画像の半分のサイズのwidth、heightを入力してくれます！

当たり前ですが、奇数は割りきれません。
奇数の場合エラーメッセージが出るようにこんどーさんが更に手を加えてくれました、ありがとうございます！
WordPress側でインデント消してしまったのでソース見づらくてすみません…

このコマンドを使うようになってから頭を使う箇所がだいぶ減ったので（笑）実現できて万々歳です！
少し手間がかかりますが、それ以上に便利なのでぜひ！