コピペで簡単！WordPressでドラクエ風のウィンドウを作成する方法

ドラクエにはまったことがある人は、ブログを作成している時にドラクエっぽいセリフや文章を作りたいと思ったことはありませんか？

私はドラクエにどっぷりはまっていたので、どうにか文章をドラクエのメッセージウィンドウ風に装飾できないか検討しました。

その結果、CSSとHTMLでドラクエ風ウィンドウ作ることができましたので、今回はそのコードを紹介します。

WordPressでドラクエ風ウィンドウを作成する方法

CSS、HTMLのコピペ：シンプルなウィンドウ

まず、以下のCSSコードをブログのスタイルシートに張り付けます。

	.box_DQ_in {
	padding: 15px;
	border: ridge 4px #fff;
	border-radius: 10px;
	background-color: #000000;
	margin-top: 30px;
	margin-bottom: 30px;
	color: #fff;
	margin: 0;
	}
	.box_DQ_out {
	padding: 2px;
	display: inline-block;
	background-color: #000000;
	border-radius: 12px;
	margin: 30px 0 30px 0;
	}

view raw DQ_window.css hosted with by GitHub

そして、以下のHTMLのコードをコピーして、ウィンドウを表示させたい場所に張り付け、「ここに文章を入れてください」の部分を任意に変更します。

	<div class="box_DQ_out">
	<div class="box_DQ_in">
	ここに文章を入れてください
	</div>
	</div>

view raw DQ_window.html hosted with by GitHub

操作はこれだけです。

うまくいきましたか？

CSS、HTMLのコピペ：「はい、いいえ」の選択式

こちらの方法は、「はい、いいえ」の選択式で、以下のサイトで紹介されています。

ドラクエ風のセリフや文章を再現するHTMLとCSS【コピペ可】 | Fantastech（ファンタステック）

最近、また変なことがしたくなって構想を練っていたんですが、夏の暑さで頭がおかしくなったのか、こんなアイディアを思いつきました。 ＊「ドラクエって知ってますか？」 はい いいえ はい、ドラクエっぽいセリフです。1周どころか2周3周した感じですが、なぜかあまりこういったデザインを見かけないので、きっと最高の思いつきだった...

fantastech.net

上記は画像で貼っていますが、「はい」の左側の「」は点滅します。

使いどころは限られますが、よりドラクエ感は増すのではないでしょうか。

おわりに