スキルアップを始める!

【CSS】WordPressで縦書きレイアウトの文字を表示する方法|writing-mode: vertical-rl;

CSS(シー・エス・エス)
CSS(シー・エス・エス)
この記事は約1分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

ワードプレスなどで色々とページを作っていると、「小説風に縦書き」で表示したい・・・!という場面も出てくるかと思います。そんな時に使える方法です。

writing-mode: vertical-rl;

writing-mode
テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode

このプロパティは、ブロックのフロー方向を指定します。

文章をブロックエディターで入力

段落で文章を打ち込んだ状態です(ワードプレステーマはTwentyTwentyOne)。

ブロックにクラスを追加して、追加CSSでwriting-mode: vertical-rl;を追加します。

縦書きになりました!

たったこれだけで段落が横書き文章に変わりました!

まとめ

writing-mode: vertical-rl;を使えば、文章を縦書きに変えることができます!

ご参考下さい😃

URLをコピーしました!