FC2ブログ

RINTARO詰将棋17


          「挿入」

line

Kifu for JS形式の導入手順

 Kifu for JSの導入方法については、鈴川優希さんのサイトを参考にさせていただきました。
Kifu for JSをブログに貼り付ける
Kifu for JS (ver. 2.0.0)をブログに貼り付ける
②のサイトの「1. Kifu for JSをダウンロード」から「5. 載せたい棋譜をテキストファイルで作成、アップロード」までは私(永安)が実行していますので、他の九州Gの方はされなくて大丈夫です。また、「6. ブログにKifu for JSを読み込ませる」以降を同じ手順で行うと、Kifu for JSのレイアウトが崩れました。よって、鈴川さんの1.と2.のサイトのやり方を合わせた方法で行いたいと思います。

 以下、Kifu for JS形式の導入手順です。
手順1.柿木将棋などで詰将棋をKIF形式でコピーしたものを、メモ帳などでtxt形式で保存する。
このとき、不要な情報はメモ帳上で削除しておく。
例→kif-sample1.txt
保存した.txtファイルを、FC2ブログにファイルアップロードする。
ページ下のファイル情報にtxtファイルのURLが書かれていることを確認する。

手順2.下のhtml文をメモ帳などに張り付けて、赤色のURLを先ほど保存したtxtファイルのURLに変更する。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="https://blog-imgs-138.fc2.com/k/y/u/kyusyug/jquery3-5-1.js"></script>
 <link rel="stylesheet" type="text/css" href="https://blog-imgs-138.fc2.com/k/y/u/kyusyug/kifuforjskyug.css" />
 <script src="https://blog-imgs-138.fc2.com/k/y/u/kyusyug/kifu-for-js2.js" charset="utf-8"></script>
 <script>var Kifu = KifuForJS;</script>
</head>
<body>
 <script>Kifu.load("https://blog-imgs-138.fc2.com/k/y/u/kyusyug/kif-sample1.txt");</script>
</body>
</html>

html形式で保存し、FC2ブログにファイルアップロードする。
ページ下のファイル情報にhtmlファイルのURLが書かれていることを確認する。

手順3.下のhtml文をFC2ブログの「新しく記事を書く」の本文欄に張り付けて、青色のURLを先ほど保存したhtmlファイルのURLに変更する。

<iframe class="kifuforjs" src="https://blog-imgs-138.fc2.com/k/y/u/kyusyug/kif-sample1.html" flameborder="0" scrolling="no" width="580" height="520" frameborder="0"></iframe>

記事を保存すれば、FC2ブログに下のようなKifu for JSが表示されているはずです。もし、棋譜が文字化けして読み込めていないようなら、手順1.のtxt形式で保存するときに、文字コードを「ANSI」にしてみてください。



 Kifu for JSのコメント欄が不必要な場合は、手順2と手順3のhtml文をコピーするときに、以下の2つを使用してください。
手順2

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="https://blog-imgs-138.fc2.com/k/y/u/kyusyug/jquery3-5-1.js"></script>
 <link rel="stylesheet" type="text/css" href="https://blog-imgs-138.fc2.com/k/y/u/kyusyug/kifuforjskyug-hidecom.css" />
 <script src="https://blog-imgs-138.fc2.com/k/y/u/kyusyug/kifu-for-js2.js" charset="utf-8"></script>
 <script>var Kifu = KifuForJS;</script>
</head>
<body>
 <script>Kifu.load("https://blog-imgs-138.fc2.com/k/y/u/kyusyug/kif-sample1.txt");</script>
</body>
</html>

手順3

<iframe class="kifuforjs" src="https://blog-imgs-138.fc2.com/k/y/u/kyusyug/kif-sample1-hidecom.html" flameborder="0" scrolling="no" width="580" height="415" frameborder="0"></iframe>

上手くできれば、下のようにコメント欄が非表示になります。


 この記事を書くにあたり、Kifu for JS製作者のna2hiroさん、導入方法をまとめられた鈴川さんに感謝いたします。
Kifu for JS配布ページ→na2hiro / Kifu-for-JS

 次回は、はじめに棋譜表示とコメント表示隠しておくKifu for JS curtain形式について書いていきます。
永安克志
line

RINTARO詰将棋16


          「接吻」

line

Kifu for JSの形式

九州GブログでKifu for JSを表示できるようにしました。
九州Gの方向けの導入方法は、次回の記事でご紹介します。

Kifu for JS形式


Kifu for JS curtain形式


永安克志
line

RINTARO詰将棋15


          「連結」

line
line

line
プロフィール

kyusyug

Author:kyusyug
FC2ブログへようこそ!

line
最近の記事
line
最近のコメント
line
最近のトラックバック
line
月別アーカイブ
line
カテゴリー
line
ブログ内検索
line
RSSフィード
line
リンク
line
ブロとも申請フォーム

この人とブロともになる

line
sub_line