Responsive-Kifu 使い方

 

air
今日は、Responsive-Kifu の導入の仕方を解説するよ♪

 

github からソースを取ってくる

まず https://github.com/air-h-128k-il/Responsive-Kifu にいってソースを取ってきましょう。

git コマンドで取ってきてもいいのですが、普通の windows マシンなどで git コマンドが使えるとは思えないので、zip ファイルをダウンロードします。

ダウンロードフォルダに Responsive-Kifu-master.zip がダウンロードされているはずなので、適当な場所に解凍してください。

Responsive-Kifu-master というフォルダができるはずなので、適当な名前にリネームしてください。名前はなんでもかまいませんが、ここでは Responsive-Kifu とします。

サイトにアップロード

続いて FFFTP などを使ってお使いのレンタルサーバ上にアップロードしてください。アップロード場所はどこでもかまいませんが、ここではドメイン直下とします。このドメインでいえば、http(s)://phazor.info/Responsive-Kifu ですね。

この時点で Responsive-Kifu/html 内のサンプルページ pagagm584.html がブラウザからも見れるはずです。ブラウザで直接覗くとこんな感じ。もちろん操作もできます。

 

なお、局面はアゲアゲさんが飛車を振り直した15手目です、って関係ないか。




ワードプレスに取り込む

Responsive-Kifu をワードプレスの記事に反映させるには、基本的に上記の html ページをインラインフレームというもので取り込むだけです。いたって簡単。

WordPress の編集ページに進み、画面を「テキスト」編集に切り替えます。

ここで

<iframe src="../Responsive-Kifu/html/pagagm584.html" width="620" height="700" frameborder="0" scrolling="no">

と入力。src 以下は、pagagm584.html が指定できているのであれば形式は問いません。実際の画面ではこんな感じです。WordPress ユーザーにはおなじみの画面ですね。

ここでポスト。すると、実際の投稿記事は以下のようになります。

画面のサイズを変えると駒盤や駒もそれにあわせて大きさを変えると思います。
あとは、地の文を加えるなりなんなり、お好きなように編集してください。

とりあえず、サンプルページを表示させるやり方は以上のようになります。

 

お好きな kif ファイルを表示させたい場合も同様で、

 kif ファイルを data フォルダにアップロード

→html ファイル作成

→投稿ページから上記 html ファイルを取り込む

という流れになります。

 

※…上記は WordPress での導入を前提に説明してありますが、iframe が使えるシステムであれば、原則、なんでもいけると思います。てんなんさんが、FC2 ブログで動かしています。

『Responsive-Kifuを貼り付けてみる』

 


にほんブログ村 その他趣味ブログ 将棋へ

クリックclose

“Responsive-Kifu 使い方” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です