WordPressでキレイな局面図を表示させる方法

 当サイトでは、SVG形式、いわゆるベクター形式の局面図画像を使用しています。ベクター形式とは、画像を円や直線などのような解析幾何的な「図形」の集まりとして表現する形式、とウィキペディアにありますが、要するに、拡大縮小しても綺麗に表示できるということで、非常に読みやすい局面図となります。
 この形式の画像を簡単に作れるようなツールを開発し公開してくださったのが、狼将棋というブログを書いているmaasaさんです。
 このツールはSVG画像を作るだけでなく、成駒のデザインを簡易体でなくしたり(例:杏→成香)その画像からすぐに局面図をコピーできたりと、読者にうれしい機能が盛り込まれています。また、局面図をコピー&ペーストするだけで作れ、画像を保存する容量が要らないという執筆者からしてもうれしい特徴もあります。つまりこれを使わない手はありません。
 こんな素晴らしいツールですが、導入と使い方は少し手間ですので、導入方法を紹介します。
 はてなブログでの導入方法はsuimonさんの記事が詳しく、ほかのブログサイトにも応用しやすいので、私はwordpressでの導入方法を紹介したいと思います。

導入方法

1.スクリプトをダウンロードする

このツールを配信しているこちらのサイトにアクセスし、ダウンロードのところにある非圧縮版をダウンロードします。
shogizumen.jsというものですが、単にクリックしても保存できません。リンクを右クリックし、「名前をつけてリンク先を保存」することで保存ができます。

2.このファイルをサイトに読み込ませる

 ここでは二つ方法があります。見た目はaの方法がシンプルですが、できなかったり、普段内部をいじるわけでなければ、bの方法のほうが簡単でそちらにしましょう。
 また、WordPressを使っている方なら、何かしらテーマを使っていると思いますが、その内容によって画面は異なります。とはいえやり方としてはほとんど同じはずです。
 私が使っているテーマは「Simplicity」というテーマで、無料で配布されている使いやすいものです。本記事ではそのテーマを使ったときの画面を使っていきます。

(2a)
①.スクリプトをアップロードする

 WordPressの管理画面から、メディアを開きます。メディアは画像などの素材をアップロードするところで、ここに先ほどのshogizumen.jsをアップロードします。下図のようになるので、ファイルをドラッグ&ドロップしてアップロードしてください。

すると、下のようなものが出現します。これをクリックします。

 すると詳細が表示されます。この中のURLを後に使いますので、どこかにコピペしておいてください。

②.スクリプトをサイトに読み込ませる

 WordPressの管理画面から、外観/テーマの編集を開きます。ここから、ヘッダーを編集することで先ほどアップロードしたファイルをサイトに読み込ませます。
 まず、ヘッダーの編集画面にいきます。私の使っているテーマでいうところの、『header-insert.php』ですね。ここに、次のようなコードを書き加えます。貼り付ける場所は一番下が無難です。

<script type=”text/javascript” src=”https://shogireview.info/wp-content/uploads/○○○/shogizumen.js“></script>

 注意点として、太字の部分は、アップロードしたファイルのURL、つまり先ほどメモしたURLを書いてください。

 この一文を書き足すことにより、スクリプトの読み込みが完了しました。

(2b)
①.スクリプトに書き足す

 先ほどダウンロードしたshogizumen.jsをテキストエディタで開きます。TeraPadなどプログラム編集のソフトが望ましいですが、なければメモ帳でもおそらく大丈夫です。そして、一番初めに

<script type=”text/javascript”>

と書き足し、一番最後に

</script>

と書き足します。
これによってスクリプトが読み込める形に変わりました。

