--- title: "MolDrawをサイトに埋め込む | 無料の分子エディターiframe" url: https://www.moldraw.com/ja/blog/embed-moldraw.html description: "MolDrawエディターをあなたのサイトに埋め込みましょう。iframeを1つコピーして、ブログ、講座、ドキュメント、アプリに貼り付け、フレームの高さを設定するだけ。ライブプレビュー付き。" lang: ja publisher: Scidart Academy generated: 2026-10-26 --- ## このページの内容 対象となる人 コピーと貼り付け プレビュー フレームのサイズ MolDrawで開く FAQ # MolDrawエディターをサイトに埋め込む 公開：2026年9月18日 · 著者：Scidart Academy 化学ブログ、授業、実験ページ、ドキュメント記事、アプリに、動く分子エディターを追加しましょう。iframeを1つコピーし、描画を表示したい場所に貼り付けて、キャンバスがレイアウトに収まるよう高さを設定します。 ![カフェインの構造式を表示したMolDrawエディターをiframeで埋め込んだウェブページのイラスト](https://www.moldraw.com/blog/thumbs/embed-moldraw-editor.webp) iframeを1つ置くだけで、どんなブログ記事、授業、ドキュメントにもMolDrawエディターを入れられます。 **要点：**「埋め込みコードをコピー」をクリックし、スニペットをHTMLに貼り付け、まず高さ640ピクセルから始めます。読者はその場で描画できます。Open in MolDrawを押すと、新しいタブでフル機能のエディターが開きます。 ## 対象となる人 読者に図を見せるだけでなく、説明の横で構造式を実際に試してもらいたいときに埋め込みを使いましょう。 - **化学ブロガー** — 反応や構造式の記事の下に、実際に使えるキャンバスを。 - **教育者とLMSの作成者** — 授業、実験マニュアル、演習問題に描画ボックスを。 - **ドキュメントの執筆者** — ファイル形式、SMILES、ワークフローの説明の横にエディターを。 - **アプリ開発者** — 独自のインターフェースを持つページの中に、すぐ使えるエディターのフレームを。 エディターをホストする必要はありません。フレームは[https://www.moldraw.com/embed](https://www.moldraw.com/embed)から読み込まれます。あなたのページはあなたのものです。 ## コピーと貼り付け 「埋め込みコードをコピー」でこのスニペットがクリップボードにコピーされます。ページのHTML、LMSのHTMLブロック、アプリのマークアップに貼り付けてください。 ``` ``` フレームが空白の場合、サイトや授業ツールが埋め込みをブロックしている可能性があります。iframeを許可するHTMLブロックや埋め込みブロックを使ってください。それでもプラットフォームがフレームを削除する場合は、代わりに[www.moldraw.com](https://www.moldraw.com/ja/)へのリンクを貼りましょう。 ## プレビュー これはスニペットが読み込むのと同じプレイヤーです。結合を描くか、テンプレートを選んでみてください。上部のバーも埋め込みの一部です。 ## フレームのサイズ 幅は100%なので、エディターは配置した列いっぱいに広がります。高さは640ピクセルで、ツールバーと小さな構造式が収まります。キャンバスを大きくしたいときは`height`の数値を上げてください。短いページでは480程度に下げ、読者にもっと広いスペースが必要なときは800程度にします。 スマートフォンでは、フレームが高いほどスクロールが増えます。用途に合わせて高さを決めましょう：ちょっとしたスケッチなら低めで十分ですが、[反応スキーム](https://www.moldraw.com/ja/tools/free-chem-tools/chemical-reaction-drawer.html)にはもっと広いスペースが必要です。 ## MolDrawで開く プレイヤー内の**Open in MolDraw**を押すと、新しいタブで[www.moldraw.com](https://www.moldraw.com/ja/)のフル機能エディターが開きます。あなたのページは開いたままです。読者には「ここでスケッチし、全画面で使いたいときはOpen in MolDrawを使ってください」と一度伝えておきましょう。 ## FAQ ### 誰のための機能ですか？ 自分の文章の横に分子エディターを置きたい化学ブロガー、教育者、LMSの作成者、ドキュメントの執筆者、アプリ開発者向けです。ロゴやスクリーンショットだけが必要な場合には向きません。その場合はMolDrawへのリンクか画像を使いましょう。 ### 読者はアカウントが必要ですか？ いいえ。あなたのサイトで登録しなくても、フレーム内で描画できます。フル機能のエディターを使いたいときはOpen in MolDrawがあります。 ### 貼り付けた後でサイズを変えられますか？ はい。スニペットの`height`を編集します。レイアウト上で固定幅が必要でない限り、`width="100%"`はそのままにしてください。このページのプレビューは、広い画面では高さ640ピクセルで、スマートフォンではそれより低くなります。 ### フレームが空白です。どうすればいいですか？ フレームが空白になるのは、たいていホスト側がiframeをブロックしているためです。プラットフォームのHTMLブロックや埋め込みブロックに切り替えてください。それでもうまくいかない場合は、通常のリンクで読者を[www.moldraw.com](https://www.moldraw.com/ja/)に案内しましょう。 最終更新：2026年10月14日 ## 関連ツールとガイド [NMRスペクトルビューア](https://www.moldraw.com/ja/tools/nmr-viewer/)、[IRスペクトルビューア](https://www.moldraw.com/ja/tools/ir-viewer/)、[マススペクトルビューア](https://www.moldraw.com/ja/tools/mass-spec-viewer/)もお試しください。無料で、ブラウザで動作します。 [**NMRスペクトルビューア**1H・13C NMRファイルを開く](https://www.moldraw.com/ja/tools/nmr-viewer/)[**IRスペクトルビューア**ピークと官能基を見つける](https://www.moldraw.com/ja/tools/ir-viewer/)[**マススペクトルビューア**同位体、付加イオン、脱離](https://www.moldraw.com/ja/tools/mass-spec-viewer/)[**UV-Visスペクトルビューア**λmax、ランベルト・ベールの法則、バンドギャップ](https://www.moldraw.com/ja/tools/uv-vis-viewer/)[**分光法ガイド**スペクトルの読み方ガイド一覧](https://www.moldraw.com/guides/)[**すべての化学ツール**変換ツール、計算ツール、ビューア](https://www.moldraw.com/ja/tools/)[**MolDrawエディター**ブラウザで構造式を描く](https://www.moldraw.com/ja/)[**MolDrawを学ぶ**短い実践レッスン](https://www.moldraw.com/learn/)