ヘルプ
ログイン

コンテンツにリッチテキストエディタを使用する

Shopify のリッチテキストエディタを使用して、オンラインストアに表示されるコンテンツの書式を設定し、スタイルを適用できます。

このページの内容

リッチテキストエディタの使用箇所

リッチテキストエディタを使用して、ストアのいくつかの場所でテキストを追加または編集できます。

互換性のあるテーマを使用している場合は、テーマエディタでページやテンプレートにリッチテキストセクションを追加できます。

リッチテキストエディタでHTMLコンテンツを追加する

リッチテキストエディタを使用して、ブログ記事、ページ、商品説明、コレクションの説明にHTMLコンテンツを入力できます。

Edit code ボタンをクリックすると、リッチテキストエディタ内のコンテンツのHTMLコードが表示されます。

HTML ビューでは、リッチテキストエディタのコンテンツに多くの変更を加えることができます。HTML を使用して画像、ビデオ、表を追加したり、レイアウトやコンテンツスタイルをデバッグまたは微調整したりできます。

メディアウィジェットを埋め込む

動画や音楽のウィジェットを埋め込みたい場合は、まず Youtube、Vimeo、SoundCloud などのサービスでホストする必要があります。これらのサービスで生成される埋め込みコードをコピーして、Shopify 管理画面のリッチテキストエディタに貼り付けます。

手順:

  1. 埋め込むメディアの埋め込みコードを見つけます。
  2. 埋め込みコードをクリックして、PC では `ctrl` + `A` キー、Mac では `command` + `A` キーを押して、埋め込みコード全体を選択します。
  3. PC では `ctrl` + `C` キー、Mac では `command` + `C` キーを押して、埋め込みコードをコピーします。
  4. 管理画面で、編集しているコンテンツのリッチテキストエディタにある [HTML を表示] ボタンをクリックします。
  5. PC では `ctrl` + `V` キー、Mac では `command` + `V` キーを押して、埋め込みコードを貼り付けます。
  6. [保存] をクリックします。

リッチテキストエディタでテキストの書式を設定する

[書式設定] ボタンを使用すると、段落、見出し、引用文をすばやく作成できます。適切な書式設定と見出しレベルを使用すると、ユーザーや検索エンジンがウェブサイトのコンテンツを読みやすくなります。

テキストの書式を選択するには、テキストをハイライトして [書式設定] ボタンをクリックします。

書式設定オプション

  • 段落

    ウェブサイトのほとんどのテキストコンテンツは段落テキストです。段落テキストのフォントサイズは通常 10～12 pt ですが、テーマによっては異なるフォントサイズが使用されます。

  • 見出し (1～6)

    見出しはコンテンツを構成するために使用します。見出しレベルは 6 段階あります。見出し 1 が最も重要なレベルで、見出し 6 が最も重要度の低いレベルです。

  • 引用文

    引用文は、引用や、本またはウェブサイトからの抜粋など、他の誰かの文章のテキストを表示するために使用されます。

テキストを太字にする

テキストを太字にするには、テキストをハイライトして [太字] ボタンをクリックします。

テキストを斜体にする

テキストを斜体にするには、テキストをハイライトして [斜体] ボタンをクリックします。

テキストに下線を引く

テキストに下線を引くには、テキストをハイライトして [下線] ボタンをクリックします。

箇条書きリストを作成する

箇条書きリストを作成するには、[箇条書きリスト] ボタンをクリックします。

最初の箇条書き項目を入力できます。新しいリスト項目を作成するには、enter キーまたは return キーを押します。リストを終了するには、enter キーまたは return キーを2回押します。

番号付きリストを作成する

番号付きリストを作成するには、[番号付きリスト] ボタンをクリックします。

最初の番号付きリスト項目を入力できます。新しいリスト項目を作成するには、enter キーまたは return キーを押します。リストを終了するには、enter キーまたは return キーを2回押します。

テキストのインデント

段落をインデントすると、その段落の左側に余白が追加されます。段落をインデントするには、[インデント] ボタンをクリックします。

テキストのインデント解除

段落のインデントを解除すると、インデントされた余白が削除されます。段落のインデントを解除 (「アウトデント」) するには、[アウトデント] ボタンをクリックします。

