狼将棋さんによるSVG形式のきれいな局面図を将棋ブログに導入する方法

狼将棋（http://ookami-shogi.blog.jp/）

のmaasaさんが作成されたSVG形式のきれいな局面図のスクリプトがmaasaさんのご厚意により一般公開されました。

今回はその局面図のブログへの導入方法を紹介します。

SVG局面図導入のメリット

狼将棋さんのsvg将棋盤のすぐれている点
・SVG形式なのでどんなに拡大しても表示が粗くならない
・白黒を基調としたデザインがシンプルで見やすい
・成駒が正確に表示される（成銀、成香、成桂）
・bod形式の局面図をコピーすることができる

— suimon (@floodgate_fan) 2017年7月16日

※7/14時点での導入方法の記事です。

今後この記事もスクリプトのアップデート等に伴い、加筆・修正をします。

※はてなブログでの導入方法の記事ですが他のブログサービスでも応用できると思います。

１、http://www.geocities.jp/ookami_maasa/shogizumen/

にアクセスし、ダウンロード（非圧縮版）を右クリックしてスクリプトを保存する。（Microsoft Edgeの場合）

※本記事ではわかりやすくするため、非圧縮版での説明にします。

２、次にTeraPadをダウンロードする。

「TeraPad」フリーのテキストエディター - 窓の杜ライブラリ

３、ダウンロードしたshogizumen（JavaScriptファイル）を右クリックし、

プログラムから開くで先ほどダウンロードしたTeraPadを選択する。（セキュリティの警告が表示された場合は開くを選択）

すると次のようなコードが表示される。

このコードの一番はじめに<script type="text/javascript">を追加し、

一番最後に</script>を追加する。

 次に右クリックからすべて選択し、そしてさらに右クリックしてコピーを選択する。

４、はてなブログの編集画面から

（PC）デザイン→カスタマイズ→ヘッダ→タイトル下

（スマホ）デザイン→スマートフォン→記事→記事上

の2箇所に先ほどコピーしたコードを貼り付けする。

そして設定を保存する。

5、はてなブログの記事を書くからHTML編集の画面に移り、記事を書いていく。

局面図を挿入したい箇所になったら、

 <figure class="zumen"><figcaption>図の題名</figcaption><pre class="shogizumen">bod形式の局面図テキスト</pre></figure>と記述する。（このテンプレートはTerapadにコピーして保存おくとよい）

※図を参照

bod形式の局面図テキストは柿木将棋Ⅸなどからコピーする。

このコードを記述するとプレビュー画面で確認したらきれいな局面図が挿入されている。

※プレビューはパソコン版とスマホ版の両方で確認してください。

（もしうまく表示されなかったらここまでの作業の中で間違っている箇所があるはず）

 6、記事を書き終えたら再度、プレビュー画面で表示を確認する。

問題がなければ記事を公開する。

7、CSSのコードの追加

最終手を強調する場合にはCSSのコードを追記する必要があるようです。

はてなブログの編集画面から

（PC）デザイン→カスタマイズ→デザインCSS

（スマホ）デザイン→スマートフォン→記事→記事上

に以下のコードを追加してください。

スマホ版は以下のコードも追記する。

<style type="text/css">

ここにCSSをコピペ。

</style>

（このコードも狼将棋のmaasaさんによるものです）

/** { font-family : serif; } */
pre {
 font-family: Osaka-mono, "MS Gothic", monospace;
 font-size: 13px;
}
code { 
 font-family: Osaka-mono, "MS Gothic", monospace;
}
.zumen {
 width: 264px;
 display: inline-block;
 color: black;
 background-color: white;
 font-family : '游明朝','YuMincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ＭＳ Ｐ明朝','MS Mincho',serif;
}
pre.shogizumen {
 width: 240px; /* +24px */
 margin:0;
 padding:0;
 padding-left: 24px;
 font-family: Osaka-mono, "MS Gothic", monospace;
 font-size: 13px;
 line-height: 1; 

 min-height: 220px;
}

/*.zumen svg { font-family : '游明朝','YuMincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ＭＳ Ｐ明朝','MS Mincho',serif; } */
/* font-family : 'Verdana','游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック','MS Gothic',sans-serif;
*/
/*svg { font-family : serif; }*/
.szLastMove { font-weight : bold; }
.zumen .szLastMove { font-family : '游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック','MS Gothic',sans-serif; 
font-weight : bold; 
}
/*
.gotick {
 font-family: '游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック','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
}

表示例

８、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: 264px;
	color: black;
	background-color: white;
	line-height:2;
	vertical-align:top;
	font-family : '游明朝','YuMincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ＭＳ Ｐ明朝','MS Mincho',serif;
	border: 6px solid #fff;
	box-shadow: 1px 4px 10px rgba(51, 51, 51, 0.2);
}
.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: 240px; /* +24px */
	margin:0;
	padding:0;
	padding-left: 24px;
	font-family: Osaka-mono, "MS Gothic", monospace;
	font-size: 13px;
	line-height: 1; 

	min-height: 220px;
}

/*.zumen svg { font-family : '游明朝','YuMincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ＭＳ Ｐ明朝','MS Mincho',serif; } */
/* font-family : 'Verdana','游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック','MS Gothic',sans-serif;
*/
/*svg { font-family : serif; }*/
.szLastMove { font-weight : bold; }
.zumen .szLastMove { font-family : '游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック','MS Gothic',sans-serif; 
font-weight : bold; 
}
/*
.gotick {
	font-family: '游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック','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;  
}

表示例

注意点

この局面図のコードを記述したあとは次の文章を書く際にコードが干渉しないように気をつけてください。

私は</figure>の後に毎回、HTML編集画面であああああああと打っておき目印をつけるようにしています。

表示がおかしい場合はHTML編集で記述が崩れている場合が多いです。

将棋ブログ作成に関する参考記事 

www.fgfan7.com