Shopifyでは、商品登録時やブログ記事、ページ作成の際などに、詳細を入力する欄である「コンテンツ」があります。
今回は、この「コンテンツ」に入力する際に使用できる要素について紹介します。
コンテンツ入力で使える要素
コンテンツ入力で使える要素は、商品登録時とブログ記事作成時・ページ作成時で少し表示が違います。
しかし、使える要素はほとんど同じであるため、一括して紹介させていただきます。
それぞれの「コンテンツ」入力欄は以下の通りです。
商品登録時の画面↑
ブログ記事とページ作成時の画面↑
※商品登録の画面では「説明」という名前になっています。
画像の赤枠で囲っている部分がどのような機能なのかを順番にご紹介します。
書式設定（見出し）
商品登録画面の「標準」、ブログ記事とページ作成画面の「A」と書いてある欄は、入力した文字を見出しに変更することができます。
見出しを設定すると、長文を入力する際に読みやすくなります。
また、検索エンジンが見出しの文章を認識して、検索結果に反映するのでSEO対策としても有効です。
太字
どの入力画面にも「B」と表示されている欄は、文字を太くする機能です。
文章の一部を強調したいときなどに使用します。
斜体
太字の横にある「I」の欄が、文字を倒して斜体にする機能です。この機能は日本語で設定しても変化がわかりづらくなっています。
アルファベットであれば、わかりやすく斜体に変更されます。
下線
「U」の下に線が引かれている欄が、選択した文字の下に線を引く機能です。
こちらも何か強調したいときに使用します。
文字色
「A」の下に線が引かれているような欄は、文字の色を変更するボタンです。
ボタンをクリックすると文字の色を選択できます。カラーピッカーやカラーコードで色の指定ができます。
配置
横線が4本と下向きの矢印がある欄が、文章の配置を変更する機能です。
配置は・左揃え・中央揃え・右揃えの3つから設定できます。
リンク
鎖のようなイラストのボタンがリンクの機能です。
URLなどを記載するときに、リンクされていることが分かるようにできる機能です。
リンクで飛ばしたい文字を選択すると、リンクボタンがクリックできるようになるので、クリックして設定します。
画像追加
イラストマークをクリックすると画像の追加ができます。
画像追加をクリックすると、画像のアップロードなどが選択できる画面に切り替わります。
商品登録の画像追加と同じように操作をすれば追加できるので、こちらでは説明を割愛します。
動画追加
商品登録画面は再生マーク、ブログ記事・ページ作成の画面はカメラのマークのボタンが動画を追加する機能です。
この機能を使うと、文章の中に動画も入れ込むことができます。
動画を追加するためには、まず管理画面の「コンテンツ」＞「ファイル」を開き、動画ファイルをアップロードします。
アップロードが完了したら、「リンク」の欄の鎖マークをクリックし、リンクをコピーします。
続いて、動画を挿入したい編集画面に移り、「動画を挿入」ボタンをクリックすると、スニペットを入力する欄が表示されます。
ここに先ほどコピーしたリンクを貼り付けます。このとき、コードも一緒に入力する必要があります。
使用するコードの例を以下に記載します。
<video controls style="max-width: 100%; height: auto;">
<source src="リンクを貼付" type="video/mp4">
</video>
このコードの「リンクを貼付」の部分に、先ほどコピーしたリンクを貼り付けてください。
貼り付けが正しくできれば、以下のように入力欄の中に動画が表示されます。
リスト
リストには2種類あり、「箇条書きリスト」と「番号付きリスト」が追加できます。
ブログ記事・ページ作成画面では、左の方にボタンがあり、商品登録画面では右の方の「…」ボタンをクリックして表示させます。
それぞれでリストを使って入力したときのイメージは画像の通りです。
↑ブログ記事作成画面
↑商品登録画面
アウトデント/インデント
アウトデント/インデントは、選択した文章のブロックを左右に移動させる機能です。
移動させたい文章にカーソルを置き、アウトデント/インデントのボタンをクリックすると、少しずつ選択した方向に移動します。
表の挿入
カレンダーのようなイラストのボタンが、表を挿入する機能です。
ブログ記事・ページ作成画面では右のほうに表示されています。
商品登録画面では、「…」ボタンをクリックすると表示されます。
最初は、いちばん上の「表を挿入」しかクリックができませんが、表を挿入すると、列や行の挿入が可能になります。
以上がコンテンツの入力欄で使える要素でした。
まとめ
今回は、コンテンツ入力欄で使える要素についてご紹介しました。
様々な機能が使えるので、見やすいページにするために適宜使えるようにしましょう。