WordPressの表内で、セルの文字列を縦書き表示する方法

ワードプレスのTable

ワードプレスのGutenbergも慣れてきたせいか、だいぶ使い勝手がよくなってきました。

が、いまだにTable（表）に関しては融通が利かないというか、思い通りの見栄えにするには結構面倒なことになっています。

例えば、このような表。左見出しの商品に、上部見出しの機能が「搭載されているか否か」ですが、見出しの文字列が折りたたまれて非常に見づらい見出しになってしまいます

商品名	タッチパネル	高低差表示	同心円表示	ピンポジ登録	スマホ連動	高低差オン／オフ	補正距離表示	三点間距離表示	推奨番手
ショットナビインフィニティ		O	O	O	O	O	O	O	O
ガーミン Approach S70	O	O		O	O	O	O	O	O
Evolve PRO Touch	O	O	O	O	O	O	O	O	O
ョットナビ AIR EX	O	O	O	O		O	O	O
ボイスキャディ A3	O	O	O	O		O	O	O
ボイスキャディ T-Ultra	O	O		O	O	O	O	O
ショットナビクレスト2		O	O	O	O	O	O	O	O

今回は、このように文字列を折りたたまずに、ワードプレスの表で、文字列を縦書きにして表示する方法です。

セルの文字列に改行を入れる

一番簡単な方法としては、見出しの文字を一文字づつ改行して縦書きにみせること

この場合、文字の右にカーソルをおいて「Shift」キーを押しながら「Return」キーで改行します。

HTMLを見るとこのような書式に変わります

<table width="846">
<tbody>
<tr>
<th width="270">商品名</th>
<th width="64">タ<br />ッ<br />チ<br />パ<br />ネ<br />ル</th>
<th width="64">高<br />低<br />差<br />表<br />示</th>
<th width="64">同<br />心<br />円<br />表<br />示</th>
<th width="64">ピンポジ登録</th>
<th width="64">スマホ連動</th>
<th width="64">高低差オン／オフ</th>

これでも思ったような表になるのですが、結構面倒くさいですね

スタイルを追加する

そこで、便利なのがHTMLにスタイルを追加する方法

「指定したセルの文字列を縦書きにする」ということで、最も簡単なのは以下の方法が一番かと思います

<span style="writing-mode: vertical-rl;">縦書きにしたい文字列</span>

縦書きにしたい文字列を上記のコードで挟むだけ

今回の表は上段見出しの文字列を縦書きにするということで、実際のHTMLのコードは以下のようになります

<table width="846">
<tbody>
<tr>
<th width="270"><span style="writing-mode: vertical-rl;">商品名</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">タッチパネル</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">高低差表示</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">同心円表示</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">ピンポジ登録</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">スマホ連動</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">高低差オン／オフ</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">補正距離表示</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">三点間距離表示</span></th>
<th width="64"><span style="writing-mode: vertical-rl;">推奨番手</span></th>
</tr>
<tr>

この方が手間も時間もかからずに思い通りの表になるかと思います。

スタイルを追加した表をみてみると・・・

商品名	タッチパネル	高低差表示	同心円表示	ピンポジ登録	スマホ連動	高低差オン／オフ	補正距離表示	三点間距離表示	推奨番手
ショットナビインフィニティ		O	O	O	O	O	O	O	O
ガーミン Approach S70	O	O		O	O	O	O	O	O
Evolve PRO Touch	O	O	O	O	O	O	O	O	O
ョットナビ AIR EX	O	O	O	O		O	O	O
ボイスキャディ A3	O	O	O	O		O	O	O
ボイスキャディ T-Ultra	O	O		O	O	O	O	O
ショットナビクレスト2		O	O	O	O	O	O	O	O