[Wordpress]jQueryを使用して画像を指定サイズにリサイズする方法

Tweet
トップへ

こんちくわ。
最近Wordpressのテーマを変えたり、ちょこちょとカスタマイズしている@conchikuwaです。
今回いろいろ弄っていく中で記事内に使用する画像をリサイズする必要があったのですが、jQueryを使用すると一括でリサイズできたので、その方法をご紹介いたしますです！
ブログ記事に画像を貼る際に今まで何も装飾をしていなかったのですが、画像とテキストとの境界が分かりづらかったので、画像を点線で囲む用意CSSを追加しました。

参考までに追加したCSSは

.alignnone{
    border: 1px dashed #CCCCCC;
    height: auto;
    max-width: 100%;
    padding: 5px;
}

.alignnone{

border: 1px dashed #CCCCCC;

height: auto;

max-width: 100%;

padding: 5px;

}

今までメインカラムの横幅に合わせて横幅580pxで画像を作成していたんですが、paddingで上下左右5pxとるようにしたので、横幅570pxに変更する必要がでてきました。

今後の記事については画像を570pxで作成すればいいのですが、過去記事について、画像の作り直すのも、画像事にwidth指定がするのも面倒なので、何かいい方法はないかと考えていると@OZPAさんの↓の記事を思い出しました。

「htmlすら知らなかった私が2週間でWordpressの新テーマを作成するまでにやったこと」と参考にした記事まとめ | OZPAの表4
どうも、@OZPA です。先月、当ブログのテーマをWordPressにて自作した私。しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だっ …
いつもありがとうございます！

さらにさらに、以前のテーマからメインカラムのサイズが変わったために画像のリサイズを行わなければならなかったのですが、
「それならjQueryでできるかもしれませんね・・・」
と、iPhoneアプリクリエイター道場でもお世話になりました拡張現実ライフのアキオ（ @akio0911 ）先生が私のブログにjQueryを搭載してくださり、自動で画像のリサイズを行うjavascriptまで書いてくださいました！！

jQueryでできるんだヽ(｀▽´)/

って事でGoogleさんにご相談すると↓のサイトがヒット

jQuery :: 画像を指定サイズにリサイズして表示する [Tipsというかメモ]
jQuery で、画像を指定サイズにリサイズして表示します。サムネイルの表示に便利です。 ※ 横幅と高さの比率は保ったままリサイズします。 …
素晴らしい！！

こちらのソースを以下のようにちょこっとカスタマイズしてみました。

&lt;script type=&quot;text/javascript&quot; src=&quot;/path/to/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    jQuery.event.add(window, &quot;load&quot;, function(){
        var fw = 570;        //fixed width
        var sl = 'img.hoge'; //selector
        $(sl).each(function(){
            var w = $(this).width();
            var h = $(this).height();
            if (w &gt;= fw) {
                $(this).width(fw);
            }
        });
    });
&lt;/script&gt;

&lt;img src=&quot;sample1.jpg&quot; class=&quot;hoge&quot;&gt;