記事に内容を追加する
本文では、文章だけでなく、画像、商品、表、動画、吹き出しなどを追加できます。この記事では、追加できるまとまりを「ブロック」と呼びます。
内容を追加する2つの方法
半角の「/」を入力する
- 本文で新しい行を作ります。
- 行の先頭で半角の
/を入力します。 - 一覧が表示されるので、追加したい内容を選びます。
一覧は、上下の矢印キーで移動してEnterキーで確定できます。マウスで選んでも構いません。閉じるときはEscキーを押します。
名前の一部を続けて入力すると絞り込めます。たとえば /見出し や /吹き出し と入力します。
コードのブロックの中では、この一覧は表示されません。コードのブロックの外に新しい行を作ってから、もう一度お試しください。
挿入メニューから選ぶ
本文の右側に、ブロックの挿入メニューを表示できます。追加したい内容を押すと、カーソルのある位置に追加されます。
このメニューは、右側の目のアイコンで表示・非表示を切り替えられます。非表示にした場合は、上の「/」の方法で追加します。この設定はストア全体で記憶されます。
追加できる内容
「/」の一覧から追加できるのは、次の内容です。
| 内容 | おすすめの使い方 |
|---|---|
| 見出し 1〜5 | 話題が変わる場所に入れる |
| 太字 | 重要な言葉を目立たせる |
| 箇条書きリスト | 特徴や持ち物を短く並べる |
| 番号付きリスト | 手順を順番に見せる |
| コード | プログラムのコードをそのまま見せる |
| 引用 | 他の文章やお客様の声を引用する |
| 表を作成 | サイズや違いを比較する |
| 目次 | 長い記事の中を移動しやすくする |
| 2カラム / 3カラム | 画像と説明を横に並べる |
| 画像 | 商品の使用例や作業手順を見せる |
| 動画 | 文章だけでは伝わりにくい使い方を見せる |
| 商品を挿入 | 記事から1つの商品ページへ案内する |
| コレクションを挿入 | 関連商品をまとめて紹介する |
| コールアウト | 大切な条件や注意点を目立たせる |
| 吹き出し | スタッフの一言や補足を会話のように見せる |
挿入メニューには、これに加えて「斜体」「下線」「色」も並びます。
画像を追加する
- 画像を入れたい位置で「画像」を選びます。
- 開いた画面で、次のいずれかの方法を選びます。
- 画像のURLを入力して追加する
- 「File Upload」からパソコンの画像をアップロードする
- Shopifyにすでにある画像の一覧から選ぶ
- 画像の大きさと配置を確認します。
本文に画像ファイルを直接ドラッグしたり、貼り付けたりしても追加できます。この場合、画像はShopifyへ自動的にアップロードされます。
画像だけで内容を伝えず、画像の前後にも説明文を入れてください。
動画を追加する
- 動画を入れたい位置で「動画」を選びます。
- 開いた画面で、次のいずれかの方法を選びます。
- 動画ファイルのURLを入力する
- YouTubeのURLを入力する
- 「File Upload」からパソコンの動画をアップロードする
- Shopifyにすでにある動画の一覧から選ぶ
動画のアップロードには時間がかかることがあります。進み具合が表示されている間は、画面を閉じないでください。
商品を追加する
- 商品を入れたい行で「商品を挿入」を選びます。
- Shopifyの商品を選ぶ画面が開くので、掲載する商品を選びます。
- 商品名、画像、価格が入った案内が本文に追加されます。在庫がない商品には「売り切れ」が付きます。
- 表示を確認します。
下書きの商品、非表示の商品、アーカイブ済みの商品は選べません。先にShopify管理画面で商品を公開してください。
実際の見え方はテーマの設定によって変わります。公開前に必ずプレビューしてください。
コレクションを追加する
「コレクションを挿入」を使うと、Shopifyのコレクションに含まれる商品を、画像、商品名、価格付きでまとめて表示できます。
- コレクションを入れたい行で「コレクションを挿入」を選びます。
- Shopifyのコレクションを1つ選びます。
- 追加されたブロックの「コレクションブロックを編集する」を押します。
- 見出し、説明文、表示する商品数、パソコンとスマートフォンでの列数などを整え、「適用」を押します。
編集画面では、次の表示も変更できます。
- 商品画像の縦横比と形
- 商品の評価
- 表示上限を超えたときの「すべてを表示」リンク
- スマートフォンでの横スワイプ
商品情報はShopifyのコレクションから読み取られます。コレクションの商品や価格を変更したあとは、ストアの記事を開き、最新の内容が表示されていることを確認してください。
複数の商品を比較・紹介するときは「コレクションを挿入」、特定の商品だけを強く案内するときは「商品を挿入」を使います。
目次を追加する
「目次」を選ぶと、記事の見出しから目次が自動で作られます。あとから見出しを追加・変更すると、目次も自動で更新されます。
目次に並ぶのは「見出し 2」「見出し 3」「見出し 4」です。「見出し 1」と「見出し 5」は目次に入りません。目次に入れたい項目は、見出し 2〜4を使ってください。
対象の見出しがまだない場合は「見出しがまだありません」と表示されます。見出しを入れると表示されます。
内容の順番を変える・削除する
本文のブロックにマウスを重ねると、左側につまみが表示されます。
- つまみをドラッグすると、ブロックを上下に移動できます。
- つまみを押すとメニューが開き、「削除」でそのブロックを消せます。
- 吹き出しの場合は、画像を左右どちらに置くかもここで切り替えられます。
移動したあとは、前後の文章が自然につながっているか確認します。
高度な編集
挿入メニューの中の見出し、引用、コールアウト、吹き出しには、鉛筆のアイコンが付いています。これが「デザイン編集」で、そのブロックの見た目を変えられます。また、挿入メニューの一番下にある「カスタムブロックを追加」から、HTMLとCSSで独自のブロックを作れます。
これらの機能は有料プランでご利用いただけます。無料プランでは、使おうとしたときにご案内が表示されます。
カスタムブロックでは、HTMLのstyle属性を使えます。JavaScriptは使えません。HTMLに書いたLiquidの記述は処理されず、入力した文字がそのまま表示されます。
HTMLやCSSの知識が必要な機能です。ストアの表示が崩れる可能性があるため、わからない場合は使用しないでください。
出所がわからないコードを貼り付けないでください。公開前に、複製したテーマや非公開記事で確認してください。