テキストの配置

テキストを配置するには、テキストを選択し、[配置] ボタンをクリックして、[左揃え]、[中央揃え]、または [右揃え] を選択します。

テキストの色の変更

  1. テキストを選択し、[色] ボタンをクリックします。
  2. 色をクリックするか、16進数コードを入力して、ハイライト表示されたテキストをその色に変更します。

テキストの背景色の変更

  1. テキストを選択し、[色] ボタンをクリックします。
  2. [背景] タブをクリックします。
  3. 色をクリックするか、16進数コードを入力して、ハイライト表示されたテキストの背景をその色に変更します。

リッチテキストエディタでの書式のクリア

テキストや画像から書式を削除するには、コンテンツを選択してから [書式をクリア] ボタンをクリックします。

リッチテキストエディタでの表の挿入

リッチテキストエディタを使用すると、ブログ記事、ページ、商品説明、コレクション説明に表を挿入できます。表を作成した後、テキスト、画像、さらには動画を表内に配置することができます。

手順:

  1. リッチテキストエディタで、[表を挿入] ボタンをクリックします。
  2. [表を挿入] をクリックして表を挿入します。これにより、1行1列の表が作成されます。

表を作成した後、もう一度 [表を挿入] ボタンをクリックして、表の行と列を編集します。

  • [上に行を挿入]: カーソルを行に合わせてこのボタンをクリックすると、その上に新しい行が挿入されます。
  • [下に行を挿入]: カーソルを行に合わせてこのボタンをクリックすると、その下に新しい行が挿入されます。
  • [前に列を挿入]: カーソルを列に合わせてこのボタンをクリックすると、その前に新しい列が挿入されます。
  • [後ろに列を挿入]: カーソルを列に合わせてこのボタンをクリックすると、その後ろに新しい列が挿入されます。
  • [行を削除]: 削除する行にカーソルを合わせてから、このボタンをクリックします。
  • [列を削除]: 削除する列にカーソルを合わせてから、このボタンをクリックします。
  • [表を削除]: 表内の任意の場所にカーソルを合わせてこのボタンをクリックすると、表全体が削除されます。

リッチテキストエディタを使用したリンクの挿入

リッチテキストエディタを使用すると、ブログ記事、ページ、商品説明、コレクション説明にリンク (ハイパーリンク) を挿入できます。お客様を Shopify オンラインストア内のページや他のウェブサイトに誘導するリンクを追加できます。また、お客様からのお問い合わせに役立つ、メールメッセージを開いたり電話を発信したりするリンクを追加することもできます。

手順:

  1. リンクに変換するテキストまたは画像を選択します。
  2. [リンクを挿入] をクリックします。
  3. リンクの移動先URLを、 リンク先 フィールドに入力します。
    • Shopify ストア外の外部ウェブサイトにリンクするには、https:// に続けてURL (例: https://www.example.com) を入力します。
    • Shopify オンラインストア内のページにリンクするには、短い URL (例: /collections/summer-collection) を入力します。
    • メールメッセージを開くリンクを作成するには、mailto: に続けてメールアドレス (例: mailto:example@example.com) を入力します。
    • 電話を発信するリンクを作成するには、tel: に続けて電話番号 (例: tel:+0-123-456-7890) を入力します。
  4. [リンクラベル] ボックスに、リンクの簡単な説明を入力します。
  5. リンクを開く方法は このリンクを開く場所 メニューで選択します。
    • [同じウィンドウ]: リンクは既存のブラウザのタブまたはウィンドウで開きます。
    • [新しいウィンドウ]: リンクは新しいブラウザのタブまたはウィンドウで開きます。
  6. [リンクを挿入] をクリックして、ハイライト表示したテキストをリンクに変換します。

リッチテキストエディタでの内部リンクと外部リンクの追加

Shopify ストア内のページへのリンクは、内部リンクと呼ばれます。短い URL を使用して、内部リンクを作成できます。たとえば、URL /collections は、ストアのコレクションページを指します。

コレクションページや商品ページなど、オンラインストアの特定のページにリンクするには、/page-type/page-handle という URL 形式を使用します。たとえば、「Summer Collection」という名前で作成したコレクションにリンクするには、URL /collections/summer-collection を使用します。

