HTMLメールテンプレートジェネレーター

開発者文章

入力

自動処理

件名

メールタグおよびプレビュー表示のために使用されます。 </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailPreheader">プレヘッダー</label> <div class="input-group"> <input type="text" name="ioEmailPreheader" id="ioEmailPreheader" class="form-control" placeholder="すぐに始められるガイドと次にやるべきこと。" aria-label="すぐに始められるガイドと次にやるべきこと。" value="Here is everything you need to get started." > </div> <small class="form-text form__help-text text-muted"> ほとんどのメールボックスで件名の後に表示される短い要約。 </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailFont">フォントファミリー</label> <div class="input-group"> <select class="custom-select" id="ioEmailFont" name="ioEmailFont"> <option value="system" selected>システム / ソースフォント</option> <option value="helvetica" >ヘルベティカ / アイリル</option> <option value="georgia" >ジオルガ / シルエットフォント</option> <option value="courier" >コアイア / モノスペースフォント</option> </select> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailBrandColor">ブランドカラー</label> <div class="input-group"> <input type="color" name="ioEmailBrandColor" id="ioEmailBrandColor" class="form-control" data-coloris value="#464aff" > </div> <small class="form-text form__help-text text-muted"> ボタンや強調部分に使用。 </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailBgColor">背景色</label> <div class="input-group"> <input type="color" name="ioEmailBgColor" id="ioEmailBgColor" class="form-control" data-coloris value="#f4f4f7" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailTextColor">テキストカラー</label> <div class="input-group"> <input type="color" name="ioEmailTextColor" id="ioEmailTextColor" class="form-control" data-coloris value="#333333" > </div> </div> <p class="h5 blue mb-3">ヘッダーブロック</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailHeaderEnabled" name="ioEmailHeaderEnabled" checked > <label class="custom-control-label" for="ioEmailHeaderEnabled">ヘッダーブロックを含める</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeaderLogo">ロゴテキスト</label> <div class="input-group"> <input type="text" name="ioEmailHeaderLogo" id="ioEmailHeaderLogo" class="form-control" placeholder="あなたのブランドまたは製品名" aria-label="あなたのブランドまたは製品名" value="Acme" data-rules="[{"name":"ioEmailHeaderEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeaderTagline">キャッチコピー</label> <div class="input-group"> <input type="text" name="ioEmailHeaderTagline" id="ioEmailHeaderTagline" class="form-control" placeholder="オプションの短いキャッチコピー" aria-label="オプションの短いキャッチコピー" value="Build things that matter" data-rules="[{"name":"ioEmailHeaderEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">ヒーローブロック</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailHeroEnabled" name="ioEmailHeroEnabled" checked > <label class="custom-control-label" for="ioEmailHeroEnabled">ヒーローブロックを含める</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeroTitle">ヒーロータイトル</label> <div class="input-group"> <input type="text" name="ioEmailHeroTitle" id="ioEmailHeroTitle" class="form-control" value="Welcome aboard, friend!" data-rules="[{"name":"ioEmailHeroEnabled","value":["on"]}]" > </div> </div> <div class="form-group"> <label for="ioEmailHeroSubtitle">ヒーローサブタイトル</label> <div class="input-group"> <textarea class="form-control" name="ioEmailHeroSubtitle" id="ioEmailHeroSubtitle" rows="2" data-rules="[{"name":"ioEmailHeroEnabled","value":["on"]}]" >Thanks for signing up. Your account is ready and we have a few things to help you get the most out of it.</textarea> </div> </div> <p class="h5 blue mb-3">画像ブロック</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailImageEnabled" name="ioEmailImageEnabled" > <label class="custom-control-label" for="ioEmailImageEnabled">画像ブロックを含める</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailImageUrl">画像URL</label> <div class="input-group"> <input type="url" name="ioEmailImageUrl" id="ioEmailImageUrl" class="form-control" placeholder="https://example.com/hero.png" aria-label="https://example.com/hero.png" value="https://placehold.co/560x280/png?text=Hero+Image" data-rules="[{"name":"ioEmailImageEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailImageAlt">画像の代替テキスト</label> <div class="input-group"> <input type="text" name="ioEmailImageAlt" id="ioEmailImageAlt" class="form-control" value="Product screenshot" data-rules="[{"name":"ioEmailImageEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">本文テキストブロック</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailBodyEnabled" name="ioEmailBodyEnabled" checked > <label class="custom-control-label" for="ioEmailBodyEnabled">本文テキストブロックを含める</label> </div> </div> <div class="form-group"> <label for="ioEmailBodyText">本文テキスト</label> <div class="input-group"> <textarea class="form-control" name="ioEmailBodyText" id="ioEmailBodyText" rows="4" data-rules="[{"name":"ioEmailBodyEnabled","value":["on"]}]" >Click the button below to finish setting up your account. It only takes a couple of minutes and you will be up and running in no time. If you have any questions, reply to this email and someone on our team will get back to you.</textarea> </div> <small class="form-text form__help-text text-muted"> それぞれの空白行は新しい段落を開始します。 </small> </div> <p class="h5 blue mb-3">ボタンブロック</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailButtonEnabled" name="ioEmailButtonEnabled" checked > <label class="custom-control-label" for="ioEmailButtonEnabled">コール・ト・アクションボタンを含める</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailButtonLabel">ボタンラベル</label> <div class="input-group"> <input type="text" name="ioEmailButtonLabel" id="ioEmailButtonLabel" class="form-control" value="Get Started" data-rules="[{"name":"ioEmailButtonEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailButtonUrl">ボタンURL</label> <div class="input-group"> <input type="url" name="ioEmailButtonUrl" id="ioEmailButtonUrl" class="form-control" value="https://example.com/getting-started" data-rules="[{"name":"ioEmailButtonEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">ディバイダーとフッター</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailDividerEnabled" name="ioEmailDividerEnabled" checked > <label class="custom-control-label" for="ioEmailDividerEnabled">本文とフッターの間のディバイダーを含める</label> </div> </div> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailFooterEnabled" name="ioEmailFooterEnabled" checked > <label class="custom-control-label" for="ioEmailFooterEnabled">フッターブロックを含める</label> </div> </div> <div class="form-group"> <label for="ioEmailFooterText">フッターテキスト</label> <div class="input-group"> <textarea class="form-control" name="ioEmailFooterText" id="ioEmailFooterText" rows="2" data-rules="[{"name":"ioEmailFooterEnabled","value":["on"]}]" >You are receiving this email because you signed up at example.com.</textarea> </div> </div> <div class="form-group"> <label for="ioEmailFooterAddress">フッター住所</label> <div class="input-group"> <textarea class="form-control" name="ioEmailFooterAddress" id="ioEmailFooterAddress" rows="2" data-rules="[{"name":"ioEmailFooterEnabled","value":["on"]}]" >Acme Inc. - 123 Market Street, Suite 100, San Francisco, CA 94105</textarea> </div> </div> <input type="hidden" name="trp-form-language" value="ja"/></form> </div> <div class="card-footer"> <form action="#" id="html-email-template-generator-in_footer" autocomplete="off" onsubmit="return false;" class="html-email-template-generator d-flex flex--rtl gap-2" data-trp-original-action="#"> <button class="btn btn-default" data-toggle="tooltip" title="入力をクリアしてすべてのオプションをリセットします" data-name="ioClearInputs" onclick="IOTools.resetForm('form.form-in'); return false;" > <span class="btn__icons"> <i class="ti ti-refresh" data-no-translation=""></i> </span> リセット </button> <input type="hidden" name="trp-form-language" value="ja"/></form> </div> </div> </div> <div class="col-md-6" data-cols="6"> <div class="card sticky-top"> <div class="card-header"> <div class="h3 card-title font-weight-bold">出力</div> <div class="card-tools"> <span data-toggle="tooltip" data-placement="left" title="このツールは、お使いのデバイスまたはブラウザで直接動作します。入力したデータはインターネット経由で送信されず、サーバー上に保存されることもありませんのでご安心ください。" class="badge badge-pill badge-success"><i class="ti ti-device-desktop" data-no-translation=""></i> クライアント側</span> <div class="dropdown d-inline-block ml-1"> <a href="#" role="button" data-toggle="dropdown" aria-expanded="false" aria-label="ツール設定"> <i class="ti ti-settings" data-no-translation=""><i class="ti ti-chevron-down small" data-no-translation=""></i></i> </a> <div class="dropdown-menu"><a href="#" class="dropdown-item" onclick="IOTools.toggleFullwidth();return false;"><i class="ti ti-arrow-autofit-width" data-no-translation=""></i> <span>幅を切り替える</span></a><a href="#" class="dropdown-item" data-card-widget="maximize"><i class="ti ti-maximize" data-no-translation=""></i> <span>全画面表示の開始/終了</span></a></div> </div> </div> </div> <div class="card-body"> <form action="#" id="html-email-template-generator-out" autocomplete="off" onsubmit="return false;" class="html-email-template-generator form-out" data-trp-original-action="#"> <div class="form-group" id="ioEmailPreview" data-name="ioEmailPreview"> <div class="email-preview-empty">左側のブロックを設定することで、ここにライブプレビューを表示できます。</div> </div> <div class="form-group"> <label for="ioEmailHtml">インラインCSSメールHTML</label> <div class="input-group"> <pre class="form-control" ><code data-name="ioEmailHtml" id="ioEmailHtml" class="language-html" data-no-translation="" ></code></pre> <div class="input-group-append"> <button class="btn btn-primary" type="button" onclick="IOTools.copyCode('#ioEmailHtml'); return false;" data-toggle="tooltip" title="HTMLをコピー" aria-label="HTMLをコピー" > <i class="ti ti-copy" data-no-translation=""></i> </button> <button class="btn btn-primary" type="button" onclick="IOTools.downloadEmailHtml(); return false;" data-toggle="tooltip" title=".htmlをダウンロード" aria-label=".htmlをダウンロード" > <i class="ti ti-download" data-no-translation=""></i> </button> </div> </div> <small class="form-text form__help-text text-muted"> メールクライアント向けのプロダクション用HTMLで、MSO条件分岐とインラインスタイルを含みます。 </small> </div> <input type="hidden" name="trp-form-language" value="ja"/></form> </div> </div> </div> </div> <script defer> setTimeout(() => { const highlight = () => document.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el)); document.readyState === 'complete' ? highlight() : document.addEventListener('DOMContentLoaded', highlight); }, 1000); </script> <div class="aw aw-below_tool text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">広告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/ja/pricing/" title="広告なしで" style="text-decoration: underline;color: #9f9f9f;">削除する？</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741343828950-4_123456"] { min-width: 300px; min-height: 50px; } } @media only screen and (min-width: 900px) and (min-height: 0px) { div[id^="bsa-zone_1741343828950-4_123456"] { min-width: 468px; min-height: 90px; } } </style> <div id="bsa-zone_1741343828950-4_123456"></div> </div> <div class="card card--related card--has-list"> <div class="card-header card-header--heading"> <h2 class="card-title" data-card-widget="collapse"><i class="ti ti-circles-relation" data-no-translation=""></i> 関連ツール</h2> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="見出しを切り替える" title="トグル"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pb-md-3 pt-0"> <p>類似のツール <b>HTMLメールテンプレートジェネレーター</b> 役に立つかもしれません。</p> <div class="row"> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/css-nesting-converter/" class="card-image card-image--icon" aria-label="CSS Nesting Converter"> <i class="ti blue" style="--icon-hex:'\ebcc'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/ja/tool/css-nesting-converter/"> <h3 class="h5 mb-0 black">CSS Nesting Converter<span class="io-badge io-badge--new" style="background-color: #f59e0b30;color:#f59e0b" data-toggle="tooltip" title="新しい" data-content="New"></span></h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>開発者</span><span data-tag-slug="text" class="badge badge-pill mr-2 tag-ico tag-ico--green"><i class="ti ti-tag" data-no-translation=""></i>文章</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="ブックマーク"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="337280" data-siteid></span> <button class="io-favorite-button" aria-label="ブックマーク" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/api-secret-scanner-redactor/" class="card-image card-image--icon" aria-label="API Secret Scanner & Redactor"> <i class="ti blue" style="--icon-hex:'\ed58'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/ja/tool/api-secret-scanner-redactor/"> <h3 class="h5 mb-0 black">API Secret Scanner & Redactor</h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>開発者</span><span data-tag-slug="security" class="badge badge-pill mr-2 tag-ico tag-ico--yellow"><i class="ti ti-tag" data-no-translation=""></i>安全</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="ブックマーク"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="334040" data-siteid></span> <button class="io-favorite-button" aria-label="ブックマーク" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/xml-to-yaml-converter/" class="card-image card-image--icon" aria-label="XML to YAML Converter"> <i class="ti blue" style="--icon-hex:'\f1f4'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/ja/tool/xml-to-yaml-converter/"> <h3 class="h5 mb-0 black">XML to YAML Converter</h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="data" class="badge badge-pill mr-2 tag-ico tag-ico--gray"><i class="ti ti-tag" data-no-translation=""></i>データ</span><span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>開発者</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="ブックマーク"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="333132" data-siteid></span> <button class="io-favorite-button" aria-label="ブックマーク" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> </div> </div> </div> <div class="card generic-content" id="tool-doc"> <div class="card-header card-header--heading"> <h2 class="card-title" data-card-widget="collapse"><i class="ti ti-book" data-no-translation=""></i> ガイド</h2> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="見出しを切り替える" title="トグル"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pt-0"> <div class="toc-wrapper position-relative" style="overflow: hidden;border-radius: 10px"> <div class="position-absolute toc-image"> <img decoding="async" class="exclude--lazy-load" src="https://iotools.cloud/wp-content/uploads/2026/06/html-email-template-generator-featured-400x512.jpg" alt="HTMLメールテンプレートジェネレータ" title="HTMLメールテンプレートジェネレータ1"> </div> <div class="toc-content position-relative" style="z-index: 1"> </div> </div> <h3 class="wp-block-heading">HTMLメールテンプレートジェネレーター</h3> <p>レスポンシブでインラインCSSを使用したメールHTMLを、ヘッダー、ヒーロー、画像、本文、ボタン、ディバイダー、フッターなどのモジュールブロックを組み合わせて構成できます。リアルタイムでデスクトップとモバイルのプレビューを確認できます。出力はテーブルベースのレイアウトとMSO条件分離を使用しており、Outlook、Gmail、Apple Mailなどのメールクライアントで一貫して表示されます。</p> <h3 class="wp-block-heading">使用方法</h3> <ul class="wp-block-list"> <li>件名、プレヘッダー、フォントファミリー、ブランド、背景色およびテキスト色をフォームの上部で設定できます。</li> <li>使用するブロックを切り替え、各ブロックのコンテンツを入力します。ロゴとキャッチコピー、ヒーローのタイトルとサブタイトル、画像URL、本文パラグラフ、呼びかけボタン、ディバイダー、フッターです。</li> <li>右側のリアルタイムプレビューが更新されるのを確認してください。デスクトップとモバイルの幅を切り替えて、両方のレイアウトを確認できます。</li> <li>クリック <strong>HTMLをコピー</strong> インラインCSS HTMLを取得するか、 <strong>.htmlをダウンロード</strong> ESP、トランザクション送信者、キャンペーンツールに貼り付ける準備ができたファイルとして保存できます。</li> </ul> <h3 class="wp-block-heading">機能</h3> <ul class="wp-block-list"> <li><strong>モジュールブロック</strong> – ヘッダー、ヒーロー、画像、本文、ボタン、ディバイダー、フッターを個別にオン・オフ切り替えできます。</li> <li><strong>インラインCSS出力</strong> – すべてのスタイルがインラインでテーブルベースになっており、外部スタイルシートが不要で、OutlookやGmailでの破損表示もありません。</li> <li><strong>MSO条件分離</strong> – Windows Outlookでの幅とスペースを正確に維持するために、Outlook専用のマーカーが含まれています。</li> <li><strong>ライブプレビュー</strong> – デスクトップ（600px）およびモバイル（360px）のプレビューは、サンドボックスされたiframeでレンダリングされます。</li> <li><strong>ブランドカスタマイズ</strong> – ブランドアクセント、背景、テキストの色選択器と4つのフォントスタックプレセットが用意されています。</li> <li><strong>ワンクリックでエクスポート</strong> – HTMLをクリップボードにコピーするか、すぐに送信できる準備ができたものをダウンロードできます <code data-no-translation="">.html</code> ファイル。</li> <li><strong>ブラウザで実行</strong> – 何らかのデータがアップロードまたは保存されません。生成はすべてクライアントサイドで行われます。</li> </ul> </p> </div> </div> <div class="card generic-content" id="tool-faq"> <div class="card-header card-header--heading"> <h3 class="card-title" data-card-widget="collapse"><i class="ti" data-no-translation=""></i> よくある質問</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="見出しを切り替える" title="トグル"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pt-0"> <div id="rank-math-faq" class="rank-math-block"> <ol class="rank-math-list"> <li id="faq-question-1780668428000" class="rank-math-list-item"> <h4 class="rank-math-question">HTMLメールは、現代のflexboxまたはグリッドレイアウトを使用する代わりに、テーブルを使用する理由は何ですか？</h4> <div class="rank-math-answer"> <p>多くのメールクライアント、特にWindows用のMicrosoft Outlookは、メッセージをWordエンジンでレンダリングしており、CSSのサポートが非常に限定的で、flexbox、グリッド、および多くの配置ルールを無視します。ネストされたHTMLテーブルが、Gmail、Outlook、Apple Mail、Yahoo、モバイルウェブメールなど、すべてのクライアントで予測可能なレイアウトを維持する唯一のレイアウトシステムです。そのため、生産用のメールHTMLは2003年のウェブマーケティングに似ており、すべてのレンダリングエンジンを通過するための最低共通分母です。</p> </div> </li> <li id="faq-question-1780668428001" class="rank-math-list-item"> <h4 class="rank-math-question">MSO条件分離とは何ですか？メールにそれが必要な理由は何ですか？</h4> <div class="rank-math-answer"> <p>MSO条件分離は、Microsoft Outlook（Wordエンジン）のみがパースするHTMLコメントです。それらは <code data-no-translation=""></code> のように見え、Outlookにのみ対応したマーカーまたはスタイルを送信できるようにし、他のクライアントに影響を与えません。よく使われるのは、固定幅のコンテナを設定するための仮想テーブル、ボタンや背景のVMLを修正し、Outlookが誤ってレンダリングする機能を無効にするなどです。それらがないと、Outlookではレイアウトが崩れたり、伸びたりして、他の場所では完璧に見える場合があります。</p> </div> </li> <li id="faq-question-1780668428002" class="rank-math-list-item"> <h4 class="rank-math-question">メールCSSはスタイルタグに宣言するのではなく、インラインにする必要があるのはなぜですか？</h4> <div class="rank-math-answer"> <p>いくつかの主要なメールクライアント、特に歴史的にGmailは、 <code data-no-translation=""><style></code> ブロックを削除したり、不正確に適用したりすることがあります。特にモバイルや転送メッセージでは問題が生じます。インラインは、各ルールをターゲット要素に <code data-no-translation="">style</code> 属性に直接移動させることで、すべてのクライアントがそれを尊重します。その代償は、冗長性と保守の難しさであり、そのためツール（このジェネレータを含む）が、より高レベルのテンプレートからインラインスタイルを自動的に生成するように設計されています。</p> </div> </li> <li id="faq-question-1780668428003" class="rank-math-list-item"> <h4 class="rank-math-question">プレヘッダーとは何ですか？メールの開封率にどのように影響しますか？</h4> <div class="rank-math-answer"> <p>プレヘッダーは、多くのインボックスプレビューで件名の後に表示される短いテキストです。デフォルトでは、メール本文の最初の表示されるテキストから取得され、それはしばしば挨拶や標準文書であり、そのスペースを無駄にしています。HTMLの最初部に隠されたプレヘッダー要素を含めることで、正確に表示される内容を制御できます。よく書かれたプレヘッダーは、件名と補完され、主要なESPが実施するA/Bテストで高い開封率を示します。</p> </div> </li> </ol> </div> </div> </div> </div> <div class="col aw--col-300 side-content"> <a href="https://iotools.cloud/ja/pricing/" class="info-box mb-3" style="background-color: var(--io-color-blue, #464aff);letter-spacing:0;min-height:70px;padding-top:5px;"> <div class="info-box-content"> <span class="info-box-text text-sm white">広告なしで楽しみたいですか?</span> <span class="info-box-number white" style="font-weight: 500;"> <span class="white"><u>今すぐ広告なしで</u></span> </span> </div> <span class="info-box-icon white" style="width:50px"> <i class="ti" data-no-translation=""></i> </span> </a> <div class="card card-body pb-0"> <h2 class="h5 blue mb-1"> <i class="ti" data-no-translation=""></i> 拡張機能をインストールする </h2> <p class="mb-2"> お気に入りのブラウザにIOツールを追加して、すぐにアクセスし、検索を高速化します。 </p> <div class="text-center pt-1 pb-3"> <div id="io-browser-extension-d41d8cd9" class="d-none d-lg-block"> <div class="io-browser-extension-container d-flex justify-content-center"> <a href="https://chromewebstore.google.com/detail/io-tools-quick-access/ngfigjoligkblljadlbojinhoiofkdld" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Chromeに追加" style="cursor: pointer;"> に追加 <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/chrome.svg" width="18" height="18" alt="Chrome拡張機能" class="img-fluid"> </a> <a href="https://microsoftedge.microsoft.com/addons/detail/io-tools-quick-access/daapkanhnnjodjpobfmkopolagbkcccb" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="エッジに追加" style="cursor: pointer;"> に追加 <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/edge.svg" width="18" height="18" alt="エッジ拡張" class="img-fluid"> </a> <a href="https://addons.mozilla.org/en-US/firefox/addon/iotools-quick-access/" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Firefoxに追加" style="cursor: pointer;"> に追加 <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/firefox.svg" width="18" height="18" alt="Firefox 拡張機能" class="img-fluid"> </a> <a href="https://addons.opera.com/en/extensions/details/io-tools-quick-access/" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Operaに追加" style="cursor: pointer;"> に追加 <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/opera.svg" width="18" height="18" alt="Opera 拡張機能" class="img-fluid"> </a> <style> #io-browser-extension-d41d8cd9 .io-browser-extension-container { gap: 10px; margin-left: -1px; } #io-browser-extension-d41d8cd9 .io-browser-extension-btn { display: flex; padding: 3px 5px 1px 6px;; background-color: white; border: 1px solid #dee2e6; border-radius: 12px; text-decoration: none; transition: all 0.2s ease; font-size: 12px;; color: #000!important; align-items: center; justify-content: center; gap: 2px; flex-grow: 1;; } #io-browser-extension-d41d8cd9 .io-browser-extension-btn img { transform: translateY(-1px); } #io-browser-extension-d41d8cd9 .io-browser-extension-btn:hover { background-color: #f8f9fa; border-color: #ced4da; color: #333; text-decoration: none; } </style> </div> </div> </div> </div> <div class="card card-body pb-0"> <h2 class="h5 blue mb-1"> <i class="ti" data-no-translation="">恵</i><a href="https://scoreboard.iotools.cloud/" target="_blank" rel="noopener"> スコアボードが到着しました！</a> </h2> <p class="mb-2"> <a href="https://scoreboard.iotools.cloud/" target="_blank" rel="noopener">スコアボード</a> ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します！ </p> </div> <div class="aw aw-side_content_1_desktop text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">広告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/ja/pricing/" title="広告なしで" style="text-decoration: underline;color: #9f9f9f;">削除する？</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342473519-9_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342473519-9_123456"] { min-width: 200px; min-height: 250px; } } </style> <div id="bsa-zone_1741342473519-9_123456"></div> </div> <div class="card card-body pb-0"> <div class="d-flex justify-content-between align-items-center mb-3"> <h2 class="h5 blue mb-0"><i class="ti" data-no-translation=""></i> 必見ツール</h2> <a class="text-muted small blue" href="https://iotools.cloud/ja/tags/must-try/"><u>すべて表示</u></a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/imagekit/background-remover/" class="card-image card-image--icon" aria-label="背景除去"> <i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i> </a> <span class="card-image card-image--icon" data-toggle="tooltip" title="ツールセット: ImageKit" ><i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i></span> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/imagekit/background-remover/"> 背景除去 </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/ai-image-editor/" class="card-image card-image--icon" aria-label="AI画像エディタ"> <i class="ti blue" style="--icon-hex:'\fa32'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/ai-image-editor/"> AI画像エディタ<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="ツールセット" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/ai-image-generator/" class="card-image card-image--icon" aria-label="AI画像ジェネレーター"> <i class="ti blue" style="--icon-hex:'\ffb0'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/ai-image-generator/"> AI画像ジェネレーター </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/imagekit/" class="card-image card-image--icon" aria-label="イメージキット"> <i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/imagekit/"> イメージキット<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="ツールセット" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/pdf-converter/compress-pdf/" class="card-image card-image--icon" aria-label="PDF 圧縮ツール"> <i class="ti blue" style="--icon-hex:'\ed44'" data-no-translation=""></i> </a> <span class="card-image card-image--icon" data-toggle="tooltip" title="ツールセット: PDF コンバーター" ><i class="ti blue" style="--icon-hex:'\f7ac'" data-no-translation=""></i></span> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/pdf-converter/compress-pdf/"> PDF 圧縮ツール </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/image-converter/" class="card-image card-image--icon" aria-label="画像コンバーター"> <i class="ti blue" style="--icon-hex:'\fd9f'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/image-converter/"> 画像コンバーター<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="ツールセット" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/one-time-link/" class="card-image card-image--icon" aria-label="ワンタイムリンク"> <i class="ti blue" style="--icon-hex:'\f7bd'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/one-time-link/"> ワンタイムリンク </a> </div> </div> <div class="aw aw-side_content_2_desktop text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">広告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/ja/pricing/" title="広告なしで" style="text-decoration: underline;color: #9f9f9f;">削除する？</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342696932-0_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342696932-0_123456"] { min-width: 200px; min-height: 250px; } } </style> <div id="bsa-zone_1741342696932-0_123456"></div> </div> <div class="card card-body pb-0"> <div class="d-flex justify-content-between align-items-center mb-3"> <h2 class="h5 blue mb-0"> <i class="ti" data-no-translation=""></i> 新着 </h2> <a class="text-muted small blue" href="https://iotools.cloud/ja/tools/"><u>すべて表示</u></a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/certificate-transparency-log-lookup/" class="card-image card-image--icon" aria-label="Certificate Transparency Log Lookup"> <i class="ti blue" style="--icon-hex:'\ed76'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/certificate-transparency-log-lookup/"> Certificate Transparency Log Lookup </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/hsts-preload-header-generator/" class="card-image card-image--icon" aria-label="HSTS Preload Header Generator"> <i class="ti blue" style="--icon-hex:'\ed58'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/hsts-preload-header-generator/"> HSTS Preload Header Generator </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/argon2-hash-generator/" class="card-image card-image--icon" aria-label="Argon2 Hash Generator"> <i class="ti blue" style="--icon-hex:'\eac7'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/argon2-hash-generator/"> Argon2 Hash Generator </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/cidr-overlap-checker/" class="card-image card-image--icon" aria-label="CIDR Overlap / Subnet Conflict Checker"> <i class="ti blue" style="--icon-hex:'\edff'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/cidr-overlap-checker/"> CIDR Overlap / Subnet Conflict Checker </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/css-nesting-converter/" class="card-image card-image--icon" aria-label="CSS Nesting Converter"> <i class="ti blue" style="--icon-hex:'\ebcc'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/css-nesting-converter/"> CSS Nesting Converter </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/oauth-authorization-url-builder/" class="card-image card-image--icon" aria-label="OAuth 2.0 Authorization URL Builder"> <i class="ti blue" style="--icon-hex:'\eade'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/oauth-authorization-url-builder/"> OAuth 2.0 Authorization URL Builder </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/ja/tool/har-to-curl-extractor/" class="card-image card-image--icon" aria-label="HAR to cURL Commands Extractor"> <i class="ti blue" style="--icon-hex:'\ebef'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/ja/tool/har-to-curl-extractor/"> HAR to cURL Commands Extractor </a> </div> <p class="small text-muted mb-3 text-center"><b>アップデート：</b> 私たちの <a href="https://iotools.cloud/ja/tool/certificate-transparency-log-lookup/" class="text-muted"><u>最新ツール</u></a> was added on 6月 26, 2026</p> </div> <div class="aw aw-dashboard_sidebar text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">広告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/ja/pricing/" title="広告なしで" style="text-decoration: underline;color: #9f9f9f;">削除する？</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741781122639-0_123456"] { min-width: 300px; min-height: 50px; } } @media only screen and (min-width: 900px) and (min-height: 0px) { div[id^="bsa-zone_1741781122639-0_123456"] { min-width: 200px; min-height: 200px; } } </style> <div id="bsa-zone_1741781122639-0_123456"></div> </div> <div class="card card-body io-no-scrollbar" style="max-height:700px;"> <h2 class="h5 blue mb-3"><i class="ti" data-no-translation=""></i> ニュースコーナー <small class="black">技術ハイライト付き</small></h2> <div data-load-more-id="side-news" class="exclude--translation" data-no-translation=""> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> </div> <script class="exclude--lazy-load" async> // Immediately load news from session storage document.querySelectorAll('[data-load-more-id="side-news"]').forEach(function(element) { const dailyNewsHtml = sessionStorage.getItem(`dailyNewsHtml`); if (dailyNewsHtml) { element.innerHTML = dailyNewsHtml; } }); </script> <p class="text-center"> <button class="btn--load-more" data-load-more="{"target":"side-news","postType":"wprss_feed_item","offset":3}">もっと見せて！</button> </p> </div> <h2 class="h5 blue text-right mt-5"><i class="ti ti-heart-handshake" data-no-translation=""></i> 参加する</h2> <div class="text-right mb-4"> <p>価値ある無料ツールの提供を継続するためにご協力ください</p> <div class="d-lg-flex justify-content-end"> <a href="https://buymeacoffee.com/iotools" target="_blank" rel="noopener"><img width="180" height="50" src="https://iotools.cloud/wp-content/themes/iotools/assets/images/yellow-button.png" alt="コーヒーを買って" class="img-fluid"></a> </div> </div> <div class="aw aw-side_content_sticky_desktop sticky-top text-center"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">広告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/ja/pricing/" title="広告なしで" style="text-decoration: underline;color: #9f9f9f;">削除する？</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342751312-1_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342751312-1_123456"] { min-width: 120px; min-height: 600px; } } </style> <div id="bsa-zone_1741342751312-1_123456"></div> </div> </div> </div> </div> </main>  <footer class="main-footer text-sm text-center text-xl-left d-flex flex-xl-nowrap flex-column-reverse flex-xl-row"> <span>Copyright © 2026 <a href="https://iotools.cloud/ja/" class="exclude--translation" data-no-translation=""><u>iotools.cloud</u></a>。無断転載を禁じます。</span>  <ul class="navbar-nav d-flex flex-row ml-xl-auto justify-content-center flex-wrap"> <li class="nav-item"> <a href="https://iotools.cloud/ja/" class="text-muted">家</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/ja/about/" class="text-muted">について</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/ja/contact/" class="text-muted">接触</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/ja/pricing/" class="text-muted">価格</a> </li> <li class="nav-item blue mb-2 mb-xl-0"> • </li> <li class="nav-item"><a href="https://iotools.cloud/ja/community-tools/" rel="nofollow" class="text-muted">コミュニティツール</a></li> <li class="nav-item"><a href="https://iotools.cloud/ja/journal/" class="text-muted">ジャーナルハブ</a></li> <li class="nav-item blue mb-2 mb-xl-0"> • </li> <li class="nav-item"><a href="https://iotools.cloud/ja/privacy-policy/" class="text-muted">プライバシーポリシー</a></li> <li class="nav-item"><a href="https://iotools.cloud/ja/terms-of-service/" class="text-muted">利用規約</a></li> <li class="nav-item"><a href="https://iotools.statuspage.io/" target="_blank" rel="noopener" class="text-muted">システムステータス</a></li> <li class="nav-item"><a href="https://iotools.cloud/ja/sitemap/" class="text-muted">サイトマップ</a></li> <li class="nav-item blue mb-2 mb-xl-0 d-none d-lg-block"> • </li> <li class="d-block w-100 d-lg-none"></li> <li class="nav-item"><a href="https://x.com/io_tools" target="_blank" rel="noopener" class="text-muted" aria-label="バツ"><i class="ti ti-brand-x" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.facebook.com/iotools.cloud" target="_blank" rel="noopener" class="text-muted" aria-label="フェイスブック"><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.youtube.com/@io-tools" target="_blank" rel="noopener" class="text-muted" aria-label="ユーチューブ"><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.tiktok.com/@iotools" target="_blank" rel="noopener" class="text-muted" aria-label="ティックトック"><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.linkedin.com/company/io-tools/" target="_blank" rel="noopener" class="text-muted" aria-label="リンクトイン"><i class="ti ti-brand-linkedin" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.producthunt.com/products/io-tools" target="_blank" rel="noopener" class="text-muted" aria-label="製品探し"><i class="ti ti-brand-producthunt" data-no-translation=""></i></a></li> </ul> </footer> <div class="bsa-gap d-none d-xl-block" style="height: 110px;"> </div> <div class="bsa-gap d-xl-none" style="height: 60px;"> </div> <style> body:has(>.bsa_fixed-leaderboard[style*="display: none"]) .bsa-gap { display: none !important; } </style> </div> <template id="tp-language" data-tp-language="ja"></template><script type="speculationrules"> {"prerender":[{"source":"document","where":{"and":[{"href_matches":"/ja/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/iotools/*","/ja/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prerender, .no-prerender a"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"moderate"}]} </script> <style> #ioEmailHtml { font-size: 12px; line-height: 1.5; max-height: 320px; overflow: auto; } #ioEmailPreview { margin-bottom: 14px; border: 1px solid #ced4da; border-radius: 12px; background-color: #fff; overflow: hidden; min-height: 360px; } #ioEmailPreview .email-preview-empty { color: #6c757d; font-style: italic; padding: 24px 18px; text-align: center; font-family: var(--bs-font-sans-serif), sans-serif; } #ioEmailPreview .email-preview-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; font-family: var(--bs-font-sans-serif), sans-serif; font-size: 0.8rem; color: #495057; } #ioEmailPreview .email-preview-header strong { font-weight: 600; color: #212529; } #ioEmailPreview .email-preview-toolbar { margin-left: auto; display: flex; gap: 4px; } #ioEmailPreview .email-preview-btn { font-size: 0.75rem; padding: 2px 8px; border: 1px solid #adb5bd; background-color: #fff; border-radius: 4px; cursor: pointer; color: #212529; } #ioEmailPreview .email-preview-btn:hover { background-color: #f1f3f5; } #ioEmailPreview .email-preview-btn.is-active { background-color: #464aff; border-color: #464aff; color: #fff; } #ioEmailPreview iframe { display: block; width: 100%; border: 0; background-color: #fff; transition: max-width 0.15s ease; } #ioEmailPreview .email-preview-stage { background-color: #eef0f3; padding: 12px; } #ioEmailPreview .email-preview-stage iframe { margin: 0 auto; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } </style> <script type="text/javascript" src="https://iotools.cloud/wp-content/plugins/duracelltomi-google-tag-manager/dist/js/gtm4wp-form-move-tracker.js?ver=1.22.3" id="gtm4wp-form-move-tracker-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/plugins/translatepress-multilingual/assets/js/trp-clickable-ls.js?ver=2.9.12" id="trp-clickable-ls-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js"></script> <script type="text/javascript" id="theme-js-js-extra"> /* <![CDATA[ */ var IOTools = {"ajaxUrl":"https://iotools.cloud/wp-admin/admin-ajax.php","assetsUrl":"https://iotools.cloud/wp-content/themes/iotools/assets/","homeUrl":"https://iotools.cloud/ja/","isMobile":"","currentPostId":"314379","turnstileSiteKey":"0x4AAAAAABroE5_aI0mWeJ_q","algoliaAppId":"1P44EFZA6Z","algoliaApiKey":"430f43bbda2ef03c2d61fbdf33bae284","urlRequests":"/requests/","creditsCap":"10","pondUploader":null,"tagColors":{"Accessibility":"indigo","AI":"red","arithmetic":"blue","Art":"orange","Backend":"red","base conversion":"blue","Base64":"blue","Beta":"red","Binary":"blue","Calculator":"blue","Character Classes":"blue","Color":"yellow","Couple":"blue","Creator":"blue","Cryptography":"yellow","CSS":"indigo","CSV":"green","Data":"gray","decimal":"blue","Decode":"yellow","Decrypt":"red","Designer":"cyan","Developer":"orange","devops":"blue","DnD":"blue","Education":"lime","Encode":"indigo","Encoding":"blue","Encryption":"blue","evaluation":"blue","Fantasy":"lime","Fiction":"blue","Finance":"green","Frontend":"red","Fun":"violet","Gaming":"blue","Generator":"blue","Git":"blue","Graphics":"red","Health":"orange","hex":"blue","History":"green","HTML":"green","Ideas":"orange","Identity":"lime","Image":"orange","instant calculation":"blue","integer":"blue","IPv6":"blue","Javascript":"orange","JPG":"blue","JSON":"yellow","logarithm":"blue","Lookup":"gray","MAC address":"blue","Magic":"yellow","Markdown":"blue","Marketing":"orange","mask":"blue","Match":"blue","Math":"yellow","MD5":"indigo","Minecraft":"blue","Music":"blue","Must Try":"red","Mythical":"blue","Networking":"blue","number systems":"blue","obfuscate":"blue","octal":"blue","PDF":"yellow","Performance":"green","Planning":"yellow","PNG":"blue","privacy":"blue","Productivity":"green","programming":"blue","Random":"red","Scheduling":"blue","Science":"blue","Security":"yellow","SEO":"orange","Social":"indigo","Sports":"blue","Statistics":"green","string":"blue","SVG":"orange","sysadmin":"blue","Testing":"orange","Text":"green","Time":"blue","trigonometry":"blue","ULA":"blue","Utilities":"blue","Video":"indigo","Wellness":"orange","Wizard":"blue","World":"blue","XML":"orange","YAML":"blue"},"translations":{"copiedDeepLink":"\u30c7\u30a3\u30fc\u30d7\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3002","copiedText":"\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3057\u305f!","copiedImage":"\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3002","generatedContentAppearsHere":"\u7d50\u679c\u306f\u3053\u3053\u306b\u8868\u793a\u3055\u308c\u307e\u3059...","confirmOverwriteContent":"\u73fe\u5728\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u7f6e\u304d\u63db\u3048\u3089\u308c\u307e\u3059\u304b?","invalidBase64String":"\u7121\u52b9\u306abase64\u6587\u5b57\u5217","timeoutReached":"\u30cf\u30c3\u30b7\u30e5\u3092\u898b\u3064\u3051\u308b\u524d\u306b\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u306b\u9054\u3057\u307e\u3057\u305f\u3002","allCombinationsTried":"\u3059\u3079\u3066\u306e\u7d44\u307f\u5408\u308f\u305b\u3092\u8a66\u3057\u307e\u3057\u305f\u304c\u3001\u30cf\u30c3\u30b7\u30e5\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002\u8a2d\u5b9a\u3092\u8abf\u6574\u3057\u3066\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002","useThisFont":"\u3053\u306e\u30d5\u30a9\u30f3\u30c8\u3092\u4f7f\u7528\u3059\u308b","noFileTypesDetected":"\u30d5\u30a1\u30a4\u30eb\u306e\u7a2e\u985e\u304c\u691c\u51fa\u3055\u308c\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u5143\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u5358\u306a\u308b\u30c6\u30ad\u30b9\u30c8 \u30d5\u30a1\u30a4\u30eb\u307e\u305f\u306f\u6587\u5b57\u5217\u3067\u3042\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002","noResults":"\u7d50\u679c\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f","loadMore":"\u3055\u3089\u306b\u8aad\u307f\u8fbc\u3080","decodedString":"\u30c7\u30b3\u30fc\u30c9\u3055\u308c\u305f\u6587\u5b57\u5217","yes":"\u306f\u3044","no":"\u3044\u3044\u3048","team":"\u30c1\u30fc\u30e0","detectedFile":"\u691c\u51fa\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb","download":"\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9","converting":"\u5909\u63db\u4e2d...","compressing":"\u5727\u7e2e\u4e2d...","tapToRemove":"\u30bf\u30c3\u30d7\u3057\u3066\u524a\u9664","serverUploaded":"\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u307e\u3057\u305f","validationPassed":"\u691c\u8a3c\u306b\u5408\u683c","validationFailed":"\u691c\u8a3c\u306b\u5931\u6557\u3057\u307e\u3057\u305f","validationIndependently":"\u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u72ec\u7acb\u3057\u3066\u691c\u8a3c\u3055\u308c\u307e\u3059","pokemon":{"generation":"\u4e16\u4ee3","hp":"\u30db\u30fc\u30e0\u30da\u30fc\u30b8","speed":"\u30b9\u30d4\u30fc\u30c9","attack":"\u653b\u6483","defense":"\u9632\u885b","spAttack":"\u7279\u6b8a\u653b\u6483","spDefense":"\u7279\u5225\u9632\u885b"},"browserInfo":{"userAgent":"\u30e6\u30fc\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8","language":"\u8a00\u8a9e","windowSize":"\u30a6\u30a3\u30f3\u30c9\u30a6\u30b5\u30a4\u30ba","pdfViewerEnabled":"PDF \u30d3\u30e5\u30fc\u30a2\u304c\u6709\u52b9","javascriptEnabled":"Javascript\u304c\u6709\u52b9","cookiesEnabled":"\u30af\u30c3\u30ad\u30fc\u304c\u6709\u52b9","browser":"\u30d6\u30e9\u30a6\u30b6","browserMajorVersion":"\u30d6\u30e9\u30a6\u30b6\u306e\u30e1\u30b8\u30e3\u30fc\u30d0\u30fc\u30b8\u30e7\u30f3","browserVersion":"\u30d6\u30e9\u30a6\u30b6\u30d0\u30fc\u30b8\u30e7\u30f3","layoutEngine":"\u30ec\u30a4\u30a2\u30a6\u30c8\u30a8\u30f3\u30b8\u30f3","deviceMemory":"\u30c7\u30d0\u30a4\u30b9\u30e1\u30e2\u30ea","maxTouchPoints":"\u6700\u5927\u30bf\u30c3\u30c1\u30dd\u30a4\u30f3\u30c8","screenSize":"\u753b\u9762\u30b5\u30a4\u30ba","orientation":"\u30aa\u30ea\u30a8\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3","colorDepth":"\u8272\u6df1\u5ea6","pixelRatio":"\u30d4\u30af\u30bb\u30eb\u6bd4","os":"OS","osVersion":"OS\u30d0\u30fc\u30b8\u30e7\u30f3","deviceType":"\u30c7\u30d0\u30a4\u30b9\u30bf\u30a4\u30d7","deviceVendor":"\u30c7\u30d0\u30a4\u30b9\u30d9\u30f3\u30c0\u30fc","deviceModel":"\u30c7\u30d0\u30a4\u30b9\u30e2\u30c7\u30eb"},"splits":"\u30b9\u30d7\u30ea\u30c3\u30c8","noImagesSelected":"\u5c11\u306a\u304f\u3068\u3082 1 \u3064\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044\u3002","errorOccurredAI":"AI \u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002","errorOccurredExtractText":"\u30d5\u30a1\u30a4\u30eb \u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u62bd\u51fa\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002","errorOccurredPokemon":"\u6307\u5b9a\u3055\u308c\u305f\u6761\u4ef6\u306b\u5408\u3046\u30dd\u30b1\u30e2\u30f3\u306f\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002","errorCannotConvert":"\u5909\u63db\u3067\u304d\u307e\u305b\u3093","autoComplete":{"Tools":"\u30c4\u30fc\u30eb","Modules":"\u30e2\u30b8\u30e5\u30fc\u30eb","SearchForATool":"\u30c4\u30fc\u30eb\u3001\u30ab\u30c6\u30b4\u30ea\u3001\u307e\u305f\u306f\u30bf\u30b0\u3092\u691c\u7d22\u3057\u307e\u3059...","NoToolsFoundForThisQuery":"\u3053\u306e\u30af\u30a8\u30ea\u306b\u8a72\u5f53\u3059\u308b\u30c4\u30fc\u30eb\u306f\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002","SubmitARequest":"\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1","WeWillMakeIt":"\u305d\u3057\u3066\u79c1\u305f\u3061\u306f\u305d\u308c\u3092\u6210\u3057\u9042\u3052\u307e\u3059\uff01","CategoriesFilter":"\u30ab\u30c6\u30b4\u30ea\u30d5\u30a3\u30eb\u30bf\u30fc","NoCategoriesFoundForThisQuery":"\u3053\u306e\u30af\u30a8\u30ea\u306b\u8a72\u5f53\u3059\u308b\u30ab\u30c6\u30b4\u30ea\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002","TagsFilter":"\u30bf\u30b0\u30d5\u30a3\u30eb\u30bf\u30fc","NoTagsFoundForThisQuery":"\u3053\u306e\u30af\u30a8\u30ea\u306b\u30bf\u30b0\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002","ToNavigate":"\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b","ToSelect":"\u9078\u629e\u3059\u308b","ToClose":"\u9589\u3058\u308b","ToCancel":"\u30ad\u30e3\u30f3\u30bb\u30eb"}},"defaultSwatches":["#264653","#2a9d8f","#e9c46a","rgb(244,162,97)","#e76f51","#d62828","navy","#07b","#0096c7","#00b4d880","rgba(0,119,182,0.8)"]}; //# sourceURL=theme-js-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/dist/main.min.js?ver=eee286b8e098df42c396cba29264f11c" id="theme-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/dist/modules/61ea48838d56c794fb1748cfb9bebdfd.min.js?ver=fc3340d2aa99d4f53093da055aeb58b0" id="theme-js-61ea48838d56c794fb1748cfb9bebdfd-js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js?ver=eee286b8e098df42c396cba29264f11c" id="highlight-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/assets/libraries/Coloris-0.24.0/dist/coloris.min.js?ver=eee286b8e098df42c396cba29264f11c" id="coloris-js-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://iotools.cloud/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://iotools.cloud/wp-includes/js/wp-emoji-loader.min.js /* ]]> */ </script> <script type="text/javascript">(function (undefined) {let scriptOptions={"_localizedStrings":{"redirect_overlay_title":"\u6e96\u5099\u4e2d...","redirect_overlay_text":"\u5225\u306e\u30da\u30fc\u30b8\u306b\u79fb\u52d5\u3057\u3066\u3044\u307e\u3059\u3002<br>\u6570\u79d2\u304b\u304b\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002","webview_notification_text":"The selected provider doesn't support embedded browsers!"},"_targetWindow":"prefer-popup","_redirectOverlay":"overlay-with-spinner-and-message","_unsupportedWebviewBehavior":""}; /** * Used when Cross-Origin-Opener-Policy blocked the access to the opener. We can't have a reference of the opened windows, so we should attempt to refresh only the windows that has opened popups. */ window._nslHasOpenedPopup = false; window._nslWebViewNoticeElement = null; window.NSLPopup = function (url, title, w, h) { /** * Cross-Origin-Opener-Policy blocked the access to the opener */ if (typeof BroadcastChannel === "function") { const _nslLoginBroadCastChannel = new BroadcastChannel('nsl_login_broadcast_channel'); _nslLoginBroadCastChannel.onmessage = (event) => { if (window?._nslHasOpenedPopup && event.data?.action === 'redirect') { window._nslHasOpenedPopup = false; const url = event.data?.href; _nslLoginBroadCastChannel.close(); if (typeof window.nslRedirect === 'function') { window.nslRedirect(url); } else { window.opener.location = url; } } }; } const userAgent = navigator.userAgent, mobile = function () { return /\b(iPhone|iP[ao]d)/.test(userAgent) || /\b(iP[ao]d)/.test(userAgent) || /Android/i.test(userAgent) || /Mobile/i.test(userAgent); }, screenX = window.screenX !== undefined ? window.screenX : window.screenLeft, screenY = window.screenY !== undefined ? window.screenY : window.screenTop, outerWidth = window.outerWidth !== undefined ? window.outerWidth : document.documentElement.clientWidth, outerHeight = window.outerHeight !== undefined ? window.outerHeight : document.documentElement.clientHeight - 22, targetWidth = mobile() ? null : w, targetHeight = mobile() ? null : h, left = parseInt(screenX + (outerWidth - targetWidth) / 2, 10), right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10), features = []; if (targetWidth !== null) { features.push('width=' + targetWidth); } if (targetHeight !== null) { features.push('height=' + targetHeight); } features.push('left=' + left); features.push('top=' + right); features.push('scrollbars=1'); const newWindow = window.open(url, title, features.join(',')); if (window.focus) { newWindow.focus(); } window._nslHasOpenedPopup = true; return newWindow; }; let isWebView = null; function checkWebView() { if (isWebView === null) { function _detectOS(ua) { if (/Android/.test(ua)) { return "Android"; } else if (/iPhone|iPad|iPod/.test(ua)) { return "iOS"; } else if (/Windows/.test(ua)) { return "Windows"; } else if (/Mac OS X/.test(ua)) { return "Mac"; } else if (/CrOS/.test(ua)) { return "Chrome OS"; } else if (/Firefox/.test(ua)) { return "Firefox OS"; } return ""; } function _detectBrowser(ua) { let android = /Android/.test(ua); if (/Opera Mini/.test(ua) || / OPR/.test(ua) || / OPT/.test(ua)) { return "Opera"; } else if (/CriOS/.test(ua)) { return "Chrome for iOS"; } else if (/Edge/.test(ua)) { return "Edge"; } else if (android && /Silk\//.test(ua)) { return "Silk"; } else if (/Chrome/.test(ua)) { return "Chrome"; } else if (/Firefox/.test(ua)) { return "Firefox"; } else if (android) { return "AOSP"; } else if (/MSIE|Trident/.test(ua)) { return "IE"; } else if (/Safari\//.test(ua)) { return "Safari"; } else if (/AppleWebKit/.test(ua)) { return "WebKit"; } return ""; } function _detectBrowserVersion(ua, browser) { if (browser === "Opera") { return /Opera Mini/.test(ua) ? _getVersion(ua, "Opera Mini/") : / OPR/.test(ua) ? _getVersion(ua, " OPR/") : _getVersion(ua, " OPT/"); } else if (browser === "Chrome for iOS") { return _getVersion(ua, "CriOS/"); } else if (browser === "Edge") { return _getVersion(ua, "Edge/"); } else if (browser === "Chrome") { return _getVersion(ua, "Chrome/"); } else if (browser === "Firefox") { return _getVersion(ua, "Firefox/"); } else if (browser === "Silk") { return _getVersion(ua, "Silk/"); } else if (browser === "AOSP") { return _getVersion(ua, "Version/"); } else if (browser === "IE") { return /IEMobile/.test(ua) ? _getVersion(ua, "IEMobile/") : /MSIE/.test(ua) ? _getVersion(ua, "MSIE ") : _getVersion(ua, "rv:"); } else if (browser === "Safari") { return _getVersion(ua, "Version/"); } else if (browser === "WebKit") { return _getVersion(ua, "WebKit/"); } return "0.0.0"; } function _getVersion(ua, token) { try { return _normalizeSemverString(ua.split(token)[1].trim().split(/[^\w\.]/)[0]); } catch (o_O) { } return "0.0.0"; } function _normalizeSemverString(version) { const ary = version.split(/[\._]/); return (parseInt(ary[0], 10) || 0) + "." + (parseInt(ary[1], 10) || 0) + "." + (parseInt(ary[2], 10) || 0); } function _isWebView(ua, os, browser, version, options) { switch (os + browser) { case "iOSSafari": return false; case "iOSWebKit": return _isWebView_iOS(options); case "AndroidAOSP": return false; case "AndroidChrome": return parseFloat(version) >= 42 ? /; wv/.test(ua) : /\d{2}\.0\.0/.test(version) ? true : _isWebView_Android(options); } return false; } function _isWebView_iOS(options) { const document = (window["document"] || {}); if ("WEB_VIEW" in options) { return options["WEB_VIEW"]; } return !("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || false); } function _isWebView_Android(options) { if ("WEB_VIEW" in options) { return options["WEB_VIEW"]; } return !("requestFileSystem" in window || "webkitRequestFileSystem" in window || false); } const options = {}, nav = window.navigator || {}, ua = nav.userAgent || "", os = _detectOS(ua), browser = _detectBrowser(ua), browserVersion = _detectBrowserVersion(ua, browser); isWebView = _isWebView(ua, os, browser, browserVersion, options); } return isWebView; } function isAllowedWebViewForUserAgent(provider) { const facebookAllowedWebViews = [ 'Instagram', 'FBAV', 'FBAN' ]; let whitelist = []; if (provider && provider === 'facebook') { whitelist = facebookAllowedWebViews; } const nav = window.navigator || {}, ua = nav.userAgent || ""; if (whitelist.length && ua.match(new RegExp(whitelist.join('|')))) { return true; } return false; } function disableButtonInWebView(providerButtonElement) { if (providerButtonElement) { providerButtonElement.classList.add('nsl-disabled-provider'); providerButtonElement.setAttribute('href', '#'); providerButtonElement.addEventListener('pointerdown', (e) => { if (!window._nslWebViewNoticeElement) { window._nslWebViewNoticeElement = document.createElement('div'); window._nslWebViewNoticeElement.id = "nsl-notices-fallback"; window._nslWebViewNoticeElement.addEventListener('pointerdown', function (e) { this.parentNode.removeChild(this); window._nslWebViewNoticeElement = null; }); const webviewNoticeHTML = '<div class="error"><p>' + scriptOptions._localizedStrings.webview_notification_text + '</p></div>'; window._nslWebViewNoticeElement.insertAdjacentHTML("afterbegin", webviewNoticeHTML); document.body.appendChild(window._nslWebViewNoticeElement); } }); } } window._nslDOMReady(function () { window.nslRedirect = function (url) { if (scriptOptions._redirectOverlay) { const overlay = document.createElement('div'); overlay.id = "nsl-redirect-overlay"; let overlayHTML = ''; const overlayContainer = "<div id='nsl-redirect-overlay-container'>", overlayContainerClose = "</div>", overlaySpinner = "<div id='nsl-redirect-overlay-spinner'></div>", overlayTitle = "<p id='nsl-redirect-overlay-title'>" + scriptOptions._localizedStrings.redirect_overlay_title + "</p>", overlayText = "<p id='nsl-redirect-overlay-text'>" + scriptOptions._localizedStrings.redirect_overlay_text + "</p>"; switch (scriptOptions._redirectOverlay) { case "overlay-only": break; case "overlay-with-spinner": overlayHTML = overlayContainer + overlaySpinner + overlayContainerClose; break; default: overlayHTML = overlayContainer + overlaySpinner + overlayTitle + overlayText + overlayContainerClose; break; } overlay.insertAdjacentHTML("afterbegin", overlayHTML); document.body.appendChild(overlay); } window.location = url; }; let targetWindow = scriptOptions._targetWindow || 'prefer-popup', lastPopup = false; document.addEventListener('click', function (e) { if (e.target) { const buttonLinkElement = e.target.closest('a[data-plugin="nsl"][data-action="connect"]') || e.target.closest('a[data-plugin="nsl"][data-action="link"]'); if (buttonLinkElement) { if (lastPopup && !lastPopup.closed) { e.preventDefault(); lastPopup.focus(); } else { let href = buttonLinkElement.href, success = false; if (href.indexOf('?') !== -1) { href += '&'; } else { href += '?'; } const redirectTo = buttonLinkElement.dataset.redirect; if (redirectTo === 'current') { href += 'redirect=' + encodeURIComponent(window.location.href) + '&'; } else if (redirectTo && redirectTo !== '') { href += 'redirect=' + encodeURIComponent(redirectTo) + '&'; } if (targetWindow !== 'prefer-same-window' && checkWebView()) { targetWindow = 'prefer-same-window'; } if (targetWindow === 'prefer-popup') { lastPopup = NSLPopup(href + 'display=popup', 'nsl-social-connect', buttonLinkElement.dataset.popupwidth, buttonLinkElement.dataset.popupheight); if (lastPopup) { success = true; e.preventDefault(); } } else if (targetWindow === 'prefer-new-tab') { const newTab = window.open(href + 'display=popup', '_blank'); if (newTab) { if (window.focus) { newTab.focus(); } success = true; window._nslHasOpenedPopup = true; e.preventDefault(); } } if (!success) { window.location = href; e.preventDefault(); } } } } }); let buttonCountChanged = false; const googleLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="google"]'); if (googleLoginButtons.length && checkWebView()) { googleLoginButtons.forEach(function (googleLoginButton) { if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') { disableButtonInWebView(googleLoginButton); } else { googleLoginButton.remove(); buttonCountChanged = true; } }); } const facebookLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="facebook"]'); if (facebookLoginButtons.length && checkWebView() && /Android/.test(window.navigator.userAgent) && !isAllowedWebViewForUserAgent('facebook')) { facebookLoginButtons.forEach(function (facebookLoginButton) { if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') { disableButtonInWebView(facebookLoginButton); } else { facebookLoginButton.remove(); buttonCountChanged = true; } }); } const separators = document.querySelectorAll('div.nsl-separator'); if (buttonCountChanged && separators.length) { separators.forEach(function (separator) { const separatorParentNode = separator.parentNode; if (separatorParentNode) { const separatorButtonContainer = separatorParentNode.querySelector('div.nsl-container-buttons'); if (separatorButtonContainer && !separatorButtonContainer.hasChildNodes()) { separator.remove(); } } }) } });})();</script> <div id="io-modal-login" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">サインインが必要です</h5> <button type="button" class="close" data-dismiss="modal" aria-label="近い"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> お願いします <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/ja/account/"><i class="ti ti-user-circle" data-no-translation=""></i> サインイン</a> または <a rel="nofollow" href="https://iotools.cloud/ja/register/"><u>登録する</u></a> ブックマークを管理します。無料です! </div> </div> </div> </div> <div id="io-modal-request" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">サインインが必要です</h5> <button type="button" class="close" data-dismiss="modal" aria-label="近い"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> お願いします <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/ja/account/?redirect_to=https://iotools.cloud/ja/account/request-tool/"><i class="ti ti-user-circle" data-no-translation=""></i> サインイン</a> または <a rel="nofollow" href="https://iotools.cloud/ja/register/?redirect_to=https://iotools.cloud/ja/account/request-tool/"><u>登録する</u></a> ツールのリクエストを送信してください。無料です! </div> </div> </div> </div> <div id="io-modal-community" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">サインインが必要です</h5> <button type="button" class="close" data-dismiss="modal" aria-label="近い"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> お願いします <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/ja/account/?redirect_to=https://iotools.cloud/ja/account/byo/"><i class="ti ti-user-circle" data-no-translation=""></i> サインイン</a> または <a rel="nofollow" href="https://iotools.cloud/ja/register/?redirect_to=https://iotools.cloud/ja/account/byo/"><u>登録する</u></a> 独自のツールを構築できます。無料です! <div class="card mt-4 mb-0"> <div class="card-body"> <h5><i class="ti ti-info-circle" data-no-translation=""></i> Build Your Own (BYO) ビルダーについて</h5> <p>BYO ビルダー機能を使用すると、コーディングの知識がなくてもカスタムツールを作成できます。次のことが可能です。</p> <ul> <li>シンプルなインターフェースを使用してAI搭載ツールを作成する</li> <li>コミュニティとツールを共有する</li> <li>フィードバックを得てツールを改善する</li> <li>あなたの作品で他の人の問題解決を手伝ってください</li> </ul> <p class="mb-0">参加する <a href="https://iotools.cloud/ja/community-tools/"><u>コミュニティ</u></a> 今すぐ参加して、違いを生み出すツールの構築を始めましょう。</p> </div> </div> </div> </div> </div> </div> <div id="cf-turnstile" data-sitekey="0x4AAAAAABroE5_aI0mWeJ_q" data-appearance="execute"></div> </body> </html>