ワードプレステーマ　レインドロップスで俳句を書く

雲の峰

幾つ崩て

月の山
涼しさや

ほの三か月の

羽黒山
あやめ草

足に結ん

草鞋の緒

レインドロップステーマ1.482より、縦書きを行うことが出来る機能を実装しました。

Download:raindrops — Free WordPress Themes

機能の有効化手順

インストール後、カスタマイズ/アドオン/縦書き　のセクションで「はい」を選択の上保存します。

新規投稿を作成し投稿本文にテキストモードで以下のタグを記述します

タグを記述したら、ビジュアルモードに移動しても大丈夫です

<!--[raindrops class="writing-mode-mix"]-->

このタグを記述する事で、段落や見出し要素が縦書きで表示されるようになります。

書字方向は、縦書きになり文章は、一定の高さで書き出されるようになりますが、例えば、俳句のように、5文字とか7文字を縦書きにすると、どうなるでしょうか？

まずは何もせず　芭蕉の俳句を記述してみましょう

あやめ草

足に結ん

草鞋の緒

あやめぐさあしにむすばんわらじのお

形式上縦書きになっていますが、ぱっと見ただけでは、俳句に見えませんね

俳句らしさは、スタイルで見た目を調整する必要があります

文字サイズの調整

あやめ草

足に結ん

草鞋の緒

テキストモードでのhtmlソース

<p class="d-tate f24">あやめ草</p>
<p class="d-tate f24 center">足に結ん</p>
<p class="d-tate f24 bottom">草鞋の緒</p>

上記は、テキストモードで直接htmlを記述していますが、クラスが追加されています。

d-tateクラスは、縦書き表示	縦書きクラス
f24は、24px相当の文字サイズ	フォントサイズの詳細
centerクラスは、縦方向の中央揃え	縦書きクラス
bottomクラスは、縦方向の、下揃えになります。	縦書きクラス

文字サイズを調整して、文字を大きくするとフォントはより自然に美しく表示されます。

では、次に位置を調整してみましょう

中央に配置

あやめ草

足に結ん

草鞋の緒

右始まりの縦書きを中央に配置してみました

<div class="centered">
	<p class="d-tate f24">あやめ草</p>
	<p class="d-tate f24 center">足に結ん</p>
	<p class="d-tate f24 bottom">草鞋の緒</p>
</div>

centeredは、コンテンツを中央に配置します

縦横中央揃え – Raindrops　取扱説明書

なんとなく、俳句らしくなってきましたが、ページトップの俳句と比べると、文字間隔が狭いですね

ページトップにある、三句を横ならべした配置のソースは、以下のようになります。

<ul class="equal-height line haiku">
	<li class="pad-m color2 unit size1of3">
		<div class="centered">
			<p class="d-tate f18">雲の峰</p>
			<p class="d-tate center f18">幾つ崩て</p>
			<p class="d-tate bottom f18">月の山</p>
		</div>
	</li>
	<li class="pad-m color3 unit size1of3">
		<div class="centered">
			<p class="d-tate f18">涼しさや</p>
			<p class="d-tate center f18">ほの三か月の</p>
			<p class="d-tate bottom f18">羽黒山</p>
		</div>
	</li>
	<li class="pad-m color4 unit size1of3">
		<div class="centered">
			<p class="d-tate f18">あやめ草</p>
			<p class="d-tate center f18">足に結ん</p>
			<p class="d-tate bottom f18">草鞋の緒</p>
		</div>
	</li>
</ul>

equal-heightは、3つのブロックの高さをそろえます	横並びブロックの高さをそろえる equal-heightクラス
centeredは、コンテンツを中央に配置します	縦横中央揃え – Raindrops　取扱説明書
lineクラスは、ブロックの幅をそろえます	投稿内グリッドクラス
unit size1of3クラスは、それぞれのブロック幅を指定します	投稿内グリッドクラス
color2-4クラスは、ワードプレスの投稿編集画面の右上のヘルプタブを参照してください

補助的なスタイルを、投稿のカスタムCSSに記述しています。

.haiku li{
 list-style:none;
}
.writing-mode-mix-article .haiku p{
/* letter-spacingプロパティを使って、文字間隔をゆったりとしたものにしています*/
 letter-spacing: .5em;
}

レスポンシブ時に問題があったので追記しました

@media screen and (min-width : 641px) and (max-width: 800px ){
 .haiku p{
 font-size:108%;
 line-height:1.5;
 }
}

CSS note