コピペで簡単！WordPressでドラクエ風メッセージウィンドウを作成する方法【2026年版】

おお、旅の冒険者よ！　よく来てくれた！
なんと！　ドラクエ風のメッセージウィンドウの作り方を見たいと申すか？

ドラクエにハマったことがある人なら、ブログでドラクエっぽいセリフや文章を表示してみたいと思ったことはありませんか？

この記事では、CSSとHTMLをコピペするだけで再現できるドラクエ風ウィンドウのコードを紹介します。WordPressはもちろん、HTMLが使えるブログサービスなら利用可能です。2026年のブロックエディタ（Gutenberg）での使い方も解説します。

Toggle

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

シンプルなメッセージウィンドウ

まず、以下のCSSコードをテーマのスタイルシート（外観→カスタマイズ→追加CSS）に貼り付けます。

.dq-window {
  background: #000033;
  border: 4px solid #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 0 4px #000033, 0 0 0 8px #ffffff;
  color: #ffffff;
  font-family: 'MS Gothic', 'Hiragino Kaku Gothic ProN', monospace;
  font-size: 16px;
  line-height: 1.8;
  padding: 20px 25px;
  margin: 20px 0;
  display: inline-block;
}

次に、記事内のウィンドウを表示させたい場所に以下のHTMLを挿入します。ブロックエディタの場合は「カスタムHTML」ブロックを使ってください。

<div class="dq-window">
  ここに文章を入れてください
</div>

これだけで、ドラクエ風のメッセージウィンドウが表示されます。

へんじがない。
ただのしかばねのようだ

ウィンドウは文章の長さに合わせてサイズが変わります。画面いっぱいに広げたい場合は、CSSのdisplay: inline-block;を削除してください。

「はい・いいえ」選択式ウィンドウ

よりドラクエらしい選択肢付きウィンドウも作れます。以下のCSSを追加してください。

.dq-window-select {
  background: #000033;
  border: 4px solid #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 0 4px #000033, 0 0 0 8px #ffffff;
  color: #ffffff;
  font-family: 'MS Gothic', 'Hiragino Kaku Gothic ProN', monospace;
  font-size: 16px;
  line-height: 1.8;
  padding: 20px 25px;
  margin: 20px 0;
  position: relative;
  display: inline-block;
}
.dq-select-box {
  position: absolute;
  top: -10px;
  right: -60px;
  background: #000033;
  border: 4px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 0 4px #000033, 0 0 0 8px #ffffff;
  padding: 10px 15px;
  font-size: 14px;
}
.dq-select-box .dq-arrow {
  margin-right: 5px;
}

HTMLは以下のように記述します。

<div class="dq-window-select">
  ＊「冒険の書に記録しますか？」
  <div class="dq-select-box">
    <span class="dq-arrow">▶</span>はい<br>
    　いいえ
  </div>
</div>

ブロックエディタ（Gutenberg）での使い方

2026年現在のWordPressでは、ブロックエディタが標準です。ドラクエ風ウィンドウを使う手順を整理しておきます。

記事編集画面で「＋」ボタンをクリック
「カスタムHTML」ブロックを検索して追加
上記のHTMLコードを貼り付け
「プレビュー」ボタンで表示を確認

CSSは「外観→カスタマイズ→追加CSS」に一度貼り付ければ、サイト全体で利用可能になります。

カスタマイズのヒント

基本のコードをベースに、自分好みにカスタマイズしてみましょう。

背景色を変更：backgroundの値を変更すれば、FF風（青系）やポケモン風（白系）にもアレンジ可能
フォントを変更：Google Fontsの「DotGothic16」を使えば、よりレトロゲーム感のあるドット文字に
アニメーション追加：CSSアニメーションで文字を一文字ずつ表示させれば、本格的なRPG風演出も可能
AIで文章を生成：ChatGPTに「ドラクエの村人風のセリフでブログの自己紹介を書いて」と頼めば、雰囲気のある文章が簡単に作れる

まとめ

CSSとHTMLをコピペするだけで、ブログにドラクエ風のメッセージウィンドウを追加できます。ブログの個性を出したい方や、読者を楽しませたい方はぜひ試してみてください。ブロックエディタでも「カスタムHTML」ブロックで簡単に利用可能です。