WordPress

CodeLightsインタラクティブテキストを日本語、縦書きで使いたい

CodeLightsのインタラクティブテキストをみたときに、とっさにやりたいと思ったのは、縦書きで、です。縦書きにするスタイルwrithing-modeというのがあることを知り、早速やってみました。

インタラクティブテキストの要素をpで定義しているのですが、それに対して、親要素のdivを設けてflexboxのスタイルを指定しました(display:flex;、align-items:center;←垂直方向の揃えをセンターに)。

また、インタラクティブテキストは元々text-align:centerになっているのですが、縦書きの場合には書き出しの位置を揃えたかったので、インタラクティブテキストの要素pに独自のスタイルを付与しました(text-align:left !important;)。

 

猫は 動く もの が好き

 

縦書きのコードは以下。

<div style="width: 100%; height: 500px; display: flex; align-items: center; border: solid 1px #f0f0f0; writing-mode: vertical-rl; -ms-writing-mode: tb-rl;">
  [cl-itext texts="猫は 動く もの が好き
  猫は 動く 虫 が好き
  猫は 動く 指し棒 が好き
  猫は 動く しっぽ が好き
  猫は 動く マウスカーソル が好き" dynamic_bold="" animation_type="zoomInChars" font_size="30px" dynamic_color="#1e73be" tag="p" el_class="tategaki"]
</div>

上記インタラクティブテキスト部分(ショートコードのcl-itext部分)に付与したクラスel_classのスタイルtategakiは以下。

/* 縦書き用 */
.tategaki {
  text-align:left !important;
}