[WordPress] 画像サイズを一括カスタマイズする


71040eacf1d611e2a34522000ae80008_7みなさんこんにちは。Instagramの写真をブログに取り込んでいるのですが、画像サイズがデフォルトで600pxなので、携帯から見にくくなってしまいます。そこでプラグインを使い、今まで投稿された画像のリサイズと、今後の投稿で画像サイズを制限することにしました。

■ 今までの画像サイズを変更する

こちらのブログでは、Instagramにアップロードした写真のうち、戸越銀座などのタグがついたものをIFTTT経由でブログにも表示するようにしています。しかし、今まで投稿した画像がすべて縮小されておらず、携帯から見るには不格好でした。

そこで過去の画像をすべてリサイズしようとしたのですが、画像そのものの画質を落としたくないので、「Search Regex」プラグインを使ってimgタグでリサイズすることにしました。画像サイズはデフォルトで「style='max-width:600px;」となっていたので、iPhoneのサイズにおさまるよう「style='max-width:256px;」に一括置換することにしました。

WordPressのプラグインインストール画面から「Search Regex」プラグインをインストールして有効化した後、ツールから起動します。以下の画面のように、Search pattern に「max-width:600px」、Replace pattern に「max-width:256px」と入力して、「Replace & Save >>」ボタンをクリックします。

sr20130721

これでimgタグが一括置換されました。

■ 今後投稿される画像のサイズを制限する

さて、今まで投稿された記事の画像サイズは一括置換できましたが、今後IFTTTから自動投稿される画像はデフォルトの600pxのままになってしまいます。IFTTT側でInstagramの画像サイズを変えてWordPressに投稿するようなオプションが見当たらなかったので、WordPress側で制限することにします。

「Imsanity」プラグインを使うと、大きな画像を自動でリサイズしてくれます。こちらも管理画面からプラグインを検索してインストールし、有効化すると「設定」→Imsanity」という項目が表示されます。私は以下のようにすべて256pxに制限することにしました。

is20130721

この画面をさらに下へスクロールすると、WordPressにアップロードされた画像を一括でリサイズできるボタンがありましたが、これをクリックしてしまうと、ヘッダ画像などもお構いなしにリサイズしてしまうので、覚悟が決まった人だけぽちりましょう。。。(もしくは「Max width/height for images uploaded elsewhere (Theme headers, backgrounds, logos, etc)」の項目でパラメータを「0/0」にしておきましょう。)

これでイメージサイズも気にせず、携帯画面に合わせた画像サイズで投稿できるようになりました。ね、簡単でしょう?

基礎からのWordPress (BASIC LESSON For Web Engineers)

基礎からのWordPress (BASIC LESSON For Web Engineers)

※ 参考サイト

WordPressで全記事の一括変換なら「Search Regex」が便利 / 日本語リソース配布 | OpenMediaLaboratory
大きな画像を自動でリサイズしてくれるwordpressプラグイン「Imsanity」 | DAICHIFIVE blog