【WordPress】本文を縦書きにする方法【個人創作サイト】

web上では、テキストは基本的に横書き表示です。

ame

日本語で創作している身としては、縦書き表示にもこだわりたい！

ということで、WordPressのテキストを縦書きにする方法を調べました。

何度でも簡単に縦書き用のCSSを反映させるため、WordPressの機能である「追加CSS」「追加CSSクラス」を使用します。

WordPressでは、「追加CSS」にCSSを記述することによって独自の装飾を施すことが可能になります。

これを利用して、縦書き表示にします。

追加CSSを記述してしまえば、あとは縦書き表示をさせたいブロックで追加CSSクラスを適用させればOK。

最初に少し頑張る必要はありますが、その頑張りによって後が格段にラクになります。

ame

なにより、表現の幅が広がるのは楽しい！

WordPressで縦書き表示をしたい方の参考になれば幸いです。

使用しているサーバー & WordPressテーマ

スポンサーリンク

縦書き表示の見本

今回紹介するCSSでは、

• 縦書き
• 横スクロール
• 画面サイズに合わせて縦横幅を自動調整

が、できるようになります。

画面ごとの見え方

▼ 実際にスクロールしたり、画面サイズを変更して、見え方を確かめてみてください。

　線香花火に照らされている彼女の顔が知らない人のように見えた。別次元の存在ではないかとさえ思える。見慣れない浴衣のせいだろうか。少し腕を伸ばせば肩にも髪にも、頬にさえ触れられる距離にいるというのに。
　火花散るリズムに合わせて明暗が変化し、不可思議な世界に迷い込んだ気分になる。
　こんな気持ち知らない。不安で不安でしかたがない。足元が崩れていくみたいで心細い。
　彼女の手元でパチパチと小さな音を立てながら、しかし激しい火花を散らす線香花火は、やがて大きな玉となり、瞬く間に――。
「落ちちゃった」
　彼女の声を合図に、辺りが急激に暗くなった。そんな気がしただけかもしれない。少し離れた場所にランタンを置いてあるのだから、たかだか線香花火一つ消えたところで周囲の光量に支障はないはず。
　それでも。シンと静まりかえった空間は、とても暗く思えた。
　真隣にいる人しか、見えなくなるくらいに。
「どうしたの？　なんだか顔色悪くない？」
　こちらを覗きこむ丸い目。垂れ眉がいっそう垂れている。
　白くてなめらかな肌をした手がこちらへ向かい、そのまま額にあてがわれた。夏だというのに冷たい指先。
　彼女が動くたび、まとう浴衣の袖がずり下がっていく。肘が、二の腕があらわになる。
　静かだったはずの空間に爆音が響き渡った。他の誰にも、すぐそばの彼女にすら聞こえていないだろうが、全身を打ち鳴らすそれはあまりに煩さくて、自然と顔が歪んでいく。
………

閲覧環境によって見辛くなる可能性があるため、あえて行数、1行あたりの文字数は固定しないようにしました。

手順1：追加CSSを記述する

管理画面から「外観」→「カスタマイズ」を選択

カスタマイズメニューから「追加CSS」を選択

「CSS」を記述→「公開」を選択→管理画面に戻る

①のエリア内に、画像の通り記述します。

こちらをコピー&ペーストしてもOK

.tategaki {
  writing-mode: vertical-rl;
	
	width: 95%;
	
	height: 93%;
	
	padding: 10px;
	margin: auto;
	
	overflow-x: scroll;
}

記述内容の詳細

• .tategaki …「tategaki」というクラスを指定する
• writing-mode: vertical-rl; … テキストを縦書きに、行の進む方向を右から左に向かうようにする
• width: 95%; … ブロックの横幅を表示画面に対して95%にする
• height: 93%; … ブロックの高さを表示画面に対して93%にする
• padding: 10px; … テキストとブロックの枠までの間の余白（内側の余白）を10pxにする※画像オレンジの範囲
• margin: auto; … ブロックの枠とエリアの枠までの間の余白（外側の余白）を自動調整する※画像青の範囲
• overflow-x: scroll; … はみ出たテキストをスクロールで表示させる

①に追加できたら、②の「公開」を押して変更を確定させます。

③を押して管理画面に戻ります。

手順2：追加CSSクラスを適用する

任意の投稿を選択

適用させたい「ブロック」→「高度な設定」を選択

右側のサイドバーが表示されていない場合、画像の「※マーク」のところを確認してみてください。

「追加CSSクラス」に「tategaki」と記述

編集画面では、「追加CSSクラス」を記述後も縦書き表示になりません。

プレビューで表示を確認する

プレビュー画面で縦書きになっていれば成功です。

「追加CSS」の記述を消さない限り、適用させたいブロックの「追加CSSクラス」に「tategaki」と記述すれば、いつでも縦書き表示にできます。

さいごに

WordPressの機能に無ければできないのか？と思いきや、そんなことはありませんでした。

ベースは「プログラミング言語で書く」ことなので、書く場所や言葉がルールに則っていれば、自分の表現したいことに近づけられるようです。

最初は「わけわからん…」状態でしたが、これも「言語」で「書くこと」だと思ったら、だんだん楽しくなってきました。

明確なルールが存在し、それに順ずればその通りの結果が、反すればエラーが出るので、始めてしまえばわかりやすくてとっつき易いものでした。（もっと複雑なことをやろうとしたら大混乱待ったなしですが…）

比較的簡単に本格的なサイトを作れるWordPress。やろうと思えばなんでもできそうです。

少しずつ手を加えて、自分だけの城を築いていきたいです。

とはいえ創作サイトの本質は創作！ということで、中身も少〜しずつ増やしていく予定。（きっと忘れた頃に増えていると思います…）

また何かあれば記事にしますね。

それでは〜。

使用しているサーバー & WordPressテーマ

飴（あめ）

書くことが好きな一般人

Profile

iPad（とiPhone）でのんびり物書きしています。
以前は二次創作の同人小説本を作っていました。
現在は当ブログの更新をメインに物書き活動しています。
全部PC不使用。iPadだけでできました。

プロフィールを読む

XYouTubeContact

ランキング参加中

よければポチッとお願いします↓

にほんブログ村