WordPressで記事を作成していると、たまに、
記事の一部だけ「縦書き」にしたい
なんてときありますよね。
たとえば、縦書きで書かれた「俳句」や「漢文」を引用する時です。
さて、そんな無茶な要望にも我らがWordPressならば期待に応えてくれます。
ググってみたところこちらの神記事がヒット。
簡単にいうと、
縦書きのCSSを適用したdiv要素で文を包め、
と。
上で取り上げた記事で紹介されていたタグを参考にし、
<div style="writing-mode: vertical-lr;">孔子曰、良藥苦於口、而利於病。</div>というHTMLタグをWordPressのテキスト編集モードにぶち込むでみたところ、次のように表示できました。
孔子曰、良藥苦於口、而利於病。
うん、しっかり縦書きです。
記事の一部を縦書きにするならこの方法で十分です。
わたしは個人的に、縦書きと横書きの文章の区分けをはっきりさせたいこともありまして、縦書き要素の背景を灰色に。
そして、padding要素の数値をいじることで、縦書き文章が要素に余白をもうけることに。
CSSでの注文が多くなったこともあり、HTMLとCSSを分離。
WordPressのstyle.cssに以下のcssを追記しました。
.tategaki{
writing-mode: vertical-rl;
background-color:#333333;
background-color: #f7f7f7;
padding:50px;
font-size: 24pt;
}
そして、記事のテキスト編集モードにて以下のHTMLを追加。
<div class="tategaki">剃り捨てて黒髪山に衣更 曾良</div>うん、これで以下のように、より明確に縦書き文章を横書きスタイルに挿入できました。
剃り捨てて黒髪山に衣更 曾良
WordPressの文章中に縦書きをぶち込みたいときはぜひご活用ください。
それでは！
Lin
