※ 初出：2018年8月の記事をリライト。
和風のお店のホームページを手がけていると、「ここだけ縦書きにできたら雰囲気が出るのに」と思う場面がある。取り扱ったのは和食のお店。季節の挨拶文を差し込みたくて、縦書き表示に対応したプラグインを探して行き着いたのが「h2vR for WordPress」だった。
導入から実際の設定、そして今使うなら知っておきたい注意点までまとめておく。
h2vR for WordPressとは
h2vR for WordPressは、自作PCテクニカルセンターが公開しているjQueryプラグイン「h2vR.js」を、ショートコードだけで手軽に使えるようにしたWordPress用プラグイン。
本文を専用のショートコードで囲むだけで、囲んだ範囲だけを縦書きに変換してくれる。小説サイトや同人誌系のブログで使われることが多いが、和風テイストのページにワンポイントとして差し込むのにも向いている。
配布元は開発者のサイトで、ダウンロードは以下から。
h2vR-for-wordpressをダウンロード
※配布URLは変更されている場合があるため、リンク切れの際は「h2vR for WordPress」で検索して開発元ページを確認してほしい。
インストールから有効化までの手順
- ダウンロードしたzipファイルは、解凍せずそのままの状態で使う
- 管理画面の「プラグイン」→「新規追加」→「プラグインのアップロード」からzipを選択
- インストール後、そのまま「有効化」をクリック
有効化すると、サイトのhead内にh2vR用のCSSとJavaScriptが自動的に読み込まれる。ここまでは特に迷うところはなく、数分で終わる作業だ。
ショートコードの基本的な使い方
縦書きにしたい文章を、[h2vr]と[/h2vr]で挟むだけ。試しに「枕草子」の一節で表示させてみたのが下のサンプルだ。
[h2vr]
春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほかにうち光て行くもをかし。雨など降るもをかし。
[/h2vr]
パラメータで表示を細かく調整する
ショートコードには、レイアウトを調整するためのパラメータがいくつか用意されている。使ってみて特に重宝したのは以下のあたりだ。
- char：1行あたりの文字数。指定した文字数で自動的に改行される
- size：文字サイズ（px）
- line：行間（em）。詰まりすぎて読みにくいときはここを1.6〜1.8あたりに広げると落ち着く
- width／height：表示エリアの横幅・高さ（px）
- class：任意のクラス名を付与し、独自のCSSでデザインしたい場合に使う
- option：style属性に直接CSSを追記できるオプション枠
例えば[h2vr char="15" size="28"]のように書けば、15文字で折り返しつつ文字サイズを28pxに、といった具合に組み合わせて使える。数値だけ見てもピンとこないと思うが、実際にプレビューを見ながら char と line を少しずつ動かすと、しっくりくる見た目にたどり着きやすい。
フォントを明朝体に変更する
和風の雰囲気を出すなら、ゴシック体よりも明朝体のほうがしっくりくる場面が多い。フォントを変更したい場合は、テーマの style.css に font-family を追記する形で対応する。
.h2vr {
font-family: "Yu Mincho", "YuMincho", "游明朝", serif;
}子テーマのstyle.cssに書き足すのが安全。親テーマを直接編集すると、テーマのアップデート時に上書きされて設定が消えてしまうので注意してほしい。
ふりがな（ルビ）を振りたいときは
h2vRには専用のルビ用ショートコードも用意されていて、[h2vr_ruby]で囲んだうえで、対象の文字を[h2vr_rb]、ふりがなを[h2vr_rt]で指定すれば、縦書き内でもふりがなを表示できる。難読漢字を使う和風サイトでは地味に助かる機能だ。
導入前に知っておきたい注意点
ここが今回いちばん伝えたいところなのだが、h2vRは長らく更新が止まっているプラグインだ。動作自体は今でもするものの、以下のような点は踏まえたうえで導入したほうがいい。
- WordPress 5.x以降では、空の段落タグが縦書き表示に干渉して見た目が崩れることがある。この場合はh2vR.cssの末尾に
p:empty::before { content: none !important; }を追記すると改善するケースが多い - ブロックエディタで「ブロックの復旧（リカバリー）」を実行すると、ショートコードが自動的に別のタグへ書き換えられてしまい、縦書き設定が無効になることがある。誤操作で復旧を選ばないよう気をつけたい
- WordPress本体やテーマの大型アップデート後は、更新が止まっているプラグインである以上、表示が崩れないか都度確認しておくと安心
要は「メンテナンスされていない前提で、壊れたら自分で調整する」くらいの気持ちで使うプラグインということ。逆に言えば、それさえ理解していれば軽量で扱いやすく、和風サイトのワンポイント演出には今でも十分使える。
どんな人・サイトに向いているか
記事全体を縦書きにしたいような小説・同人系サイトよりも、和風の店舗サイトやブログで「挨拶文だけ」「俳句や短歌の引用部分だけ」といった一部区間を縦書きにしたいケースのほうが、h2vRの手軽さが活きると感じた。サイト全体を本格的に縦書き対応させたい場合は、CSSのwriting-modeプロパティを使ったテーマ側の作り込みや、他の縦書き専用プラグインと比較してから決めるのがおすすめだ。
（秘亭の備忘録）今回はショートコードの範囲指定だけで十分事足りたが、サイト全体で使うなら子テーマ側でクラス設計を先に決めておいたほうが、あとあと調整がラクになる。
まとめ
h2vR for WordPressは、ショートコードひとつで手軽に縦書き表示を実現できる軽量なプラグイン。パラメータでレイアウトを細かく調整でき、ルビ表示にも対応している一方で、更新が止まっている点だけは導入前に理解しておきたい。和風サイトのワンポイント演出として、無理のない範囲で取り入れてみてほしい。
関連記事：WordPressのカスタマイズで困ったときの対処法まとめ
関連記事：SWELLで和風デザインのサイトを作るときのポイント
この記事を書いた人：秘亭（himetei）
WordPressでのブログ・サイト運営歴15年。SWELLテーマを中心にPC・ガジェット、WordPressカスタマイズ、地域情報などを発信中。
コメント