いんわんのブログ

ブラウザゲームをWordPressなどのブログに埋め込む方法

ブログ記事デフォルトサムネイル

ブラウザゲームを作ったら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で表示したい大きさを指定します。

残りは枠線や余白の指定なので気にしなくていいです(0なので無しになってます)。

 

以上のような感じでやれば簡単にiframeでゲームを埋め込むことができます。

 

★ゲームサイト用のWordPressテーマを無料配布してます

 

関連記事