WordPressの記事の中に縦書き小説を表示するCSS

2020年10月4日 14:57

目的

同人イベントでは見本誌を置けない状況になっている。Webカタログのみしか無いイベントもある。自分のスペースでも、見本誌を置くのがためらわれがち。
Webサイトで試し読みを公開し、机上に「QRコード」等を印刷した紙を掲示する方法は今後も増えるかも。ですので、少しでも助けになればと思い、小説（文章）を縦書き表示するCSSをここに記載いたします。
基本、コピペで使えるはずです。

注意事項

私はただの文章書きです。CSS等についてはインターネット老人会な古のオタクレベルの知識しかありません。ここに記載するHTMLやCSSについては、私がネットで検索し、集合知を得させていただいて、自分のサイトで使ってうまく表示されているものになります。
いうならば集合知をまとめてドヤ顔で記載しているだけ、質問等にはあんまりお答えできないと思います。
※WordPressでないサイト作りでも使えると思います、たぶん。
※WordPressのテーマによっては表示がうまくいかないかもしれません。

前提

クラッシクエディターか、もしくはコードエディターモードで記事を作成する必要があります。(それ以外やったことないです。理屈で言えば、縦書き部分さえコードエディターモードで作成すれば、それ以外の部分はブロックエディターモード作成できるはず)。
★使用しているWordPressのVersionは「5.5.1–ja 」です。（2020/10/02現在）
★使用しているテーマは「Cocoon」です。（2020/10/02現在、WordPressのVersionに対応しているもの）
★手前味噌で申し訳ありませんが、実際に動作が確認できる私の小説ページはこちらです↓
http://shoyubin.starfree.jp/2019/10/12/goldred-01/
★スマホでも大抵の場合は崩れることなく表示されるはず。（手持ちのAndroid端末やiPhoneSE2では問題ありませんでした）
★↑ブラウザはChromeとSafariとMicrosoft Edgeでしか確かめてないです。IEやFirefoxは未確認（縦書きCSSを許してくれてるブラウザなら問題ないはず……）。

コピペでできる縦書きCSS+HTML

WordPressの「カスタマイズ」→「追加CSS」の項目に、下記をコピペ。
（WordPressを使用していないサイトでも、CSSを記述するファイルに書き込めばOKだと思います）

.tategaki {
 background-color:#d6c6af;
 writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 width: 100%;
 height: 70%;
 overflow-y: scroll;
 border: 2px solid #434343;
 padding: 20px;
 columns: 15em;
 column-gap: 20px;
 column-rule: 1px dashed #434343;
}

記事を作成する際、小説本文（テキスト）の前後に以下のHTMLタグをコピペ。

<div class="tategaki"><p>
※ここに表示したい縦書きテキストを書きます。(←これは消して良い文章です)
</p></div>

(クラシックエディターやWordPress以外のサイトで作成する場合は、pタグや改行箇所にはbrタグが必要になると思います。現在のWordPressのコードエディターモードで編集する際は、pタグは消えてしまうと思いますが、動作には問題なさそうです)。

見た目の装飾にわかりやすく関わる部分の解説（?）

 background-color:#d6c6af;　/*好きなカラーコードに変更で背景の色が変わります*/
 writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 width: 100%;　　　　　　　/*0～100まで好きな数字で横幅が変わります*/
 height: 70%;　　　　　　　/*0～100まで好きな数字で縦の長さ（高さ）が変わります*/
 overflow-y: scroll;
 border: 2px solid #434343;　　/*好きなカラーコードで枠の色が変わります。「px」の前の数字を変えると枠線の太さが変わります。「solid」は線の種類を表してます。（「border html」でググってみてください）*/
 padding: 20px;
 columns: 15em;
 column-gap: 20px;
 column-rule: 1px dashed #434343;　/*好きなカラーコードで段の間の区切り線の色が変わります。「px」の前の数字を変えると線の太さが変わります。「dashed」は線の種類を表しています。（「点線　html」でググれば線の種類の情報出てくるはず）*/

応用編：横書きの文章と縦書きの文章を同居させる記事の場合

手前味噌part.2、こんな感じになります。
一行しかないですが↓
http://shoyubin.starfree.jp/2019/11/26/windfrom/
さらに、divタグを使ってブログ風の装飾を足しつつ、もっと長文の横書き文章同居の例↓
http://shoyubin.starfree.jp/2019/11/19/one-punch-girl/

横書きテキスト横書きテキスト
<div class="tategaki"><p>
縦書きテキスト縦書きテキスト
</p></div>
横書きテキスト横書きテキスト

↑CSSを記述しておけば、本文HTMLはこれだけです。divタグで装飾をつける時も

<div class="記事全体装飾">
横書きテキスト横書きテキスト
<div class="tategaki"><p>
縦書きテキスト縦書きテキスト
</p></div>
横書きテキスト横書きテキスト
<div>

複数の縦書き文書を縦に並べることも可能

手前味噌part.3、こんな風に。（↓これは私の属するサークルのサイト）
http://seafoodonbri.starfree.jp/2020/01/07/sb1-shisyoku/
縦書き文章にはルビも触れるし、横書き文章の装飾だって可能。

横書きテキスト
<div class="tategaki"><p>
縦書きテキスト縦書きテキスト
</p></div>
横書きテキスト
<div class="tategaki"><p>
縦書きテキスト縦書きテキスト
</p></div>
（以下略）

まとめ

要は、CSSを記述しておけば、HTMLタグでくくったところは全部縦書きボックス内に収まるので、いくらでも横書きと縦書きを同居させられるって話です。
縦書き表示を複数、同一記事内に表示することも可能。
メリットは、たぶんそんなに表示が重くならない（通信量をくわない？）こと、テキスト関係のHTMLやCSS（特にルビ、縦中横等）が使えること？
挿絵や写真を一緒に表示したい場合は、「g.o.a.t」というブログサービスを使った方がスマートかもしれません。こちら↓
https://official-jp.goat.me/
プログラマー系の方から見たら、洗練されてないやり方かもしれませんが……。
ド素人オタクの脳みそでいじるには割と気軽な感じで気に入ってます。よろしければぜひご参考まで。