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

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

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

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

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

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

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

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

管理画面でアップロード

そして管理画面でプラグインを追加→アップロード

解凍せずzip形式のままアップロードしてください。

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

char=”15″は一列に表示される文字数制限です。1列に最大15字並べられます。

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

size=”32″でfontサイズ32pxになります。

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

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

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

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

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

.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;
}

.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;
}

参考：コピペで使えるCSSデザイン枠テンプレート
参考：CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン

以上です！記事を縦書きにできるプラグインのご紹介でした。
プラグインダウンロードはこちら→WordPressの記事を縦書き表示するプラグイン！小説同人サイトに便利なh2vRを設置する方法！