Shopify ストア外のウェブサイトへのリンクは、外部リンクと呼ばれます。外部リンクは、http:// で始まる完全な形式で入力する必要があります。

ファイルをアップロードした後、リッチテキストエディタでコンテンツにリンク付けすることにより、商品やコレクションの説明、ウェブページ、ブログ記事からダウンロードできるようにします。

手順:

デスクトップ

  1. 管理画面で、[コンテンツ] > [ファイル] の順に移動します。

  2. リンクさせたいファイルの URL をコピーします。

  3. 管理画面で、ファイルを追加する商品、コレクション、ウェブページ、またはブログ記事をクリックします。

  4. リッチテキストエディタで、リンクテキストを入力または選択します。

  5. リンクテキストを選択します。

  6. [リンクを挿入する] をクリックします。

  7. [リンク先] フィールドに、リンクさせたいファイルの URL を貼り付けます。

  8. [リンクを挿入する] をクリックします。リッチテキストエディタで、リンクされたテキストが青色で表示され、下線が付きます。

モバイル

  1. Shopify アプリから、Menu アイコンをタップします。

  2. [コンテンツ] メニューで 下矢印 アイコンをタップしてから、[ファイル] をタップします。

  3. リンクさせたいファイルの URL をコピーします。

  4. 管理画面で、ファイルを追加する商品、コレクション、ウェブページ、またはブログ記事をタップします。

  5. リッチテキストエディタで、リンクテキストを入力または選択します。

  6. リンクテキストを選択します。

  7. [リンクを挿入する] をタップします。

  8. [リンク先] フィールドに、リンクさせたいファイルの URL を貼り付けます。

  9. [リンクを挿入する] をタップします。リッチテキストエディタで、リンクされたテキストが青色で表示され、下線が付きます。

リッチテキストエディタで画像を挿入する

リッチテキストエディタを使用して画像を挿入するには、以下の3つの方法があります。

画像をアップロードする

手順:

  1. リッチテキストエディタで、[画像を挿入] ボタンをクリックします。

  2. [画像を挿入] ダイアログで、[アップロード済みの画像] タブをクリックします。

  3. [ファイルをアップロード] をクリックします。

  4. お使いのコンピューターから、WebP、HEIC、SVG、GIF、JPEG、または PNG 形式の画像ファイルを選択します。

  5. アップロードした画像をクリックして選択します。

  6. [サイズ] メニューから、画像の表示サイズを選択します。[元画像] を選択すると、表示サイズを変更せずに画像を挿入できます。

  7. [画像を挿入] をクリックして、リッチテキストエディタに画像を配置します。

商品画像から選択する

手順:

  1. リッチテキストエディタで、[画像を挿入] ボタンをクリックします。

  2. [画像を挿入] ダイアログで、[商品画像] タブをクリックします。

  3. 挿入する画像をクリックします。挿入したい商品メディアが見つからない場合は、矢印ボタンを使用してさまざまなページを閲覧できます。

  4. [サイズ] メニューから、画像の表示サイズを選択します。[元画像] を選択すると、表示サイズを変更せずに画像を挿入できます。

  1. [画像を挿入] をクリックして、商品画像をリッチテキストエディタに配置します。

画像 URL を使用する

公開 URL を使用して画像を挿入するには、以下の手順を実行します。

  1. リッチテキストエディタで、[画像を挿入] ボタンをクリックします。
  2. [画像を挿入] ダイアログで、[URL] タブをクリックします。
  3. 画像ファイルの一般公開されている URL を入力します。
  4. [画像を挿入] をクリックすると、リッチテキストエディタに元のサイズの画像が挿入されます。

リッチテキストエディタで画像を移動およびサイズ変更する

商品やコレクションの説明、ウェブページ、またはブログに画像を追加した後、コンテンツ内の別の場所に画像を移動できます。

手順:

  1. 管理画面で、移動またはサイズ変更する画像が含まれている商品、コレクション、ウェブページ、またはブログ記事をクリックします。
  2. リッチテキストエディタで、画像をクリックします。
  3. 次のいずれかの操作を行います。
    • 画像を移動するには、[コンテンツ] フィールド内の別の場所に画像をクリックしてドラッグします。
    • 画像のサイズを変更するには、いずれかの角をクリックしてドラッグします。
  4. [保存] をクリックします。

