WordPressでのSteamリンク貼り付けと位置・大きさの調整方法

ブログへのSteamリンクの貼り付け

ゲームに関連したブログを書いているとSteamへのリンクを張りたくなることがあります。Steamにはウィジェットというホームページへリンクの貼り付けを補助する機能があるのでそれを利用した貼り付けを行います。

使用しているテーマはCocoon、WordPressのバージョンは、6.1.1となります。ただ今回の内容はあまりバージョンやテーマの影響を受けるものではないと思います。

まず素直にSteamへのリンクを張り付けてみます。Steamではウィジェットという機能を使うことでリンクすることができます。

具体的には↓のようなものです。

貼り付けたいゲームのSteamページを開きます。

サイドバー下の方に埋め込みというところがあるため、ここをクリックします。

埋め込みを押すと、ウィジェットに乗せる文章を決定します。基本的にはそのままウィジェットの作成を押し、コピーして貼り付けてくださいと言われたコードをコピーします。

このままコピーして貼り付けるとただのurlに変換して失敗してしまうので、記事作成画面では、カスタムHTMLに張り付けましょう。

カスタムHTMLに先ほどのコードを張り付けと完了となり、表示すると以下のようになります。

これで基本的なブログへの表示は完了となります。

表示するだけならこれで完了ですが、サイズや位置など少し修正したいこともあるのでその方法をまとめます。

大きさの修正はシンプルです。

カスタムHTMLに張り付けるウェジェットのコードの一部を書き換えることでサイズを変えることができます。

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

このコード中の width が幅の広さ、height が高さを指定しています。そのためその数値を変えることで大きさを変更できます。

例えば

width=”646″ を width=”800″ としたものが↓になります。

また width=”100%”とすることで↓のように画面端まで大きくすることも可能です。

大きさは変更できましたが、左端に固定になっているのが気になる方もいると思います。そのため、次は中央に揃えてみます。

まずカスタムHTMLに張り付けるコードを↓から

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

↓のものに書き換えます。

元のコードの前に<div class=”steamwrap”> を記述し、後ろに</div>と追記し、この二つで元のコードを囲むように書きます。

<div class="steamwrap">
<iframe src="https://store.steampowered.com/widget/1608290/" frameborder="0" width="646" height="190"></iframe>
<div>

次にWordPressの設定画面から「外観」→「カスタマイズ」を選択

カスタマイズ項目から追加CSSを選択します。

表示されたテキスト入力欄にしたのように追記します。

.steamwrap {
	text-align: center;
}

この追記を行うと下のようにウィジェットが中央に移動します。

位置の調整と大きさの調整を合わせれば、自分の好みの配置にすることができます。

この記事で行ったのは、シンプルなCSSの改造になります。CSSとはホームページやブログなどの装飾を行うコードのことです。今回使ったのはシンプルなコードですが、使えるようになるとさらにブログのデザインを拡張していけます。

個人的におすすめなCSSの勉強本をあげておきますのでよろしければご活用ください。