コンテンツにリッチテキストエディタを使用する
Shopifyのリッチテキストエディタを使用して、オンラインストアに表示されるコンテンツのフォーマットとスタイルを設定できます。
目次
- リッチテキストエディタを使用する場所
- リッチテキストエディタでHTMLコンテンツを追加する
- リッチテキストエディタでテキストの書式設定を行う
- リッチテキストエディタでテキストの配色を変更する
- リッチテキストエディタで書式設定を解除する
- リッチテキストエディタで表を挿入する
- リッチテキストエディタでリンクを挿入する
- リッチテキストエディタで内部リンクと外部リンクを追加する
- ページコンテンツのファイルへのリンク
- リッチテキストエディタで画像を挿入する
- リッチテキストエディタで画像を移動およびリサイズする
- リッチテキストエディタで画像を編集する
- リッチテキストエディタでビデオを挿入する
- リッチテキストエディタでオーディオファイルを挿入する
- リッチテキストエディタで内部コメントを追加または削除する
リッチテキストエディタを使用する場所
リッチテキストエディタを使用して、ストアのいくつかの場所でテキストを追加または編集できます。
Online Store 2.0のテーマを使用している場合は、テーマエディタを使用してリッチテキストセクションをページやテンプレートに追加できます。
リッチテキストエディタでHTMLコンテンツを追加する
リッチテキストエディタを使用して、ブログ記事、ページ、商品説明、コレクション説明にHTMLコンテンツを入力できます。
リッチテキストエディタ内のコンテンツのHTMLコードを表示するには、[HTMLを表示する] ボタンをクリックします。
HTMLビューでは、リッチテキストエディタでコンテンツにさまざまな変更を加えられます。HTMLを使用して画像、ビデオ、または表を追加でき、レイアウトとコンテンツのスタイルをデバッグまたは微調整できます。
メディアウィジェットを埋め込む
ビデオウィジェットまたは音楽ウィジェットを埋め込む場合、まずYoutube、Vimeo、SoundCloudなどのサービスでホストする必要があります。これらのサービスでは埋め込みコードが生成されます。このコードをコピーして管理画面のリッチテキストエディタに貼り付けます。
手順:
埋め込むメディアの埋め込みコードを見つけます。
埋め込みコード全体をクリックして選択します。Windowsの場合は
ctrl+A、Macの場合はcommand+Aを押して選択します。Windowsの場合は
ctrl+C、Macの場合はcommand+Cを押して埋め込みコードをコピーします。管理画面で、リッチテキストエディタで編集中のコンテンツの [HTMLを表示する] ボタンをクリックします。
Windowsの場合は
ctrl+V、Macの場合はcommand+Vを押して埋め込みコードを貼り付けます。[保存] をクリックします。
リッチテキストエディタでテキストの書式設定を行う
[書式設定] ボタンを使用すると、段落、見出し、または引用をすばやく作成できます。適切な書式設定と見出しレベルを使用すると、サイトの訪問客と検索エンジンがウェブサイトのコンテンツを読み取るのに役立ちます。
テキストのフォーマットを選択するには、テキストを強調表示してから [書式設定] ボタンをクリックします。
書式設定オプション
段落
見出し (1～6)
引用 (Blockquote)
太字
テキストを太字にするには、テキストを強調表示して [太字] ボタンをクリックします。
テキストを斜体にする
テキストを斜体にするには、テキストを強調表示して [斜体] ボタンをクリックします。
テキストに下線を引く
テキストに下線を引くには、テキストを強調表示して [下線] ボタンをクリックします。
箇条書きを作成する
箇条書きを作成するには、[箇条書き] ボタンをクリックします。
箇条書きリストの最初の項目は手入力で作成できます。enterまたはreturnキーを押して新しいリストの項目を作成します。リストを終了するには、enterまたはreturnキーを2回押します。
番号付きリストを作成する
番号付きリストを作成するには、[番号付きリスト] ボタンをクリックします。
番号付きリストの最初の項目は手入力で作成できます。enterまたはreturnキーを押して新しいリストの項目を作成します。リストを終了するには、enterまたはreturnキーを2回押します。
テキストをインデントする
段落をインデントすると、その左側に余白ができます。段落をインデントするには、[インデント] ボタンをクリックします。
テキストのインデントを解除する
段落のインデントを解除すると、インデントされていた余白が削除されます。段落のインデントを解除するには、[アウトデント] ボタンをクリックします。
テキストを揃える
テキストを揃えるには、テキストを選択し、[配置] ボタンをクリックして、[左揃え]、[中央揃え]、または[右揃え] を選択します。
リッチテキストエディタでテキストの配色を変更する
手順:
テキストを強調表示して [色] ボタンをクリックします。
色をクリックするか、16進数カラーコードを入力して強調表示されたテキストをその色に変更します。
テキストの背景色を変更する
手順:
テキストを強調表示して [色] ボタンをクリックします。
[背景] タブをクリックします。
色をクリックするか、16進数カラーコードを入力して強調表示されたテキストの背景をその色に変更します。
リッチテキストエディタで書式設定を解除する
テキストや画像から書式設定を削除するには、内容を強調表示してから [書式のクリア] ボタンをクリックします。
リッチテキストエディタで表を挿入する
リッチテキストエディタを使用して、ブログ記事、ページ、商品説明、コレクション説明に表を挿入できます。作成した表にテキスト、画像、またはビデオを配置することもできます。
手順:
リッチテキストエディタで、[表を挿入] ボタンをクリックします。
[表を挿入] をクリックして表を挿入します。これにより、1つの行と1つの列が含まれている表が作成されます。
表を作成したら、[表を挿入] ボタンを再度クリックして表の行と列を変更します。
- 上に行を挿入: 行にカーソルを置いてこのボタンをクリックすると、新しい行を上に挿入します。
- 下に行を挿入: 行にカーソルを置いてこのボタンをクリックすると、新しい行を下に挿入します。
- 前に列を挿入: 列にカーソルを置いてこのボタンをクリックすると、新しい列を前に挿入します。
- 後に列を挿入: 列にカーソルを置いてこのボタンをクリックすると、新しい列を後に挿入します。
- 行を削除: 削除する行にカーソルを置いてこのボタンをクリックします。
- 列を削除: 削除する列にカーソルを置いてこのボタンをクリックします。
- 表を削除: 表全体を削除するには、表の任意の場所にカーソルを置いてこのボタンをクリックします。
リッチテキストエディタでリンクを挿入する
リッチテキストエディタを使用して、ブログ記事、ページ、商品説明、コレクションの説明にリンク (ハイパーリンク) を挿入できます。Shopifyオンラインストア内のページや別のウェブサイトにお客様を誘導するリンクを追加できます。メールメッセージの開封や電話の発信などを実行するリンクを追加して、お客様があなたに連絡するのもサポートできます。
手順:
- リンクに変換するテキストまたは画像を強調表示します。
- [リンクを挿入] をクリックします。
-
[リンク先] フィールドにリンク先URLを入力します。
- Shopifyストア以外の外部ウェブサイトにリンクするには、
https://www.example.comのように、https://の後にURLを入力します。 - Shopifyオンラインストア内のページにリンクするには、
/collections/summer-collectionのように短縮URLを入力します。 - メールメッセージを開くリンクを作成するには、
mailto:example@example.comのようにmailto:の後にメールアドレスを入力します。 - 電話を発信するリンクを作成するには、
tel:+0-123-456-7890のようにtel:の後に電話番号を入力します。
- Shopifyストア以外の外部ウェブサイトにリンクするには、
リンクのタイトルボックスに、リンクの説明を短く入力します。
-
リンクの開き方メニューで、リンクを開く方法を選択します。
- 同じウィンドウで開く: リンクは、開いているブラウザタブまたはウィンドウで開かれます。
- 新しいウィンドウで開く: リンクは、新しいブラウザタブまたはウィンドウで開かれます。
強調表示したテキストをリンクに変換するには、[リンクを挿入] をクリックします。
リッチテキストエディタで内部リンクと外部リンクを追加する
Shopifyストア内のページへのリンクは、内部リンクと呼ばれます。短縮URLを使用して内部リンクを作成できます。たとえば、/collectionsというURLにより、ストアのコレクションページに誘導できます。
コレクションや商品ページなど、オンラインストアの特定のページにリンクするには、URL形式/page-type/page-handleを使用します。たとえば、サマーコレクションというコレクションにリンクするには、/collections/summer-collectionというURLを使用します。
Shopifyストア以外のウェブサイトへのリンクは、外部リンクと呼ばれます。外部リンクはhttp://から開始して完全に入力する必要があります。
ページコンテンツのファイルへのリンク
ファイルをアップロードしたら、リッチテキストエディタのコンテンツにリンクできるため、商品およびコレクションの説明、ウェブページ、またはブログ記事からダウンロード可能になります。
手順:
- 管理画面から [コンテンツ] > [ファイル] の順に移動します。
- Shopifyアプリから、[ストア] > [設定] に移動します。
- [ストアの設定] で、[ファイル] をタップします。
- Shopifyアプリから、[ストア] > [設定] に移動します。
- [ストアの設定] で、[ファイル] をタップします。
リンクするファイルのURLをコピーします。
管理画面でファイルを追加する商品、コレクション、ウェブページ、またはブログ記事をクリックします。
リッチテキストエディタで、リンクテキストを入力または選択します。
リンクテキストを選択します。
[リンクを挿入] をクリックします。
[リンク先] フィールドに、リンクするファイルのURLを貼り付けます。
- [リンクを挿入] をクリックします。リッチテキストエディタでは、リンクテキストが青色表示で下線が引かれます。
リッチテキストエディタで画像を挿入する
リッチテキストエディタを使用して画像を挿入するには、3つの方法があります。以下の方法で挿入できます。
画像をアップロードする
手順:
リッチテキストエディタで、[画像を挿入] ボタンをクリックします。
[画像を挿入] ダイアログで、[アップロードされた画像] タブをクリックします。
[ファイルをアップロード] をクリックします。
コンピューターからJPEGまたはPNG画像ファイルを選択します。
アップロードした画像をクリックして選択します。
挿入するサイズメニューから、画像の表示サイズを選択します。元のサイズを選択すると、表示サイズを変更せずに画像を挿入できます。
画像をリッチテキストエディタに配置するには、[画像を挿入] をクリックします。
商品画像から選択する
手順:
リッチテキストエディタで、[画像を挿入] ボタンをクリックします。
[画像を挿入] ダイアログで、[商品画像] タブをクリックします。
挿入する画像をクリックします。
挿入するサイズメニューから、画像の表示サイズを選択します。元のサイズを選択すると、表示サイズを変更せずに画像を挿入できます。
商品画像をリッチテキストエディタに配置するには、[画像を挿入] をクリックします。
画像URLを使用する
公開URLを使用して画像を挿入するには、以下の手順を実行します。
リッチテキストエディタで、[画像を挿入] ボタンをクリックします。
[画像を挿入] ダイアログで、[URL] タブをクリックします。
画像ファイルの一般公開されているURLを入力します。
リッチテキストエディタに画像を元のサイズで挿入するには、[画像を挿入] をクリックします。
リッチテキストエディタで画像を移動およびリサイズする
商品やコレクションの説明、ウェブページまたはブログに画像を追加した後、コンテンツ内の別のロケーションに画像を移動させることができます。
手順:
- 管理画面で、移動またはリサイズする画像が含まれている商品、コレクション、ウェブページまたはブログ記事をクリックします。
- リッチテキストエディタで画像をクリックします。
-
次のいずれかの操作を実行します。
- 画像を移動するには、画像をクリックしてコンテンツフィールドの別のロケーションにドラッグします。
- 画像サイズを変更するには、画像の角をクリックしてドラッグします。
[保存] をクリックします。
リッチテキストエディタで画像を編集する
リッチテキストエディタ内で、画像のサイズ、テキストの折り返し、アラインメントを変更できます。画像URLの編集や、画像の代替テキストの追加または編集も実行可能です。
手順:
- リッチテキストエディタで画像をダブルクリックして、[画像を編集する] ダイアログを開きます。
-
サイズおよびアラインメントのオプションを使用して、画像を編集します。
- 画像のサイズを変更するには、サイズオプションを選択します。
- 画像を新しい画像URLに変更します。
- オンラインストアのSEOとアクセシビリティを向上させるには、画像の代替テキストを追加または編集します。
- スペースを追加するには、スペースに必要なピクセル数を両サイドに入力します。
- 画像のアラインメントを変更するには、左、中央、または右の配置を表すアイコンから選択します。
- テキストの折り返しを追加するには、[画像の周りでテキストを折り返す] にチェックを入れます。
[画像を編集する] をクリックして変更を保存します。
リッチテキストエディタでビデオを挿入する
リッチテキストエディタを使用して、ブログ記事、ページ、商品説明、コレクションの説明にビデオを挿入または埋め込むことができます。
自作のビデオを埋め込む場合、まずYouTubeやVimeoなどのビデオストリーミングサイトにアップロードする必要があります。
YouTubeでは関連するビデオを無効にすることはできませんが、関連するビデオが再生されたビデオと同じチャネルからなるように指定することができます。
手順:
- Windowsの場合は
ctrl+C、Macの場合はcommand+Cを押してビデオのURLをコピーします。
- Embed Responsivelyにアクセスします。Embed Responsivelyは、ビデオの改良された埋め込みコードを利用できるツールです。
Embed Responsivelyで、ビデオが配置されているビデオウェブサイトをクリックして選択します。
Windowsの場合は
ctrl+V、Macの場合はcommand+Vを押して、コピーしたビデオのURLをEmbed ResponsivelyのPage URLボックスに貼り付けます。[埋め込み] をクリックします。Embed Responsivelyにより埋め込みコードが作成されます。
ビデオがYouTubeからのもので、同一のYouTubeチャネルから関連するビデオのみを表示する場合は、埋め込みコードに含まれるビデオのURLを見つけてください。
?rel=0をコピーしてその最後を引用符で囲んで貼り付けます。埋め込みコードボックス内のすべてのコードをコピーします。
管理画面で、リッチテキストエディタの [ビデオを挿入] ボタンをクリックします。
[ビデオを挿入] ダイアログのボックスに埋め込みコードを貼り付けます。
[ビデオを挿入] をクリックします。
編集が終了したら、[保存] をクリックして編集中のアイテムの変更を保存します。
リッチテキストエディタでオーディオファイルを挿入する
リッチテキストエディタを使用して、ブログ記事、ページ、商品説明、コレクションの説明にオーディオファイルを挿入または埋め込むことができます。
手順:
- 管理画面から [設定] > [ファイル] の順にクリックします。
- [ファイルをアップロード] をクリックして、ストアに挿入または埋め込むオーディオファイルをアップロードします。
- オンラインストアセクションで、オーディオファイルを掲載するページまたはブログ記事のリッチテキストエディタを開きます。
-
<div id="player"><audio controls="controls">をコピーし、リッチテキストエディタにコードを貼り付けて、ページにオーディオプレーヤーを埋め込みます。 -
以下のコードをコピーします。
-
<source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
-
リッチテキストエディタでオーディオプレーヤーのコードの後にこのコードを貼り付け、Shopifyへのオーディオファイルのアップロード時に作成されたURLと
https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3を置き換えます。オーディオファイルのURLは、ファイルページでいつでも参照できます。[保存] をクリックします。
[表示する] をクリックして、オーディオファイルが正しく再生されることを確認します。
リッチテキストエディタで内部コメントを追加または削除する
ストアに公開しない内部テキストに、コメントタグの<!--と-->を使用することができます。
手順:
リッチテキストエディタで、HTMLを表示するボタンをクリックします。
内部コメントを追加するには、非表示にしておきたいテキストを
<!--と-->で囲みます。例:<!--yourtext-->[保存] をクリックします。
コメントタグで囲まれたHTMLタグは、内部テキストとして保存されます。これらのHTMLタグを正常に機能させるには、囲んでいるコメントタグの<!--と-->を削除する必要があります。