リッチテキストエディタで画像を編集する

リッチテキストエディタ内で、画像のサイズ、テキストの回り込み、配置を変更できます。また、画像の URL を編集したり、画像のalt属性を追加または編集したりすることもできます。

手順:

  1. リッチテキストエディタで画像をダブルクリックして、[画像を編集] ダイアログを開きます。
  2. サイズと配置のオプションを使用して、画像を編集します。
    • 画像のサイズを変更するには、サイズのオプションを選択します。
    • オンラインストアの SEO とアクセシビリティを向上させるには、画像のalt属性を追加または編集します。
    • 間隔を追加するには、各辺に追加するスペースのピクセル数を入力します。
    • 画像の配置を変更するには、左揃え、中央揃え、または右揃えを表すアイコンから選択します。
    • テキストの回り込みを追加するには、[画像の周りにテキストを折り返す] にチェックを入れます。
  3. [画像を編集] をクリックして変更を保存します。

リッチテキストエディタで動画を挿入する

リッチテキストエディタを使用して、ブログ記事、ページ、商品説明、コレクション説明に動画を挿入または埋め込むことができます。

自分で作成した動画を埋め込む場合は、まず YouTube や Vimeo などの動画ストリーミングサイトにアップロードする必要があります。

YouTube では関連動画を無効にすることはできませんが、再生された動画と同じチャネルの関連動画を表示するように指定できます。

手順:

  1. PC では ctrl + C キーを、Mac では command + C キーを押して、動画の URL をコピーします。
  1. Embed Responsively にアクセスします。Embed Responsively は、動画の埋め込みコードを改善してくれるツールです。
  1. Embed Responsively で、動画の配信元であるウェブサイトをクリックして選択します。
  2. PC の場合は ctrl + V、Mac の場合は command + V を押して、コピーした動画の URL を Embed Responsively の 「Page URL」 ボックスに貼り付けます。
  3. 「Embed」をクリックします。Embed Responsively が埋め込みコードを作成します。
  4. 動画が YouTube のもので、同じ YouTube チャンネルの関連動画のみを表示したい場合は、埋め込みコードで動画の URL を見つけます。引用符内の末尾に ?rel=0 をコピーして貼り付けます。
  5. 「Embed code」ボックス内のコードをすべてコピーします。
  6. Shopify 管理画面で、リッチテキストエディタの [動画を挿入] ボタンをクリックします。
  7. [動画を挿入] ダイアログのボックスに埋め込みコードを貼り付けます。
  8. [動画を挿入] をクリックします。
  9. 編集が完了したら、[保存] をクリックして、編集中のアイテムへの変更を保存します。

リッチテキストエディタでオーディオファイルを挿入する

リッチテキストエディタを使用すると、ブログ記事、ページ、商品説明、コレクションの説明にオーディオファイルを挿入または埋め込むことができます。

手順:

  1. 管理画面で、[コンテンツ] > [ファイル] の順に移動します。

  2. ストアに挿入または埋め込むオーディオファイルをアップロードするには、[ファイルをアップロードする] をクリックします。

  3. [オンラインストア] セクションから、オーディオファイルを掲載するページまたはブログ記事のリッチテキストエディタを開きます。

  4. <div id="player"><audio controls="controls"> をコピーし、そのコードをリッチテキストエディタに貼り付けて、ページにオーディオプレーヤーを埋め込みます。

  5. 次のコードをコピーします。

  • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  1. このコードを、リッチテキストエディタのオーディオプレーヤー用コードの後に貼り付けてから、https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 を、Shopify にアップロードしたオーディオファイル用に作成した URL に置き換えます。オーディオファイルの URL は、[ファイル] ページでいつでも確認できます。
  2. [保存] をクリックします。
  3. [表示] をクリックして、オーディオファイルが正しく再生されることを確認します。

リッチテキストエディタで内部コメントを追加または削除する

ストアに公開したくない内部テキストには、コメントタグ <!-- と --> を使用できます。

手順:

  1. リッチテキストエディタで、[HTML を表示] ボタンをクリックします。
  2. 内部コメントを追加するには、非表示にするテキストを <!-- と --> で囲みます。例: <!--yourtext-->。
  3. [保存] をクリックします。

