WordPressで縦書きをする方法

WordPressで縦書きをする方法を解説します。

この記事で紹介する方法を使用すれば、次のような縦書きが可能となります。

CSSを指定して縦書きする方法

縦書きをしたい文章にCSSプロパティを設定することで縦書きが可能となります。

縦書きにしたい文章にwriting-modeのvertical-rlまたはvertical-lrを指定しましょう。

右から左に文章を進めたい場合

vertical-rlを指定します。

<div style="writing-mode: vertical-rl;">縦書きしたい文章</div>

左から右に文章を進めたい場合

vertical-lrを指定します。

<div style="writing-mode: vertical-lr;">縦書きしたい文章</div>

ショートコードを利用して縦書きを行う方法

縦書き用にショートコードを自作すると、手軽に任意の文章を縦書きにすることができます。

ショートコード

/**
 * 縦書き
------------------------------------------------------------------------------------------------ */

add_shortcode('vertical', function ($atts, $content = null) {

  $atts = shortcode_atts(
    array(
      'mode' => 'rl'
    ),
    $atts,
    'vertical'
  );

  return sprintf(
    '<div style="writing-mode:vertical-%1$s">%2$s</div>',
    $atts['mode'],
	$content
  );
  
} );

エディターでの記載方法

modeでrlまたはlrを指定してください。

[vertical mode="rl"]右から左へ[/vertical]

[vertical mode="lr"]左から右へ[/vertical]