Jetpack

WordPress

  2017.11.12(  最終更新 )

JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズがおかしくなる



ぺんです。

商品紹介のリンクを貼るときに、サムネイルのサイズを指定しているはずなのに画面に一杯に表示されてしまった経験はありませんか?

今回は、楽天の商品画像でサイズ指定をしたにも関わらず、Wordpressサイト上では大きな画像で表示されてしまう場合の解決策をご紹介します。



楽天の商品リンクの画像サイズの指定がおかしい

以下の画面をご覧ください。

あるべきイメージ(画像幅300ピクセル)

このように画像を300ピクセル幅で表示したかったのですが・・・
こうなるはずが

表示されたイメージ(画像横幅は無視?)

ワードプレスサイト上の記事に、上記のリンクを貼ると、なぜかこのように画像が巨大化してしまいました。(”画像サイズ指定ができない”という赤文字は比較しやすいようにコメントとして私が入れました。念のため・・)
こうなった

 

どうやら、画像のパスがWordpress側で書き換えられていることが判明!

オリジナルのリンク (画像幅300ピクセルで縮小表示)

楽天のサムネイル画像の指定方法

こちらのサイトで詳しく紹介されていますが、商品画像ファイルのパスの最後に”_ex=300×300”と指定すると、楽天側でそのサイズの画像を表示してくれます。

実際にWordpressサイトが生成しているリンクと、オリジナルの画像リンクを比較してみました!

オリジナルのリンク (300ピクセルで縮小表示)

普通に、”_ex=300×300”を指定しています。実際のこのパスをブラウザで直接表示すれば、きちんと画像幅300ピクセルで表示されますので、楽天側の問題ではありません。

WordPressサイトが実際に生成しているリンク(画像幅無視)

おや! 何やらオリジナルのパスとは異なります! 画像参照先のサーバーが i0.wp.com になっているし、せっかく指定した”_ex=300×300”が消えてしまっています・・。

画像リンクが書き換えられている理由?

一体何が画像リンクを書き換えているのでしょうか? 調べてみたところ、どうやら Jetpackプラグインの画像読み込み高速化設定(Photon)に関連していることが判りました。

Photonとは?

Photonとは、Jetpackプラグインが提供する画像高速読込を可能とする仕組みです。具体的には、Wordpressサイト上の画像ファイルを、CDN(コンテンツデリバリーネットワーク)と呼ばれる高速サーバー上にコピーして配信してくれる仕組みです。CDNを使うことで、サイト閲覧者のロケーションから、データ転送速度が最速となるサーバーが自動的に選定され、画像ファイルがそのサーバーから提供されます。つまり、サイトの描画速度が速くなるわけですね。

下記サイト(英語)で、Photonについて解説されています。

CDNとは?
CDNについては、こちらの記事でもご紹介していますのでご覧ください。

サイトの描画速度が早くなることは良いことですが、楽天のサムネイルのサイズ指定が無くなってしまったのは、このPhotonのためでした。

Jetpackプラグイン「Photon」をOFFにする方法

こちらの通り、プラグインのメニューから、Jetpack>Writing>画像と写真をスピードアップ を選択して、OFFにしてください。
Photon設定

まとめ

JetpackのPhoton(CDN)機能をONにしておくと・・

  • サイトの描画速度が速くなる
  • その一方、楽天のサムネイル画像パスのパラメータが勝手に消えてしま

ということが判りました。
商品紹介などで、楽天のサムネイル画像を使いたい場合は、OFFにしておいた方が良さそうですね。



関連記事

  1. WP Responsive Menu

    WordPress

    WP Responsive Menu – スマホ対応のレスポンシブメニューを追加する、W…

    ぺんです。サイトを運営する上で、スマホ対応はとても重要です。…

  2. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法

    ぺんです。以前ご紹介した、ニュースメディア風のワードプレステー…

  3. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡単に構築する方法

    ぺんです。Wordpressサイトのカスタマイズをするは、細心…

  4. 初心者向けWordPressサイトのバックアップ、リストア手順の解説

    Server

    (初心者向け)WordPressサイトのバックアップ、リストア(復旧)手順の詳細解説

    ぺんです。 Wordpressサイトを運営していて、気になるのがサイト…

  5. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法

    ぺんです。先日公開したこの記事の中で、オリジナルプラグ…

  6. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」を選んだ3つの理由

    ぺんです。前回のエントリーからずいぶんと間が空いてしまいました…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Twitterアカウントの登録方法
  2. マイクロソフトアカウントの登録方法
  3. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  4. WordPressのローカル環境を簡単に構築する方法
  5. ウイジェットエリア
  1. イラスト

    画像素材

    コンテンツをより魅力的にする、高品質な無料イラスト素材
  2. WordPress

    TDC MAGのGoogleカスタム検索ウイジェットをHTTPS化する方法
  3. WP Responsive Menu

    WordPress

    WP Responsive Menu – スマホ対応のレスポンシブメ…
  4. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ve…
  5. logo.squarespace.com

    ツール

    5分でサイトロゴが完成! とても便利なロゴデザイン作成ツール
PAGE TOP