こんにちは！
ちゃーりー（char12345)です！
日頃の記事では将棋ウォーズ棋譜を画像を撮って、
画像を貼り付けて、リンクを貼り付けて、、、といった作業をしていますが、
この作業をもう少し簡単に、さらに見やすくできる方法はないか？
と調べてみました。
sponsored link
将棋ウォーズの棋譜画面を埋め込む
今までのやり方ではこのようにして、リンク先の棋譜を見てもらう形でした。
サンプル棋譜URL：https://kif-pona.heroz.jp/games/char12345-shogi95356-20180601_225232
↓↓↓リンク↓↓↓
将棋ウォーズ棋譜
これがこんな感じにできます↓
上記のようにボタンを押して手番を進めることが可能です。
それでは、設定方法を紹介していきましょう。
埋込み方法
埋込方法はhtmlのiframeタグを使用して、インラインフレームを設定します。
<iframe src=“表示したい棋譜のURL” height=“400″ width=”320″></iframe>
“表示したい棋譜のURL”の部分を書き換えて設定を行います。
今回のパターンだと下記のようになります。
<iframe src=“https://kif-pona.heroz.jp/games/char12345-shogi95356-20180601_225232” height=“400″ width=”320″></iframe>
幅は下記の設定で調節を行ってください。
height:表示するページの高さ
width:表示するページの幅
iphoneなどのスマホでは反映されないていないと思いますが、
ページ自体がそんなに長くないので気にしなくて良いと思います。
注意点
注意点があります！
URLに注意！
今までは将棋ウォーズ棋譜検索βから棋譜を検索してURLを取得してきましたが、
そちらのURLはインラインフレームで表示できないようです。
設定後にページを確認すると真っ白なフレームになってしまいます。
なので、棋譜検索βからURLを取得する場合、
下記の赤字部分を書き換えたURLを設定する必要があります。
棋譜検索βのURL：http://shogiwars.heroz.jp:3002/games/char12345-shogi95356-20180601_225232
今回設定したURL：https://kif-pona.heroz.jp/games/char12345-shogi95356-20180601_225232
書き換えた後でも棋譜の内容は同じです。
WordPressのプレビューでは表示されない！
WordPressの記事作成時のプレビューでは、
インラインフレームは真っ白で表示されてしまいます。
記事のビジュアル編集画面や、非公開状態では確認が可能ですが、
公開後のフレームが表示できているかは必ず確認しましょう！
