WordPressなどで作ったブログやサイトにブラウザゲームを埋め込んで表示する方法を紹介します。
ブログのページに埋め込むのはとても簡単でiframeというタグを使うとすぐにできます。
iframeは指定の範囲に違うページを表示できるHTMLのタグです。
このタグを利用してゲームを記事内に表示させます。
ゲームをiframeで埋め込むと上のような感じで記事内に表示されます。
ゲームページをアップロードする
基本的にブラウザゲームを作ったらindex.htmlと○○.jsなどいくつかのファイルがセットになって出来上がっていると思います。
それら一式を自分のサイトにアップロードします。
アップロードの方法は契約しているレンタルサーバーのアップロード機能などを使って行ってください。
アップロードするときは専用フォルダを作成し(gamesとか)、さらにその中にゲーム別にフォルダを作っておくと管理がしやすくて良いです。
そうするとゲームのURLは「example.com/games/game-title/index.html」みたいな感じになります。
一つポイントを言うとゲームのindex.htmlは基本的にGoogle検索には表示してほしくないのでindex.htmlの<head>タグの所に
<meta name="robots" content="noindex" />
を追加しておくとGoogleにインデックスされなくなります。
iframeで記事内に表示する
アップロードが済めば後は記事内にiframeで表示するだけです。
WordPressなどブログ投稿ではHTMLを記述できる状態にして以下のように記述すればOKです。
<iframe src="example.com/games/game-title/index.html" width="300" height="450" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>
srcの部分にアップロードしたゲームページのURLを入れます。
widthとheightで表示したい大きさを指定します。
残りは枠線や余白の指定なので気にしなくていいです(０なので無しになってます)。
以上のような感じでやれば簡単にiframeでゲームを埋め込むことができます。
ゲーム紹介サイトのを作る場合
iframeで埋め込むURLは自分のドメイン以外でも可能です。
なのでブラウザゲーム紹介サイトみたいなサイトを作る場合であればsrcに紹介したいゲームのURLを入れれば埋め込むことができます。
とっても簡単にまとめサイトが作れます。
しかし、その場合は埋め込んでもOKなのかをちゃんと確認してからにしましょう(トラブルは避けようね)。
★ゲームサイト用のWordPressテーマを無料配布してます
