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. WordPressのローカル環境を簡単に構築する方法

    Server

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

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

  2. WordPress

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

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

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

    WordPress

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

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

  4. WordPress

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

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

  5. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投稿する方法

    ぺんです。ブログ記事を投稿した際に、FacebookとTwit…

  6. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法

    ぺんです。本サイト「あふぃぶ」で使っているワードプレステーマは…

コメント

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

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

最近の記事

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

    レンタルサーバーを選ぶ際の3つのポイント
  2. あふぃぶ 運営情報

    ようこそ、「あふぃぶ」へ
  3. マイクロソフトアカウントの登録方法

    SNS

    2018年最新版-マイクロソフトアカウントの登録方法
  4. logo.squarespace.com

    ツール

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

    アフィリエイト環境に無料ブログサイトは使えるのか?
PAGE TOP