読者です 読者をやめる 読者になる 読者になる

pgkuroneru’s MEMO

プログラミングで躓いたことなどについて記録していくブログ

HTTPS化したWordPressで、Steamのiframeウィジェットが表示されない場合の対処法

WordPressでSteamの商品紹介ウィジェットを貼ろうとしたところ、何故か表示されない現象に遭遇したので対処法をメモしておきたいと思います。

今回は、プラグインなどを利用せず、公式に用意されているウィジェットをそのまま利用していきます。

HTTPS化したWordPressで、Steamのウィジェットを表示する方法

こちらが標準で用意されているウィジェットです。(※画像ではありません。) 参考例として、街作りシミュレーションゲームである「Cities: Skylines」のコードをお借りしました。

ただ、公式で用意されている以下のコードを貼り付けても真っ白い空白が出来るだけで、何も表示されません。

<iframe src="http://store.steampowered.com/widget/255710/62701/" frameborder="0" width="646" height="190"></iframe>

対処法

基本的には、「https:」表記があるか無いかという違いなのですが、どちらの方法でも私の環境では表示されました。

方法1

<iframe src="//store.steampowered.com/widget/255710/62701/" frameborder="0" width="646" height="190"></iframe>

方法2

<iframe src="https://store.steampowered.com/widget/255710/62701/" frameborder="0" width="646" height="190"></iframe>

方法1のように、httpsを省略した場合、HTTPサイトではHTTPで、HTTPSサイトではHTTPSが補完されるようです。ただし、HTTPとHTTPSの両方でアクセス出来る、という条件があるため、注意しなければなりません。 現状はどちらでもアクセスできるので、方法1の表記でも問題ないようですね。

今回のまとめ

今回は、公式ウィジェットを利用しましたが、「WP-Appbox」というプラグインもあります。ですが、何故かセント表示になってしまったのでSteam公式のものを利用しました。 何故かセント表示に・・・。