Steamゲームのリンクコードをブログに貼る方法

2020年5月26日ゲーム解説

Steamウィジット1

ゲームのブログなどでよく見かけるSteamのリンク。セール時にはセール価格が表示されますし、まだ配信開始していないゲームに関しては「ウィッシュリストに追加」のボタンが出てきます。

それに、ブログに貼っているだけでなんとなくかっこいいですよね。

一段上のブログという感じニャ。

今回はこのリンクウィジェットの簡単な貼り方をわかりやすく説明します。

また、最近は貼らないほうがいいのではないかという状況があるため、そのことについても説明します。

 

リンクウィジェットの簡単な貼り方

Steamウィジット2

まずリンクのコードを作りたいゲームのストアにアクセスします。

下のほうにスクロールすると「埋め込み」と書かれている場所があるのでこれをクリック。

Steamウィジット3

すると「埋め込むウィジェットの作成」という画面が出てきます。

この画面では、リンクウィジェットが表示されたときの説明文を375文字以内で入力することも可能。
ただ面倒くさいので、普通はデフォルトで設定されているストアページの説明文をそのまま利用します。

あとは「ウィジェットの作成」ボタンをクリックするだけです。

Steamウィジット4

するとHTML文のコードが出てきますので、これをコピーしてブログに貼ればOK。

ビジュアルエディタになっているばあいは、テキストエディタ(HTML文で書かれている状態のもの)に切り替えてから貼ってください。

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

ストアページに行かなくても、上記のコードの赤字の部分を、表示したいゲームのID番号に書き換えてもOKです。

また青字部分の数字を変更すれば、width(横幅)、height(高さ)を変えることができます。

 

Steamリンクウィジェットの問題点

それでなにが問題ニャ。

PCなど広い画面で表示させるばあいは問題ないのですが、スマートフォンで表示する場合に問題が発生します。

Steamウィジット5

見切れてるニャ。

スマホのばあい、せっかく貼ったリンクウィジェットがすべて表示されない状態になります。これだとリンクウィジェットのボタンが押せません。

ただサムネ部分を押せばストアページに飛ぶことはできますので、アクセス自体は可能です。見切れてるのがやっぱり嫌ですね。

コードの横幅や高さをいじったらどうなるニャ?

Steamウィジット6

こうなります。

ボタンは押せるけど画像が見えないニャ。

ウィジットの高さには上限があるようで、いくら高くしてもこの状態でした。

これならさっきの見切れた状態のほうがましニャ。

 

まとめ

SteamユーザーはPCユーザーが多いと思いますので、スマホの表示をチェックすることが少ないかと思います。

ただ以前とちがい、現在はスマホからのアクセスがPCよりも多くなっている状況です。スマホに合わせたサイト作りをする必要もあるかと思います。

面倒くさいニャ。

スマホでの表示時だけリンクウィジットを消して文字リンクにするなど、個別の対策が必要になるかと思います。サイトデザインを気にするならそうしたほうがいいでしょう。

ただそこまでするのも面倒という人は、そのまま気にせず貼り付ればいいとは思います。

しかしスマホ全盛期のいま、こういうことはSteamが積極的に対応していくべきだとは思います。