### [WPFormsの Заметки о выпуске](https://wpforms.com/docs/how-to-use-the-rich-text-field-in-wpforms/) **公開日:** 2023年11月17日 **著者:** Umair Majeed **抜粋:** 訪問者がリンク、色、画像を使用して投稿をフォーマットできるようにする方法を学びます。 **コンテンツ:** リッチテキストフィールドは基本機能です リッチテキストフィールドやその他の強力な機能のロックを解除して、ビジネスを成長させましょう。 [ WPForms Basic を入手 ](https://wpforms.com/pricing/) ユーザーにフォームの送信内容をカスタマイズさせたいですか？リッチテキストフィールドは、オンラインフォームを送信する前に、ユーザーがテキストや画像をフォーマットするための柔軟な方法を提供します。 このチュートリアルでは、WPFormsのリッチテキストフィールドの開始に必要なすべてを紹介します。 - [フォームにリッチテキストフィールドを追加する](#add-rich-text-field) - [高度なオプションを有効にする](#advanced-options) - [メディアアップロードを許可する](#allowing-media-uploads) - [リッチテキストフィールドの使用](#using-the-rich-text-field) - [外部ファイルの埋め込み](#external-file) --- 開始する前に、WPFormsがWordPressサイトに[インストールおよび有効化](https://wpforms.com/docs/install-wpforms-plugin/ "WPFormsプラグインのインストール方法")されており、[ライセンスが検証](https://wpforms.com/docs/verify-wpforms-license/ "WPFormsライセンスの検証方法")されていることを確認してください。その後、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成方法")するか、既存のフォームを編集してフォームビルダーにアクセスできます。 カスタマイズ可能なテンプレートから始めたい場合は、[教育者向けの宿題提出フォームテンプレート](https://wpforms.com/templates/homework-submission-form-template/ "宿題提出フォームテンプレート")をご覧ください。 ## フォームにリッチテキストフィールドを追加する リッチテキストフィールドは高度な機能であるため、フォームビルダーの**Fancy Fields**の下にあります。 リッチテキストフィールドをフォームに追加するには、それをクリックするか、プレビューエリアにドラッグアンドドロップします。 次に、**Label**フィールドに希望するテキストを入力して、フィールドのラベルを自由に変更してください。 ## 高度なオプションを有効にする リッチテキストフィールドの高度なオプションにアクセスするには、フィールドオプションパネルの**Advanced**タブに移動します。 次に、より注目すべき高度なオプションである**Field Style**と**Field Size**について説明します。 ### フィールドスタイル リッチテキストフィールドには、**Basic**と**Full**の2つのスタイルオプションがあります。 #### 基本フィールドスタイル 基本フィールドスタイルは非常にわかりやすく、最小限の機能を持つシンプルなツールバーが含まれています。 ここに、**Basic**スタイルのツールバーオプションのリストがあります。 - 太字 - 斜体 - 下線 - 取り消し線 - 箇条書きリスト - 番号付きリスト - Blockquote - 左揃え - 中央揃え - 右揃え - 元に戻す - やり直し - リンクの挿入/編集 #### フルフィールドスタイル フルフィールドスタイルには、基本フィールドスタイルで利用可能なすべての機能が含まれており、さらに多くの機能があります。追加のオプションを表示するには、**Toolbar Toggle**アイコンをクリックします。 ここに、**Full**フィールドスタイルを選択すると利用可能になる追加オプションのリストがあります。 - 続きを読むタグの挿入 - 水平線 - テキストの色 - テキストとして貼り付け - 書式設定のクリア - 特殊文字 - インデントを減らす - インデントを増やす - キーボードショートカット さらに、ユーザーは左上隅にあるドロップダウンからさまざまなテキスト形式を選択できます。 **注意:** ユーザーが送信できるコンテンツの長さを管理するには、リッチテキストフィールドに文字数制限を設定できます。この制限を実装する方法については、[開発者ドキュメント](https://wpforms.com/developers/how-to-limit-characters-for-the-rich-text-field/)をご覧ください。 ### フィールドサイズ **Small**、**Medium**、**Large**の3つのフィールドサイズを選択できます。各フィールドサイズは、リッチテキストフィールドの高さを決定します。 リッチテキストフィールドのフィールドサイズを選択するには、**Field Size**というラベルのドロップダウンメニューをクリックします。 **注意:** WordPressは[Internet Explorer 11のサポートを終了](https://wordpress.org/news/2021/05/dropping-support-for-internet-explorer-11/)します。Internet Explorer 11を使用しているユーザーの場合、リッチテキストフィールドにメディアを追加する機能は、フロントエンドで期待どおりに動作しない場合があります。 ## メディアアップロードを許可する リッチテキストフィールドには、ユーザーが画像ファイルをアップロードするオプションがあります。ここに、リッチテキストフィールドを通じてアップロードできるすべての画像タイプのリストがあります。 - .jpg, .jpeg, .jpe - .gif - .png - .bmp - .tiff, .tif - .webp - .ico - .heic このオプションを有効にするには、フィールドオプションパネルの**General**タブに移動します。次に、**Allow Media Uploads**を選択します。 有効にすると、リッチテキストフィールドツールバーにメディアアイコンが表示されます。このアイコンをクリックすると、ユーザーは画像ファイルをアップロードできます。 ここに、アップロードされた画像を含むリッチテキストフィールドの例を示します。 デフォルトでは、ユーザーがアップロードしたファイルは、サイトのUploadsディレクトリ内のWPFormsフォルダに保存されます。 ただし、アップロードされたファイルをWordPressメディアライブラリに自動的に保存したい場合は、**Store files in WordPress Media Library**を選択します。 ## リッチテキストフィールドの使用 サイトのフロントエンドでリッチテキストフィールドを操作する際、ユーザーは2つの異なるモードを切り替えることができます。 - **Visual**: 画像とテキストはテキストエディタに直接表示されます。 - **Text**: 画像とテキストは[HTML](https://www.w3schools.com/whatis/whatis_html.asp "HTMLとは？")で表示されます。 デフォルトでは、リッチテキストフィールドはVisualモードで開始されます。ただし、右上隅の**Visual**または**Text**タブを選択することで、異なるモードを切り替えることができます。 次に、リッチテキストフィールドにテキストを追加して、2つのモードの違いを確認しましょう。 まず、左上隅のドロップダウンをクリックして**Heading 3**を選択し、見出しを追加します。 次に、画像の上にテキストを入力します。 次に、**Text**タブをクリックして、コンテンツがTextモードでどのように表示されるかを確認します。ここでは、コンテンツがHTMLで表示されていることがわかります。 ## 外部ファイルの埋め込み [Post Submission addon](https://wpforms.com/docs/how-to-install-and-use-the-post-submissions-addon-in-wpforms/)を使用している場合、投稿の送信時にYouTube動画やSpotifyポッドキャストなどの外部ファイルをユーザーに埋め込ませたい場合があります。 たとえば、ユーザーはYouTubeからiframe埋め込みコードを使用して、リッチテキストフィールドに動画を埋め込むことができます。技術的には、これにより動画がリッチテキストフィールドに埋め込まれて表示されます。 ただし、WPFormsは、ユーザーがフォームを送信した後、埋め込みコードをサニタイズしてクリーンアップします。これは、攻撃者がコードを使用してウェブサイトの脆弱性を悪用するのを防ぐためのセキュリティ対策です。 Post Submission addonを通じて投稿された動画を埋め込みたい場合は、動画リンクをリッチテキストフィールドに直接貼り付けるだけです。WordPressは埋め込みコードの追加と、oEmbedを使用してフロントエンドに埋め込まれたファイルを表示する処理を行います。 **注意:** oEmbedをサポートするサイトのリストについては、[WordPressの公式ドキュメント](https://wordpress.org/documentation/article/embeds/)をご覧ください。 これで、WPFormsでリッチテキストフィールドを使用する方法のアイデアが得られました。 次に、訪問者がWordPressダッシュボードにアクセスせずにサイトにコンテンツを投稿できるようにしたいですか？[Post Submissions addonのインストールと使用方法](https://wpforms.com/docs/how-to-install-and-use-the-post-submissions-addon-in-wpforms/ "Post Submissions Addonのインストールと使用方法")に関するガイドを確認してください。 **カテゴリー:** フィールド、フィールドタイプ ---