WordPressでのSteamリンクの位置・大きさの調整方法

ブログ:Tips

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

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

使用しているテーマはCocoonWordPressのバージョンは、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の勉強本をあげておきますのでよろしければご活用ください。

スラスラわかるHTML&CSSのきほん 第3版
累計10万部のベストセラーが、現代のトレンドに対応して大改訂! 1つのストーリーに沿ってWebサイト作りとHTML&CSSの基本がスラスラ学べる、入門書の決定版! 第3版では現代のトレンドにあわせて制作するサイトを一新。PC・モバイル端末に対応したサイト作りの全手順を、図入りでとことん丁寧に解説しています。 これからW...

コメント

タイトルとURLをコピーしました