WordPressや普通のホームページで縦書きが利用できる「h2vR」

【この記事を読むのに必要な時間は約 6 分です。】

そんなに利用頻度は高くないが、どうしても縦書きを利用したい場合はあると思う。
そんな時、簡単に利用できる縦書き用のスクリプトがあるととても便利だ。

今回は個人的に最も使いやすいと思う「h2vR」について紹介する。

1 h2vRとは
- 1.1 h2vRのダウンロード
- 1.2 設置方法
2 WordPress用h2vRプラグイン
3 過去に紹介した縦書き用スクリプト
- 3.1 h2v
- 3.2 涅槃nehan.js
  - 3.2.1 nehan
  - 3.2.2 古いバージョンのnehanについて

h2vRとは

h2Vという縦書きスクリプトの改良版だ。
こちらがホームページ。

ウェブページで縦書きレイアウト - tategaki.info

主要なブラウザで縦書き表示を実現できるJavaScript、h2v.jsの公式サイト。動作も軽快、設置も簡単。ブログやウェブページを縦書きレイアウトに変換します。

tategaki.info

h2vRのダウンロード

現在もh2vをダウンロードして利用できるが、初めての方は折角なのでh2vRの方を利用しよう。
こちらからダウンロードする。設置方法や、チュートリアルもあるので、しっかり読もう。

h2vR.js - 縦書きを実現するJavaScript - tategaki.info

縦書きレイアウトを実現するJavaScript・h2v.js の簡単設定版です。レスポンシブデザインにも対応しています。

tategaki.info

設置方法

ダウンロードしたら、zipファイルを解凍して、中にある4つのファイルのうち、以下の2つのファイルを使用する。

h2vR.js
h2vR.css

HTMLファイルへの記載

以下のように<head>と</head>の間に記載する。

<head>
  <link rel="stylesheet" href="保存したpath/h2vR.css"> 
  <script src="保存したpath/h2vR.js"></script> 
</head>

WordPressの場合の記載

同じように直接header.php等へ記載しても良いが、以下のようにfunctions.phpに記載する。

function custom_add_files() {　// custom_add_filesは自分でわかりやすい名前で良いので付ける
// 全ての記事に反映させる場合（子テーマを利用している）
  wp_enqueue_script( 'h2vR-script', get_stylesheet_directory_uri() . '/js/h2vR/h2vR.js',  "", '20161208', true );
  wp_enqueue_style( 'h2vR', get_stylesheet_directory_uri() . '/js/h2vR/h2vR.css', "", '20161208' );
// ページを指定して反映させる場合
  if (is_single(array(4787))) {
       wp_enqueue_script( 'h2vR-script', get_stylesheet_directory_uri() . '/js/h2vR/h2vR.js',  "", '20161208', true );
       wp_enqueue_style( 'h2vR', get_stylesheet_directory_uri() . '/js/h2vR/h2vR.css', "", '20161208' );
   }
｝
add_action('wp_enqueue_scripts', 'custom_add_files');

注意親テーマのディレクトリを参照する場合は、get_stylesheet_directory_uri()ではなくget_template_directory_uri() を使用とすること。
補足1 なお、保存先は、子テーマの中のjsフォルダの中のh2vRフォルダとしている。
補足2 h2vR.jsは使用している全てのcssファイルなのど後に読み込むようにすることとあるので、最後にtrueを付けて、</body>の直前で読み込むように指定している。

本文中のマークアップ

HTML要素に “h2vr_nn” （nnは数字）というクラスを指定すれば、ページのロード時に、その要素（以下、縦書き領域と呼びます）内を縦書きに変換して表示してくれる。
補足1 nnの部分が1行の文字数になる。
補足2 縦書き領域に指定できるのは、ブロック要素およびインラインブロック要素。
補足3 縦書き領域内のフォントサイズや行間スペース、文字間隔は、それぞれ CSS の font-size、line-height, letter-spacing プロパティを指定することによって設定可能。

デモ

以下の通りdivタグにクラスを指定して、表示させてみる。

<div class="h2vr_12">
この要素内が縦書きに変換されます。<br />
十二文字で自動的に折り返されます。
おはようございます。おなか空いたよね。
</div>

このように表示された。

この要素内が縦書きに変換されます。
十二文字で自動的に折り返されます。
おはようございます。おなか空いたよね。

WordPress用h2vRプラグイン

また、一々設置が面倒だと言う方へは、以下のサイトでh2vRをショートコードだけで簡単に利用できるWordPress専用プラグインが公開されている。

WordPressの記事を縦書き表示するプラグイン！小説同人サイトに便利なh2vRを設置する方法！ | 自作PCテクニカルセンター

小説や同人サイトを構築するには絶好のプラグインだと思います。ショートコードには少しだけ設定を実装しているので、比較的簡単に「縦書き」表示が可能になっています。機能としてはheadタグ内にh2vRのjsとcssを追記させて、記事内に専用のショートコードを記述するだけで使用可能です。

jisakupc-technical.info

注意当然全てのページでh2vRが読み込まれることになる。

過去に紹介した縦書き用スクリプト

h2v

h2vRの過去バージョンとしてh2vが公開されている。
h2vは今でも使えるので、以下の記事を参考にして欲しい。

WordPressや普通のホームページで縦書きが利用できる「tategaki」

ワードプレスや普通のホームページで縦書きが利用できるものとして、当ブログの過去記事で、「nehan3（涅槃）」と「nehan4」を紹介してき...

jump-up.info

2013-11-18 16:58

涅槃nehan.js

2016年12月8日現在、涅槃の最新バージョンはnehan5だ。
nehan3、nehan4に続くnehan5だがそれぞれ互換性はないので、注意が必要だ。

nehan

最新のnehan5は以下でダウンロードできる。nehan5.jsの他、nehan.book形式もあるようだ。チュートリアルを良く見て設置して欲しい。

nehan.js doc - dynamic and logical layout engine to generate logical paged media asyncronously.

nehan.js document

tategakibunko.github.io

古いバージョンのnehanについて

古いバージョンの涅槃については、以下の記事を参考にして欲しい。

WordPressや普通のホームページで縦書きが利用できる「涅槃」

GoogleCodeが閉鎖されたためnehan3のスクリプトの置き場所が変わっている。2016.12.4現在の置き場所は以下のサイトを参考に...

jump-up.info

2012-11-15 12:05

WordPressや普通のホームページで縦書きが利用できる「涅槃nehan」（ver.4）

GoogleCodeが閉鎖されたためnehan4のスクリプトの置き場所が変わっている。2016.12.04現在の置き場所は以下のサイトを参考...

jump-up.info

2013-11-05 20:05

なお、古いバージョンについては、置き場所が変わっているので、以下の記事を参考にして欲しい。

古いバージョンのnehan.jsを使っている人たちへ - anti scroll

Google Codeというサービスの閉鎖に伴い、Google Code上に置かれていたソースに直リンする形のテンプレートやプログラムが動かなくなっているようです。そこで、古いソースをまとめたrepositoryを作りました。 github.com rawgitを使って、CDN化した各バージョンのURLは以下のとおり...

tategakibunko.hatenablog.com