ドラクエ風のセリフや文章を再現する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つで簡単に呼び出せます。

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

*「TinyMCE Templatesの使い方を見ますか?」

いいえ

サンプル

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

内部リンク

*「無料会員のままAmazonで激安で買い物をする方法を知りたいですか?」

いいえ

外部リンク

*「DMMの動画を飽きるほど見たいですか?」

興味ありません

選択肢が多いパターン

シェフ「最後までお読みいただき、ありがとうございます。今回の記事はいかがでしたか?」

最高

マジで最高

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!