レインドロップステーマ 縦中横

私は1才です。
私は10才です。
私は100才です。
私は明治30年生まれです。
私は1901年生まれです。

縦方向の中にd-yokoクラスで、横方向に書けますという感じです。

WordPress テーマ Raindropsでの縦中横のチャレンジです。

おかしな表示になっている場合は、リロードしてみてください。Chromeブラウザで、d-yokoクラスが、縦方向に並んで、崩れることがあるみたいです。Chromeでのリロードは、control+shift+Rで行ってみてください。

HTML

<div class="centered">

私は<span class="d-yoko tatetyuyoko-1">1</span>才です。
私は<span class="d-yoko tatetyuyoko-2">10</span>才です。
私は<span class="d-yoko tatetyuyoko-3">100</span>才です。
私は<span class="d-yoko tatetyuyoko-2-kanji">明治</span><span class="d-yoko tatetyuyoko-2">30</span>年生まれです。
私は<span class="d-yoko tatetyuyoko-4">1901</span>年生まれです。
</div>
<!--[raindrops class="writing-mode-mix"]-->

CSS


.tatetyuyoko-2{
 letter-spacing:-0.1em;
 -moz-font-feature-settings: "halt";
 -webkit-font-feature-settings: "halt";
 font-feature-settings: "halt";
}
.tatetyuyoko-3{
 letter-spacing:-0.2em;
 -moz-font-feature-settings: "twid";
 -webkit-font-feature-settings: "twid";
 font-feature-settings: "twid";
}
.tatetyuyoko-4{
 letter-spacing:-0.1em;
 transform: scaleX(.8);
 -moz-font-feature-settings: "qwid";
 -webkit-font-feature-settings: "qwid";
 font-feature-settings: "qwid";
}
.tatetyuyoko-2-kanji{
 transform: scaleX(.7);
 -moz-font-feature-settings: "halt";
 -webkit-font-feature-settings: "halt";
 font-feature-settings: "halt";
}


新着記事

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