コメントタグで囲まれた HTML タグは、内部テキストとして保存されます。これらの HTML タグが正しく機能するようにするには、タグを囲むコメントタグ <!-- と --> を削除する必要があります。

リッチテキストエディタについて

リッチテキストエディタは、外部サービスのコンテンツ配信ネットワーク (CDN) である TinyMCE と統合されています。この統合には、いくつかの重要な注意点があります。

  • コンテンツの制限: リッチテキストエディタに入力するコンテンツには、64 KB という厳格な制限があります。これは、ページ、ブログ記事、追加のスクリプトに適用されます。
  • HTML のサニタイズ: TinyMCE は、ストアフロントの誤作動やセキュリティリスクを防ぐために HTML フォーマットを自動的に修正する、コンテンツフィルタリングロジックを提供します。手動で HTML を元の形式に編集して戻すこともできますが、潜在的な問題を回避するため、これらの自動変更をそのまま受け入れることをおすすめします。

リッチテキストエディタのトラブルシューティング

リッチテキストエディタで問題が発生している場合は、次のトラブルシューティングの手順と一般的な問題を確認してください。

フォーマットの問題に関するトラブルシューティング

コピーしたコンテンツのフォーマットの問題

テキストは、常にもとのエディタやウェブページのフォーマットを継承します。Microsoft Word でコンテンツを作成してリッチテキストエディタにコピーして貼り付けると、<div> タグを含む、同じ色、サイズ、インデント、スペースが維持されます。

可能な限り、リッチテキストエディタで直接コンテンツを編集、フォーマットしてください。

より複雑なページレイアウトの場合、Shogun Drag & Drop Page Builder などのページビルダーアプリの使用を検討してください。

フォーマットの問題を特定する

リッチテキストエディタの問題の最も一般的な原因は、別のソースからコンテンツをコピーして貼り付ける際に引き継がれる、埋め込みのスタイル設定やフォーマットです。

この問題はさまざまな形で現れますが、Shopify 管理画面での表示とライブストアでの表示に不一致がある場合は、通常これが原因です。これには、情報が更新されない、あるいはスタイルが異なって表示される、といった事象が含まれます。

フォーマットの問題に関するトラブルシューティング

フォーマットの問題が原因であるかどうかをテストするには、[フォーマットをクリア] ボタンを使用する方法と、リッチテキストエディタのコンテンツを HTML ストリッパーで処理する方法の2つがあります。

テストするには、問題が発生している商品またはページの複製を作成し、その複製に対して次のいずれかのテストを実行してください。

テスト1：フォーマットをクリアする

  1. リッチテキストエディタのコンテンツをすべてハイライトします。
  2. [フォーマットをクリア] ボタンをクリックします。
  3. [保存] をクリックしてテストします。

テスト2：HTML ストリッパー

  1. リッチテキストエディタからすべてのコンテンツをコピーします。
  2. striphtml.com などの HTML ストリッパーに貼り付けます。
  3. 除去されたコンテンツをすべてコピーします。
  4. 元のコンテンツを置き換える形で、リッチテキストエディタに貼り付け直します。
  5. [保存] をクリックしてテストします。

これらの手順のいずれかで問題が解決した場合、その問題は、コンテンツを最初にリッチテキストエディタに追加した際に引き継がれたフォーマットが原因です。同じ方法を使用して、元のコンテンツを修正できます。

ずれた画像のコードのトラブルシューティング

折り返しオプションを使用しているときに、画像の横にテキストが正しく配置されない問題が発生している場合は、画像タグが段落の途中ではなく先頭にくるように、コードを移動させる必要があるかもしれません。

  1. リッチテキストエディタで [コードを編集] ボタンをクリックします。
  2. 画像コードを見つけ、<img> タグ全体を <p> 段落タグの外側の、段落の先頭に移動します。
  3. 画像の下にある後続の段落から、<span> タグをすべて削除します。
  4. [保存] をクリックします。

ずれた画像のコードの例：

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

修正済みのコード：

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>
mailtoリンクが機能しない場合のトラブルシューティング

