763万 キーワード

2021年 検索パフォーマンス

57.8万 ユーザー

2021年 訪問ユーザー数

WordPressのスキルアップはこちら!▶[click]

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

CSS(シーエスエス)
この記事は約1分で読めます。
スキルアップで未来を変える!!
情熱があれば【誰でも】挑戦できます!
ここからSTART↓

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

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;を使えば、文章を縦書きに変えることができます!

ご参考下さい😃

Loading
「ワードプレスで未来を変える!」
【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して人生を変えたい!!という方をお待ちしています↓↓
CSS(シーエスエス)
EGUWEB
タイトルとURLをコピーしました