ドラクエ風のセリフや文章を再現するHTMLとCSS【コピペ可】

最近、また変なことがしたくなって構想を練っていたんですが、夏の暑さで頭がおかしくなったのか、こんなアイディアを思いつきました。

はい、ドラクエっぽいセリフです。1周どころか2周3周した感じですが、なぜかあまりこういったデザインを見かけないので、きっと最高の思いつきだったに違いありません（わぁい）

で、もしかしたら同じことをしたい方がいるかもしれないと思ったので、今回このドラクエ風のセリフや文章を再現するコードをご紹介します。

WordPress限定ではなく、どのWEBサイトでも再現できるので、ぜひ参考にしていただければと思います。

HTML

こちらが雛形になるHTML。テキストは自由に変更可能で、テキストリンクにすることもできます。

<div class="blackboard question">
<p>＊「ここに質問が入ります」</p>
</div>
<div class="clearfix">
<div class="blackboard answer float-r">
<p class="blink-before">はい</p>
<p>いいえ</p>
</div>
</div>

CSS

こちらがCSS。スタイルシートの最初の方にコピペすれば間違いないと思います。レスポンシブデザインなので、コピペするのは一回だけです。

（WordPressの場合は外観→カスタマイズ→追加CSSにコピペするのが簡単です）

/* 黒板 */
.blackboard {
 position: relative;
 margin: 0 auto 1.5rem;
 padding: 1.6rem 1rem;
 font-size: 1.2rem;
 color: #fff;
 border: 2px solid #000;
 border-radius: 5px;
 box-shadow: 0 0 0 4px #fff inset;
 background-color: rgba(0,0,0,0.9);
}
.blackboard.answer p {
 margin-left: 1.7rem;
}
.blackboard .blink-before {
 font-size: 1.2rem;
}
.blackboard a {
 text-decoration: none;
 color: #fff;
}
.blackboard .blink-before::before {
 content: '▶';
 position: absolute;
 left: 1rem;
 animation: blink 1.4s infinite;
}
.blackboard p:last-of-type {
 margin-bottom: 0;
}
/* 回り込み */
.float-r {
 float: right;
}
/* 回り込み解除 */
.clearfix {
 zoom: 1;
}
.clearfix:after {
 clear: both;
 content: "";
 display: block;
}
/* 点滅 */
@keyframes blink {
 50% { opacity: 0; }
}
@-webkit-keyframes blink {
 50% { opacity: 0; }
}

※clearfixの記述がすでにテーマにある場合は削除してください。

デザインや点滅速度は適宜変更していただければと思います。contentの部分はFontAwesomeで代用してもいいかもしれませんね。

拡張は無限大！

今回のカスタマイズ比較的シンプルなので、拡張はしやすいです。

• 点滅させずに、オンマウスで右矢印を表示させる（PCページ）
• 質問のテキストを一文字ずつアニメーションで遅らせて表示させる
• フォントをドットにする

など。ドットのフォントがあるかどうか調べてないですが、多分あると思います。

WordPressならテンプレートとして使うのがおすすめ

もし、このコードを多用する場合は、テンプレ化して使うと便利です。

他のCMS・ブログサービスにもそういったツールがあるかもしれませんが、WordPressなら下記の3つの方法があります。

1. AddQuicktag
2. ショートコード
3. TinyMCE Templates

この中では、プラグインやテーマに依存せずに簡単に使える「TinyMCE Templates」がおすすめですね。

先ほどご紹介したHTMLをテンプレートとして登録すればボタン1つで簡単に呼び出せます。

以前、会話風のテキストをテンプレ化する記事で使い方をご紹介しているので、ご参考までに。

サンプル

ドラクエ風のセリフでいくつかサンプルを作ってみました。

飽きるほど見る

興味ありません