mailto: リンクが機能しない (空白ページが読み込まれる、またはメールが開かない) 場合は、リンクが次の構造に従っていることを確認してください。

mailto:email@example.com

上記の形式と一致しても期待どおりに機能しない場合は、ブラウザまたはメールクライアントの設定に問題がある可能性があります。ブラウザとメールクライアントの設定を確認し、mailto: リンクを正しく処理するように設定されていることを確かめてください。

サイズ変更後にページの画像が元のサイズに戻る場合のトラブルシューティング

ページに画像を挿入すると、生成される HTML には src パラメーターと data-mce-src パラメーターの両方が含まれます。この2つが一致しない場合、最終的に src は data-mce-src と一致するように更新されます。

しかし、リッチテキストエディタを使用して画像のサイズを変更すると、src のみが更新され、data-mce-src は元のサイズの URL のままになります。さらに数回クリックすると、src は data-mce-src の URL に戻されます。

これを回避するには、data-mce-src の URL を手動で更新して、希望の画像サイズに一致させます。

  1. リッチテキストエディタで [コードを編集] ボタンをクリックします。
  2. サイズ変更した画像タグを見つけます。
  3. src パラメーターと data-mce-src パラメーターの両方を見つけます。
  4. src URL と一致するように data-mce-src URL を更新します。
  5. [保存] をクリックします。
自動的な HTML の変更 (サニタイズ) のトラブルシューティング

リッチテキストエディタで変更を加えると、対応する HTML が自動的に変更されることに気づくかもしれません。

なぜこのようなことが起きるのでしょうか。

Shopify のリッチテキストエディタは、外部サービスのコンテンツデリバリーネットワーク (CDN) である TinyMCE と統合されています。この CDN は、ストアフロントで誤動作したり、セキュリティリスクにさらされたりする可能性のある HTML 行のフォーマットを自動的に修正する、広範で信頼性の高い コンテンツフィルタリング ロジックを提供します。このプロセスは HTML サニタイズ と呼ばれます。

どうすればよいですか。

コンテンツフィルタリングのロジックを回避するために、HTML を手動で編集して元に戻すこともできますが、自動的な変更に従うことをお勧めします。これらの自動修正は予期された動作であり、ストアフロントに問題を引き起こす可能性のある変更を防ぐという重要な目的を果たします。

CDN が修正しようとしている HTML を記述することで特定の目標を達成しようとしている場合は、期待される HTML フォーマットをサポートするテーマコードに変更を加えるなど、それらの目標を達成するためのより理想的な方法があるかどうかを検討してください。

お客様を選択したマーケット外に誘導するリンクのトラブルシューティング

Shopify Markets をサブフォルダーと Geolocation アプリと共に使用している場合、商品説明、ブログ記事、ページ、コレクション説明内のリンクによって、お客様が選択した地域にとどまらず、プライマリードメインにリダイレクトされることがあります。

なぜこのようなことが起きるのでしょうか。

リッチテキストエディタは、ダイレクトリンク (完全な URL) と内部リンク (短い URL) の両方をサポートしています。完全な URL を含むダイレクトリンク (例: https://yourstore.com/collections/summer) を使用すると、お客様は選択したマーケットを無視して、その特定の URL に誘導されます。

修正方法

リンクが地域に対応し、お客様が選択したマーケット内にとどまるようにするには、完全な URL の代わりに / で始まる内部リンクを使用します。

  • ダイレクトリンク (地域非対応)：https://yourstore.com/collections/summer
  • 内部リンク (地域対応)：/collections/summer

既存のリンクを更新するには：

  1. 管理画面で、リンクを更新したい商品、コレクション、ページ、またはブログ記事に移動します。
  2. リッチテキストエディタで、[コードを編集] ボタンをクリックして HTML を表示します。
  3. https:// で始まり、ストアのドメインを含むリンクを見つけます。
  4. 完全な URL を短い URL 形式に置き換えます。たとえば、https://yourstore.com/pages/about を /pages/about に変更します。
  5. [保存] をクリックします。

更新する商品、コレクション、ブログ、ページが多数ある場合は、CSV ファイルにエクスポートし、ドメインまたは http を検索してダイレクトリンクを特定し、それらを内部リンクに更新してから、更新した CSV ファイルをストアにインポートできます。