②.スクリプトをサイトに読み込ませる

 WordPressの管理画面から、外観/テーマの編集を開きます。ここから、ヘッダーを編集することで先ほどアップロードしたファイルをサイトに読み込ませます。
 まず、ヘッダーの編集画面にいきます。私の使っているテーマでいうところの、header-insert.phpですね。
 そして、先ほど編集したテキストを書き足した分も含めてすべて選択→コピーし、ここに貼り付けます。貼り付ける場所は一番下が無難です。
 こうして長いテキストを貼り付けることにより、スクリプトの読み込みが完了しました。

以上で、2.スクリプトをサイトに読み込ませる は終わりです。

3.局面図をデザインする
 局面図をどのようにデザインするかを決定するコードをサイトに読み込ませます。
 これを実現できるのがCSSというもので、サイトのデザインを決定するコードです。ここに、局面図スクリプトに関するコードを書き加えていきます。
WordPressの管理画面から、外観テーマの編集を開き、CSSの編集画面へいきます。私の使っているテーマなら、『Simplicity2 child: スタイルシート (style.css)』というところです。ここのどこかに、以下のようなコードを書き足します。

/* * { font-family : serif; } */
pre {
font-family: Osaka-mono, “MS Gothic”, monospace;
font-size: 13px;
}
code {
font-family: Osaka-mono, “MS Gothic”, monospace;
}
.zumen {
display:inline-block;
width: 288px;
color: black;
background-color: white;
line-height:2;
vertical-align:top;
font-family : ‘游明朝’,’YuMincho’,’ヒラギノ明朝 ProN W3′,’Hiragino Mincho ProN’,’MS P明朝’,’MS Mincho’,serif;
border: 6px solid #fff;
}
.zumen figcaption {
font-size:14.5px;
width:100%;
white-space: nowrap;
padding-top: 2px;
overflow: hidden;
text-align: center;
text-indent: -10px;
text-overflow: ellipsis;
}
}
pre.shogizumen {
width: 288px; /* +24px */
margin:0;
padding:0;
padding-left: 24px;
font-family: Osaka-mono, “MS Gothic”, monospace;
font-size: 13px;
line-height: 1;
min-height: 240px;
}

/*.zumen svg { font-family : ‘游明朝’,’YuMincho’,’ヒラギノ明朝 ProN W3′,’Hiragino Mincho ProN’,’MS P明朝’,’MS Mincho’,serif; } */
/* font-family : ‘Verdana’,’游ゴシック’,’YuGothic’,’ヒラギノ角ゴ ProN W3′, ‘Hiragino Kaku Gothic ProN’,’MS Pゴシック’,’MS Gothic’,sans-serif;
*/
/*svg { font-family : serif; }*/
.szLastMove { font-weight : bold; }
.zumen .szLastMove { font-family : ‘游ゴシック’,’YuGothic’,’ヒラギノ角ゴ ProN W3′, ‘Hiragino Kaku Gothic ProN’,’MS Pゴシック’,’MS Gothic’,sans-serif;
font-weight : bold;
}
/*
.gotick {
font-family: ‘游ゴシック’,’YuGothic’,’ヒラギノ角ゴ ProN W3′, ‘Hiragino Kaku Gothic ProN’,’MS Pゴシック’,’MS Gothic’,sans-serif;
color: pink;
background-color: #eee;
}
.gotick .szLastMove {
font-family : serif;
font-weight : bold;
color: red;
}
*/
.hdiv:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden; }

 これは私の設定ですが、詳しい方ならカスタマイズしてもいいでしょう。このあたりの説明はこちらに簡単な説明が載っています。これを追記して、保存しましょう。
 以上で、準備は完了。実際に使う方法に移っていきましょう。

4.局面図をサイトに貼る。

 まずは、こちらのコードを保存してください。

<figure class=”zumen”>
<figcaption>タイトル</figcaption>
<pre class=”shogizumen”>
図面
</pre>
</figure>

 これは図面を貼るときに毎回使うコードなので、いつでも使える場所に保存しておくといいでしょう。

