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

  • 雲の峰

    幾つ崩て

    月の山

  • 涼しさや

    ほの三か月の

    羽黒山

  • あやめ草

    足に結ん

    草鞋の緒

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

Download:raindrops — Free WordPress Themes

機能の有効化手順

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

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

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

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

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

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

あやめ草

足に結ん

草鞋の緒

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

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

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

文字サイズの調整

あやめ草

足に結ん

草鞋の緒

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

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

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

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

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

中央に配置

あやめ草

足に結ん

草鞋の緒

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

centeredは、コンテンツを中央に配置します 縦横中央揃え – Raindrops 取扱説明書

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

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

equal-heightは、3つのブロックの高さをそろえます 横並びブロックの高さをそろえる equal-heightクラス
centeredは、コンテンツを中央に配置します 縦横中央揃え – Raindrops 取扱説明書
lineクラスは、ブロックの幅をそろえます 投稿内グリッドクラス

unit size1of3クラスは、それぞれのブロック幅を指定します 投稿内グリッドクラス
color2-4クラスは、ワードプレスの投稿編集画面の右上のヘルプタブを参照してください

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

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


新着記事

コメントは受け付けていません