WordPressで文章を縦書きにする方法

ワードプレスでホームページを作成していて、例えば和風のイメージのサイトなどで、文章を縦書きにしたいときってありますよね。

今回は、縦書きの文章を作成する方法をご紹介させていただきます。

文章を縦書きにする方法

ワードプレスでは、文章（段落ブロックや見出しブロック）は、テキストを左寄せ、中央寄せ、右寄せには出来ますが、縦書きにするのは標準の操作では出来ません。

そこで、追加CSSで縦書きの設定にするやり方をご紹介したいと思います。

文章にCSSクラスを付ける

固定ページや投稿ページの編集画面に段落ブロックまたは、見出しブロックに文章を書いて、そのブロックを選択した状態で、画面右側下方の「高度な設定」をクリックします。

「高度な設定」の「追加CSSクラス」の入力欄にCSSクラスを入力します。ここでは、”tategaki”としましたが、文字列は何でも構いませんので、ご自身でわかりやすい文字列を入れてください。

追加CSSを記述する

今度は、追加CSSを記述します。

管理画面左側「外観」＞「カスタマイズ」をクリックします。

続いて、「追加CSS」をクリックします。

追加CSSの入力欄に以下のコードを入力します（コピペでOKです）。

.tategaki{
	writing-mode: vertical-rl;    /* 文章を縦書きにする */
	margin: 0 auto;               /* コンテンツを中央寄せにする */
	font-size:23px;               /* 文字サイズを23pxに設定 */
	font-family:serif;            /* 明朝体にする */
	line-height:50px              /* 文字間隔を50pxに設定 */
}

.tategaki　は、先ほど文章に設定した追加CSSクラスになります。

writing-mode: vertical-rl;　は、文章は縦書きにする命令になります。

また、それ以外にも中央に寄せたり、フォントを変えたりして見た目を整えています。

これでこんな感じに縦書きの文章になります。

こちらの縦書きを利用したサンプルサイトはこちらになります。

居酒屋イメージのサンプルサイト

まとめ

ワードプレスの標準機能では、文章の縦書きは難しいのですが、このように追加CSSを使うことによって簡単に縦書きに見た目を変えることが出来ます。

少しでもご参考になれば幸いですので、どうぞよろしくお願いいたします。