Jetpack

WordPress

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. 初心者向けWordPressサイトのバックアップ、リストア手順の解説

    Server

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

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

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

    WordPress

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

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

  3. WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、WordPressプラグ…

    ぺんです。ブログ記事に広告(ASPへのリンク)を貼っていると、…

  4. WordPress

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

    ぺんです。 Google Chromeを使っていると、突然このような表…

  5. WordPress

    おすすめ無料ワードプレステーマ 2017年8月

    Theme HORSEこちらのサイトでは、ハイクオリティーな無料ワ…

  6. 日付の書式がNG

    WordPress

    WordPressの親テーマのウイジットを子テーマで書き換える方法

    ぺんです。今回は、ワードプレスの親テーマのウイジットを子テーマで書き…

コメント

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

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

最近の記事

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

    SNS

    2018年最新版-マイクロソフトアカウントの登録方法
  2. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投…
  3. ツール

    サムネイル画像を作成してくれるサービス
  4. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」…
  5. Server

    アフィリエイト収益ブログの始め方(2)- 利用サービスの選定における3つのポイン…
PAGE TOP