[WordPress]WordPressで小説サイトを作りたいと思い、おすすめのテーマやプラグインを探していました。私がやりたいと思ったことが記事の文章を「縦書き」にすることです。本来ウェブページは横書きが当たり前ですが、「h2vR」というスクリプトを使えば縦書きにすることができます。WordPressの知識があればh2vR.jsの導入はそんなに難しくないですが、プラグイン化してしまえばだれでも簡単に使えるので、縦書きプラグインというものを自作しました。自作したと言ってもWordPress上でh2vR.jsを利用できるようにしただけの支援プラグインです。配布されているh2vR.jsを改造して、WordPressに読み込ませるようにし、ショートコードで簡単に縦書き表示できるように手を加えました。縦書き表示させたい箇所をショートコードで囲めば以下のように表示させることができますよ。小説や同人サイトを構築するには絶好のプラグインだと思います。ショートコードには少しだけ設定を実装しているので、比較的簡単に「縦書き」表示が可能になっています。記事内に専用のショートコードを記述するだけで使用可能です。詳しい使い方は以下をご覧下さい。WordPress」のインストール方法と使い方まずはh2vR-for-wordpressをダウンロードしてみましょう。ダウンロードしたら解凍せずにWordPressの管理メニューの「プラグイン」よりzipファイルのままアップロードしてインストールして下さい。インストールが終わったらプラグインを有効化して下さい。ウェブページのheadタグ内に以下の2行が追加されます。src="{^PLUGIN_PATH/h2vR.js"></script>あとは縦書き表示させたい文章をショートコードで囲みます。WordPressのショートコードにはいくつか引数を指定することができます。基本的に一番使われると思われるものは「1行あたりの文字数を決めて縦書き表示」にする機能でしょうか。char=”15′′]縦書き表示させたい文章[/h2vr]char属性を使用することで、1行あたりの文字数を指定することができます。上の例では25文字間隔で改行が行われます。自動的に改行を行なってくれます。WordPressのテーマ毎にある程度、自動で調整してくれるので非常に便利です。文字の大きさ文字の大きさを変更するにはsize属性を使用します。以下の例ではCSSでいうと「font-size:18px;」と同じ意味になります。行間を調整するにはline属性を使用します。以下の例ではCSSでいうと「line-height:1.5em;」と同じ意味になります。line=”1.5′′]縦書き表示させたい文章[/h2vr]この辺りは使用しているWordPressのテーマやお好みで設定して頂ければ良いと思います。縦書き領域の横幅と高さが自動で算出されるため、「width」「height」の引数を指定しても無視されます。領域の大きさを固定したい場合は次の方法を利用して下さい。縦書き表示させる文章を自動でサイズ割り当てせずに固定長で表示させたい場合です。ショートコードのwidthとheight属性を使用することで任意の大きさのボックス内に文章を表示させることができます。スクロール表示widthとheightでボックスの大きさを指定して、文字が超えた場合はスクロール表示に切り替わります。height=”100′′]縦書き表示させたい文章[/h2vr]小さく縦書き文章を表示させる際には使えると思います。char属性を指定した場合は、widthとheightが機能しませんのでご注意下さい。背景色や枠線など細かい指定がしたい場合にも対応できます。いってもただ単にCSSの記述を追加するだけの単純な仕組みをとっています。option属性内にスタイルシートを定義することで、カスタマイズができます。ユーザ定義でCSSをカスタマイズwidthとheightでボックスの大きさを指定して、文字が超えた場合はスクロール表示に切り替わります。#333;“]縦書き表示させたい文章[/h2vr]標準の機能では物足りない場合はoption属性をうまく活用してあげれば良いと思います。スポンサードリンクルビ用のショートコードでふりがなを付けるルビ用のショートコードを利用すれば、本文中の文字に「ふりがな」を設定することができます。[h2vr_ruby][h2vr_rb]縦[/h2vr_rb][h2vr_rt]たて[/h2vr_rt][h2vr_rb]書[/h2vr_rb][h2vr_rt]が[/h2vr_rt][/h2vr_ruby]き[/h2vr][h2vr]ショートコード内に「ふりがな」表示させたい範囲に[h2vr_ruby]で囲みます。ふりがなを設定したい文字に対しては[rb]タグで囲み、表示させたいふりがなを続けて[rt]タグで囲むだけです。[文字列]h2vRには本文中の文字に傍線を引く機能も備わっています。今回用意したプラグインにもショートコードを利用すれば傍線が引けますよ。[h2vr_bousen]縦書き[/h2vr_ruby][/h2vr]シンプルな傍線(solid)を引くには上記のような記述をします。記述した場合は引ける傍線が4種類あります。引くことができますよ。style=”solid“]縦書き[/h2vr_ruby][/h2vr]style省略形とsolid指定した場合は「普通の傍線」が引かれます。小説サイトを作る際には非常に便利だと思います。ちなみにショートコードを使わなくても、プラグインさえ有効になっていれば、htmlタグ指定でユーザ定義も可能です。使い勝手が悪いようでしたら、htmlタグ直に打つのもよいでしょう。WordPressの動作環境h2vRが動作するブラウザの環境が以下の通りです。Edge基本的にHTML5とCSS3が利用できるブラウザなら動作すると思います。まあIE8以下を使用しているユーザもだいぶ減ったので、ウェブ開発者の立場からもそこまで気にしなくても良くなっていたりはしますね。4.1で使用したテーマは賢威6.2とsimplicityです。両方とも問題なく縦書き表示されましたが、賢威の方はline属性を指定しないとレイアウトが崩れます。したら私だけの環境かもしれませんが・・・。他のテーマでは動作検証していませんので、ご了承下さい。即席で作成したプラグインなのでもしかしたら思わぬバグがあるかもしれません。あとはプラグインの使用は自己責任でお願いしますね。最新の記事よっきパソコンが大好きな青年。職業はプログラマ/SE。フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。最終更新日:2016年9月12日コメントを残す返信をキャンセルする。published)サイト上に表示された文字を入力してください。業:IT系の講師/フリーランスJavaやPHPなどを中心にWEB系エンジニアとして活動しています。自作PCの魅力にハマり、何台も組み立て経験は豊富。自作PCアドバイザー的なこともやってるので、気軽にご相談下さい!!趣味でホームページ制作をしています。お仕事の依頼をしてみませんか?WordPressテーマ・プラグイン開発、自作PC組立代行などお仕事の依頼はこちらでお願いします。Reserved.このページの先頭へ。