SEOに強いWordPressで小説を公開したい、あるいは社訓・経営理念をホームページに..などなどやはり日本語といえば縦書きですので記事を縦書きできるようにしたいと思った人は少なからずいるのではないでしょうか。

この記事ではWordPressで簡単に記事を縦書きにできるカスタマイズ方法についてご紹介したいと思います。

記事を縦書きにするプラグイン「h2vR for WordPress」

今回は自作PCテクニカルセンター様で紹介されている「h2vR for WordPress」というプラグインをご紹介します。

もともと記事を縦書きにできるjQueryプラグインh2vR.jsをWordPressで簡単に利用できるようにしたプラグインのようです。

プラグインをダウンロード

まずは自作PCテクニカルセンター様で配布されているプラグインのファイルをダウンロードさせていただきます。
screenshot-2016-10-31-9-54-17

管理画面でアップロード

そして管理画面でプラグインを追加→アップロード
screenshot-2016-10-31-10-02-01
解凍せずzip形式のままアップロードしてください。
screenshot-2016-10-31-10-02-14

これで有効化すればheadセクション内にh2vRのjsとcssが読み込まれ記事を縦書きにできるようになります。
縦書きにしたい文章は[h2vr][/h2vr]のショートコードでサンドイッチします。

[h2vr char=”15″]
一、聞きやすいトーンで
一、適度な速度で
一、明るい表情・態度で
一、結論を簡潔に
一、正しい敬語を使う
[/h2vr]

char=”15″は一列に表示される文字数制限です。1列に最大15字並べられます。
screenshot-2016-11-01-7-47-45

文字を大きくしたい場合はsizeを定義します。

[h2vr char=”15″ size=”32″]
一、聞きやすいトーンで
一、適度な速度で
一、明るい表情・態度で
一、結論を簡潔に
一、正しい敬語を使う
[/h2vr]

size=”32″でfontサイズ32pxになります。
screenshot-2016-11-01-7-50-42

fontを明朝体にしたい場合はstyle.cssにfont-familyを定義します。

._r_e{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

部分的に文字色の変更を行えばもっと見やすくなります。

[h2vr char=”15″ size=”32″]
一、聞きやすいトーンで
一、適度な速度で
一、明るい表情・態度で
一、結論を簡潔に
一、正しい敬語を使う
[/h2vr]

screenshot-2016-11-01-7-52-03

クラス（class）の定義も可能

クラス名を付加することでより自由にデザインすることが可能となります。

[h2vr char=”15″ size=”32″ class=”design1″]
一、聞きやすいトーンで
一、適度な速度で
一、明るい表情・態度で
一、結論を簡潔に
一、正しい敬語を使う
[/h2vr]
.design1{ color: #fff;
background: #f08080;
padding: 20px;
border: 1px dashed rgba(255,255,255,0.8);
box-shadow: 0 0 0 5px #f08080;
-moz-box-shadow: 0 0 0 5px #f08080;
-webkit-box-shadow: 0 0 0 5px #f08080;
}

screenshot-2016-11-01-8-47-34

[h2vr char=”15″ size=”28″ class=”design2″]
一、聞きやすいトーンで
一、適度な速度で
一、明るい表情・態度で
一、結論を簡潔に
一、正しい敬語を使う[/h2vr]
.design2 {
border: 2px solid #da4033;
border-radius: 4px;
margin: 2em 0;
padding: 2em;
position: relative;
}
.design2::before {
background-color: #fff;
color: #da4033;
content: 'ビジネス会話の基本';
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}