*******************************************************************
WordPressで縦書き入力を行うには、ブロックエディタ(Gutenberg)の標準機能(6.7以降)またはカスタムCSSを使用します。最も簡単な方法は、段落ブロックのタイポグラフィー設定で方向を「縦」にすることです。古いバージョンでは、追加CSSクラスに writing-mode: vertical-rl; を適用することで縦書きを実現できます。
縦書き設定の主な方法:
WordPress 6.7以降の標準機能: 段落や見出しブロックの「タイポグラフィー」設定(またはブロックツールバーの?)>「方向」>「縦」を選択。
CSSを使用する方法:
縦書きにしたいブロックを選択。
右側パネルの「高度な設定」>「追加CSSクラス」に tategaki と入力。
カスタマイザーの「追加CSS」に以下を追加:
css
.tategaki {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
プラグイン: 縦書き対応のプラグインを使用する
注意点:
縦書きはCSSの writing-mode: vertical-rl; プロパティを使用するため、古いブラウザでは表示が崩れる可能性があります。
スマホ表示では画面幅に合わせて自動的に改行されるため、レイアウト調整が必要な場合があります
——————————————
WordPressで縦書き入力を実現するには、最新バージョンの標準機能を使う方法、プラグインを利用する方法、CSSでカスタマイズする方法の3つがあります。
- WordPress 6.7以降の標準機能(ブロックエディター)
WordPress 6.7から、段落ブロックや見出しブロックの標準設定で「方向(縦書き)」が選べるようになりました
手順:
縦書きにしたい「段落」や「見出し」ブロックを選択します。
右側の設定パネル(ブロック設定)の「タイポグラフィ」セクションにある、「?(オプション)」アイコンをクリックします。
メニューから「方向」を選択してチェックを入れます。
パネルに追加された「方向」設定で、縦向きのアイコンを選択すると文字が縦書きになります
———————
- プラグインを使う
ブロックエディター標準機能でうまくいかない場合や、より高度な縦書きレイアウトが必要な場合はプラグインが便利です。
h2vR for WordPress: 投稿を丸ごと縦書きに変換したり、部分的に縦書きにしたりできる定番プラグインです
h2vR-for-wordpressをダウンロード https://jisakupc-technical.info/wp-content/downloads/h2vR-for-wordpress.zip http://jisakupc-technical.info/web-survice/wordpress/4448/
ダウンロードしたら解凍せずにWordPressの管理メニューの「プラグイン」より
zipファイルのままアップロードしてインストール
あとは縦書き表示させたい文章をショートコードで囲みます。
[h2vr]縦書き表示させたい文章[/h2vr]
———————
- CSSでカスタマイズする
特定の部分だけを縦書きにしたい場合、CSSの writing-mode プロパティを使用します
手順:
縦書きにしたいブロックの「高度な設定」から「追加 CSS クラス」に適当な名前(例: tate-gaki)を付けます。
カスタマイザーの「追加 CSS」に以下のコードを貼り付けます。
css
.tate-gaki {
writing-mode: vertical-rl; /* 縦書き(右から左へ) / -ms-writing-mode: tb-rl; / IE用(必要な場合) */
注意: 縦書きにすると高さ(Height)の調整が必要になるケースが多いため、親要素の高さ設定も確認してください。
*******************************************************************