それでは図面を使った記事を投稿していきます。
 まずは、記事を投稿できる画面まで移動してください。私の場合は下のようになっています。

 早速、テスト投稿してみましょう。
 まず、上のコードを入力するのですが、ここで大きな注意点があります。それは、htmlとして記述するということです。WordPressは親切で、普通に文章を書くと書いたとおりに見えるように勝手に調整してくれます。もちろんコード以外のところはそちらの機能を存分に使ってかまいません。しかしこのようなコードを書きたい場合は、それが仇になります。
 上の投稿画面を見てください。ビジュアルとテキストに分かれているのが確認できますが、上のコードをビジュアルに書いてしまうと、テキスト(=html)では下のように改変されてしまいます。

 こうなると失敗です。必ず下のように、コードはテキストに書いてください。ビジュアルのほうは変な表示に見えますが、これが正しいです。

 さて、ここまで来ればもうすぐです。次に、サイトに貼りつけたい局面を用意しましょう。
 Kifu for Windowsを開き、お目当ての局面を作ります。私は柿木将棋を使っていますが、あるほうでOKです。そして局面を作ったら、
編集/局面のコピー/通常
をクリックします。すると、下のようなテキストがクリップボードにコピーされます。

後手:後手
後手の持駒:金 桂 香 歩二
9 8 7 6 5 4 3 2 1
+—————————+
|v香v桂v銀v金 ・ ・ ・ ・v香|一
| ・ ・ ・v玉 ・ ・ 馬 ・ ・|二
|v歩 ・v歩v歩 ・v歩 ・ ・v歩|三
| ・ ・ ・ ・v歩 ・v歩 全 ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ 馬 歩 ・ ・ ・ ・ ・ ・|六
| 歩 ・ ・ 歩 歩 歩 歩 ・ 歩|七
|v龍 ・ 銀 ・ 玉 ・ ・ ・ ・|八
| ・ ・ ・ 金 ・ 金 銀v龍 香|九
+—————————+
先手:先手
先手の持駒:桂二 歩二
手数=47 ▲8六馬 まで

 ここでは成駒も多い局面を使ってみました。このようなテキストをBOD形式といい、これを使います。
 少し解説を入れておくと、先手:や後手:のあとに続く文字をと変えるとそれがサイトに表示されます。また、最終手(ここでは▲8六馬)はサイトには太字で表記されます。
 また注意点として、ShogiGUIでもこのBOD形式での局面図出力は可能なのですが、対局者名と最終手の記述がありません。また、将棋所では最終手の記述がありません。なので、ShogiGUIや将棋所を使っての出力はオススメしません。

 そしてこれを、先ほどのコードの「図面」というところに貼ります。
 さらに、先ほどのコードの「タイトル」というところに局面図の上に表示させたいタイトルを書き込みます。すると、下のようになります。

 これにて、完成です!投稿してみましょう。サイトには下のように表示されます。

第1図
後手:後手
後手の持駒:金 桂 香 歩二 
  9 8 7 6 5 4 3 2 1
+---------------------------+
|v香v桂v銀v金 ・ ・ ・ ・v香|一
| ・ ・ ・v玉 ・ ・ 馬 ・ ・|二
|v歩 ・v歩v歩 ・v歩 ・ ・v歩|三
| ・ ・ ・ ・v歩 ・v歩 全 ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ 馬 歩 ・ ・ ・ ・ ・ ・|六
| 歩 ・ ・ 歩 歩 歩 歩 ・ 歩|七
|v龍 ・ 銀 ・ 玉 ・ ・ ・ ・|八
| ・ ・ ・ 金 ・ 金 銀v龍 香|九
+---------------------------+
先手:先手
先手の持駒:桂二 歩二 
手数=47  ▲8六馬  まで

 以上で、局面図の導入方法は終わりです。煩雑に見えるかもしれませんが、慣れてしまえばコピペを多用してスラスラ使えるようになります。みなさんも綺麗な局面図を楽しんでください!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする