WordPressで文章を縦書きにする方法 - 格安ホームページ制作のEM Web Create

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

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

Contents

文章を縦書きにする方法

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

そこで、追加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;　は、文章は縦書きにする命令になります。

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

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