Wordpressの小説サイトなどに縦書ページを設置する方法。

小説サイトなどを運営しているのですが、縦書ページを設置できたら最高だよなと考えたのです。そんなことよりコンテンツ書けよって話ですけど、いろいろと面倒くさくてwordpressいじるぐらいしか楽しみがないのが現状です。桜をモチーフにした作品を書いていたのですが、すでに５月も終わり。桜はとうに散って葉桜も毛虫がたかる時期でしょう。

方法論的には竹取jsというモダンブラウザの縦書き表示を行うjavascriptライブラリがあるので、それを設置したらいいのですが、wordpressなので余計な手間を取った。雑だけど設置方法などをメモしておく。

竹取jsのダウンロードはこちらから。

竹取 JS

上記で取得したzipファイルを解凍すると、"taketori.js"と"taketori.css"という２つのファイルを使用しているWordpressのテーマディレクトリに入れてください。

その後、テーマのheader.phpに下記を追記します。

<?php
// 竹取jsを追加
wp_enqueue_script('taketory', get_template_directory_uri() . '/js/taketori.js');
wp_enqueue_style('taketory_css', get_template_directory_uri() . '/taketori.css');
?>

注意点としては”wp_head();"より上に記述を行ってください。次にjavascriptの記述を行います。テーマなどに付いている汎用的に読み込めるjsファイルに次の記述を行ってください。

jQuery(function() {

	var taketori = (new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif',height:'500px',multiColumnEnabled:'auto'}).element('div.entry-content').toVertical(false);

	jQuery("#vertical_toggle").click(function() {
		taketori.toggleAll();
		taketori.document.stopPropagation(e);
		taketori.document.preventDefault(e);
	});
});

上記はボタンを押すと、縦書と横書きを切り替えるように作ってあります。竹取jsのオブジェクトを呼び出すときのオプションで色々と設定が変えられます。調べたところではこんな所。

set : 竹取jsのオプションを記述

- lang : 日本語と韓国語を設定

- fontFamily : 使うフォントを指定

- height : 縦書フレームの高さを指定これを指定しないとieでは極端に潰れる

- multiColumnEnable : 縦書フレームとマルチカラムのどちらを使用するかどうかを設定できる。

element : DOMでのエレメントを指定。これを指定した範囲を縦書する。

toVertical : このメソッドで縦書実行です。trueとfalseが指定できて、ボタンなどで使うときはfalseを指定しましょう。

上述したスクリプトではid=vertical_toggleを指定した要素をクリックすると縦書するようにしています。

サンプルとしては下記。

東方霽月譚 | god【only】knows

１万５千字程度の小説ですが処理が重いです。３万字を超えるとスクリプトが停止します。また、マルチカラムにするとページ全体の処理が結構重いです。スクロールがスムーズに行かなくなります。それがマイナスですね。自分的には竹取jsで生成した文字列をカスタムフィールドを使ってjQueryで切り替える処理を検討しています。

まぁ、関係ないのですがこのカスタマイズで以前、変更した箇所を上書きしてしまった。。小テーマを使うべきだったなぁ。。orz