Raindrops1.482から、テーマは縦書きをサポートするようになりました。
縦書きを有効化する方法
-
-
日本語環境で利用している場合、カスタマイザーを開くと、アドオンセクションに縦書きという項目が表示されるので「はい」を選択します。
行の高さ、縦書きの範囲、自動的に縦書きにする要素を設定という項目がありますが、それらは動作確認をした後で自由に変更してください。
次に、新規投稿を作成します。
投稿本文に、以下のテーマタグを記述します。
(テキストモードで貼り付けてください）
<!--[raindrops class="writing-mode-mix"]-->
入力が終わったら、（ビジュアルモードに切り替えて）好きなだけ文章を入力します。
縦書きクラス
- 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クラスを追加していただくと、縦型のヘアーラインを表示します