縦書き

Raindrops1.482から、テーマは縦書きをサポートするようになりました。

  1. 縦書きを有効化する方法
  2. 縦書きクラス
  3. 縦書きのサンプル
  4. 既知の問題

縦書きを有効化する方法

  • 日本語環境で利用している場合、カスタマイザーを開くと、アドオンセクションに縦書きという項目が表示されるので「はい」を選択します。

    行の高さ、縦書きの範囲、自動的に縦書きにする要素を設定という項目がありますが、それらは動作確認をした後で自由に変更してください。

    次に、新規投稿を作成します。

    投稿本文に、以下のテーマタグを記述します。

    (テキストモードで貼り付けてください)

    入力が終わったら、(ビジュアルモードに切り替えて)好きなだけ文章を入力します。

縦書きクラス

d-tate
p要素、h1-h6要素で、縦書き表示を行います
d-yoko
横書き表示を行います
full-width
p-yokoと組み合わせて、コンテンツ幅で表示
d-tate-wrap
youtube等のOembedコンテンツ、キャプションショートコードを縦書き文章中に含める場合は、<div class="d-tate-wrap">でラップしてください。このブロックは、幅296pxに制限されます。
upright
span要素で、半角英数文字の成立表示を行います。(edgeでは、動作しません)
indent
p要素で、1文字分インデントします。
indent-2
p要素で、2文字分インデントします。
bottom
p要素で、文字を下揃えします。
center
p要素で、縦方向中央揃え
centered
div要素で、子p要素 縦書き文を横方向中央配置します
writing-mode-mix-article
個別投稿タイトル近くに、縦書き横書き表示選択ボタンが表示されますが、CSSを縦書きの場合だけに適用する場合には、このクラスを使ってください(1.483からのサポート)
writing-mode-standard-article
個別投稿タイトル近くに、縦書き横書き表示選択ボタンが表示されますが、CSSを横書きの場合だけに適用する場合には、このクラスを使ってください(1.483からのサポート)
em要素
圏点を表示します(edgeでは、動作しません)
ruby要素 rt,rp
ルビ表示をサポートします。(rtcはサポートしません)
blockquote要素
そのまま記述可能です
ul,ol,dl
そのまま、縦書きで表示します
table要素
横書きのまま表示します(td内にp要素を含んでいなければ、p要素に何等かのアトリビュートがあれば、横書き)
hr要素
縦書き文章内で使用する場合は、d-tateクラスを追加していただくと、縦型のヘアーラインを表示します

縦書きのサンプル

既知の問題