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

このページはJul 07, 2022に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/shopify-admin/productivity-tools/rich-text-editorをご覧ください。

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

リッチテキストエディターを使用する場所

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

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

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

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

リッチテキストエディター内のコンテンツのHTMLコードを表示するには、[HTMLを表示する] ボタンをクリックします。

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

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

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

手順:

  1. 埋め込むメディアの埋め込みコードを見つけます。

  2. 埋め込みコード全体をクリックして選択します。Windowsの場合はctrl + A、Macの場合はcommand + Aを押して選択します。

  3. Windowsの場合はctrl + C、Macの場合はcommand + Cを押して埋め込みコードをコピーします。

  4. 管理画面で、リッチテキストエディターで編集中のコンテンツの [HTMLを表示する] ボタンをクリックします。

  5. Windowsの場合はctrl + V、Macの場合はcommand + Vを押して埋め込みコードを貼り付けます。

  6. 変更を保存するには、編集中のページで [保存] をクリックします。

リッチテキストエディターでテキストの書式設定を行う

[書式設定] ボタンを使用すると、段落、見出し、または引用をすばやく作成できます。適切な書式設定と見出しレベルを使用すると、サイトの訪問客と検索エンジンがウェブサイトのコンテンツを読み取るのに役立ちます。

テキストのフォーマットを選択するには、テキストを強調表示してから [書式設定] ボタンをクリックします。

書式設定オプション

  • 段落

  • 見出し (1～6)

  • 引用 (Blockquote)

太字

テキストを太字にするには、テキストを強調表示して [太字] ボタンをクリックします。

テキストを斜体にする

テキストを斜体にするには、テキストを強調表示して [斜体] ボタンをクリックします。

テキストに下線を引く

テキストに下線を引くには、テキストを強調表示して [下線] ボタンをクリックします。

箇条書きを作成する

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

箇条書きリストの最初の項目は手入力で作成できます。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を入力します。

  4. リンクのタイトルボックスに、リンクの説明を短く入力します。

  5. リンクの開き方メニューで、リンクを開く方法を選択します。

  6. 強調表示したテキストをリンクに変換するには、[リンクを挿入] をクリックします。

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

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

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

Shopifyストア以外のウェブサイトへのリンクは、外部リンクと呼ばれます。外部リンクはhttp://から開始して完全に入力する必要があります。

ページコンテンツのファイルへのリンク

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

手順:

  1. 管理画面から、[設定] > [ファイル] に移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[ファイル] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[ファイル] をタップします。

  1. リンクするファイルのURLをコピーします。

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

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

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

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

  6. [リンク先] フィールドに、リンクするファイルのURLを貼り付けます。

  1. [リンクを挿入] をクリックします。リッチテキストエディターでは、リンクテキストが青色表示で下線が引かれます。

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

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

画像をアップロードする

手順:

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

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

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

  4. コンピューターからJPEGまたはPNG画像ファイルを選択します。

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

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

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

商品画像から選択する

手順:

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

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

  3. 挿入する画像をクリックします。

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

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

画像URLを使用する

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

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

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

  3. 画像ファイルの一般公開されているURLを入力します。

  4. リッチテキストエディターに画像を元のサイズで挿入するには、[画像を挿入] をクリックします。

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

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

手順:

  1. 管理画面で、移動またはリサイズする画像が含まれている商品、コレクション、ウェブページまたはブログ記事をクリックします。

  2. リッチテキストエディターで画像をクリックします。

  3. 次のような変更を行います。

  4. [保存] をクリックします。

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

リッチテキストエディター内で、画像のサイズ、テキストの折り返し、アラインメントを変更できます。画像URLの編集や、画像の代替テキストの追加または編集も実行可能です。

手順:

  1. リッチテキストエディターで画像をダブルクリックして、[画像を編集する] ダイアログを開きます。

  2. サイズおよびアラインメントのオプションを使用して、画像を編集します。

    • 画像のサイズを変更するには、サイズオプションを選択します。
    • 画像を新しい画像URLに変更します。
    • オンラインストアのSEOとアクセシビリティを向上させるには、画像の代替テキストを追加または編集します。
    • スペースを追加するには、スペースに必要なピクセル数を両サイドに入力します。
    • 画像のアラインメントを変更するには、左、中央、または右の配置を表すアイコンから選択します。
    • テキストの折り返しを追加するには、[画像の周りでテキストを折り返す] にチェックを入れます。

  3. [画像を編集する] をクリックして変更を保存します。

リッチテキストエディターでビデオを挿入する

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

自作のビデオを埋め込む場合、まずYouTubeやVimeoなどのビデオストリーミングサイトにアップロードする必要があります。

YouTubeでは関連するビデオを無効にすることはできませんが、関連するビデオが再生されたビデオと同じチャネルからなるように指定することができます。

手順:

  1. Windowsの場合はctrl + C、Macの場合はcommand + Cを押してビデオのURLをコピーします。

  2. Embed Responsivelyにアクセスします。Embed Responsivelyは、ビデオの改良された埋め込みコードを利用できるツールです。

  3. Embed Responsivelyで、ビデオが配置されているビデオウェブサイトをクリックして選択します。

  4. Windowsの場合はctrl + V、Macの場合はcommand + Vを押して、コピーしたビデオのURLをEmbed ResponsivelyのPage URLボックスに貼り付けます。

  5. [埋め込み] をクリックします。Embed Responsivelyにより埋め込みコードが作成されます。

  6. ビデオがYouTubeからのもので、同一のYouTubeチャネルから関連するビデオのみを表示する場合は、埋め込みコードに含まれるビデオのURLを見つけてください。?rel=0をコピーしてその最後を引用符で囲んで貼り付けます。

  7. 埋め込みコードボックス内のすべてのコードをコピーします。

  8. 管理画面で、リッチテキストエディターの [ビデオを挿入] ボタンをクリックします。

  9. [ビデオを挿入] ダイアログのボックスに埋め込みコードを貼り付けます。

  10. [ビデオを挿入] をクリックします。

  11. 編集が終了したら、[保存] をクリックして編集中のアイテムの変更を保存します。

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

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

手順:

  1. 管理画面から [設定] > [ファイル] の順にクリックします。

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

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

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

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

  6. [保存] をクリックします。

  7. [表示する] をクリックして、オーディオファイルが正しく再生されることを確認します。

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

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

手順:

  1. リッチテキストエディターで、HTMLを表示するボタンをクリックします。

  2. 内部コメントを追加するには、非表示にしておきたいテキストを<!--と-->で囲みます。例: <!--yourtext-->

  3. [保存] をクリックします。

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

Shopifyで販売を開始する準備はできていますか?

無料体験を試す