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

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

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

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

h2vRとは

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

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

h2vRのダウンロード

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

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

設置方法

ダウンロードしたら、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専用プラグインが公開されている。

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

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

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

h2v

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

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

涅槃nehan.js

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

nehan

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

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

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

WordPressや普通のホームページで縦書きが利用できる「涅槃」
GoogleCodeが閉鎖されたためnehan3のスクリプトの置き場所が変わっている。2016.12.4現在の置き場所は以下のサイトを参考に...
WordPressや普通のホームページで縦書きが利用できる「涅槃nehan」(ver.4)
GoogleCodeが閉鎖されたためnehan4のスクリプトの置き場所が変わっている。2016.12.04現在の置き場所は以下のサイトを参考...

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

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

以上

もし良ければお願いします。

良かったらフォローお願いします。

コメント

  1. […] WordPressや普通のホームページで縦書きが利用できる「h2vR」というプラグインがあります。入力は通常の横書き方式ながら、縦書きの記事を作成することができます。前回取り上げたテキ […]