要素 – テキスト
作成対象：
- 初心者
- 中級
- ユーザー
テキスト コンテンツタイプを使用すると、Page Builder ステージに WYSIWYG （「What You See Is What You Get」）エディターを含むテキストコンテナを追加できます。 また、エディターツールバーからテキストにリンク、画像、 変数およびウィジェットを追加できます。
NOTEテキストエディターツール
テキストエディターには、ステージから直接アクセスすることも、設定ページからアクセスすることもできます。 ステージに直接加えられた変更は、自動的に保存されます。 詳しくは、 エディターの使用を参照してください。
テキストコンテナツールボックス
NOTEテキストを追加
-
Page Builder パネルで Elements を展開し、Text プレースホルダーをステージ上の行、列またはタブセットにドラッグします。
-
必要に応じて、エディターを使用してテキストの入力や書式設定を行います。
詳しくは、 エディターの使用を参照してください。
リンクの作成
エディターの「リンクを挿入」ボタンを使用すると、ギャラリー内の画像にハイパーリンクを簡単に追加できます。 ただし、事前に URL があれば、テキスト内にインラインリンクを作成する場合にも使用できます。 ウィジェットボタンとは異なり、「リンクを挿入/編集」ボタンは、ストアのページ、製品、カテゴリには統合されません。
電話番号またはメールのリンクを作成するには、 カスタム変数の追加を参照してください。
-
ストアフロントで、リンクのターゲットにするページに移動し、リンク情報をコピーします。
完全修飾 URL か、ストアドメインへの参照を省略する相対 URL のいずれかを使用できます。
完全な URL -
https://mystore.com/women/tops-women/tees-women.html相対 URL -
../women/tops-women/tees-women.html -
エディタースペースでテキストを選択し、エディターツールバーの リンクを挿入/編集 （
-
URL：準備した相対リンクを入力します。
-
Target を
Noneに設定します。この設定の場合、ページは新しいタブを開かずに同じブラウザーウィンドウで開きます。
-
Title には、
Shop Teesと入力します。Titleリンク属性は、一部のブラウザーでツールヒントとして使用されます。 -
リンクを保存して Page Builder ワークスペースに戻るには、「OK」をクリックします。
画像の挿入
-
画像を挿入するテキスト内の位置にカーソルを置きます。
-
エディターツールバーの 画像を挿入/編集 （
-
Source：検索アイコンをクリックし、メディア ストレージを使用して画像を検索および選択します。
-
Image Description：画像の説明テキストを入力します。
このテキストは、画像の
altリンク属性に設定され、一部のブラウザーでアクセシビリティのために使用されます。 -
ページ上の画像のレンダリングに使用する幅と高さの Dimensions をピクセル単位で入力します。
画像の縦横比を自動的に維持するには、「Constrain proportions」チェックボックスをオンのままにします。
-
画像を挿入して Page Builder ワークスペースに戻るには、[OK] をクリックします。
テキスト設定の変更
-
テキストコンテナにカーソルを合わせてツールボックスを表示し、設定 （
NOTEテキストコンテナは別のコンテナ内に密にネストされているので、正しいツールボックスがあることを確認してください。 -
必要に応じてコンテンツを更新します。
-
必要に応じて、Advanced 設定を更新します。
-
親コンテナ内のテキストの位置を制御するには、Alignment のいずれかを選択します。
オプション説明Default現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。Left親コンテナの左罫線に沿ってリストを配置します。指定したパディングはすべて許可されます。Center親コンテナの中央にリストを揃えます。指定したパディングに対する許容値を使用します。Right親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。 -
テキストコンテナの 4 つの辺すべてに適用する Border スタイルを設定します。
オプション説明Default関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。Noneコンテナの境界線の表示はしません。Dottedコンテナの境界線は点線で表示されます。Dashedコンテナの境界線は破線で表示されます。Solidコンテナの境界線は実線で表示されます。Doubleコンテナの境界線は二重線で表示されます。Grooveコンテナの境界線は溝付き線で表示されます。Ridgeコンテナの境界線は、境界線として表示されます。Insetコンテナの境界線は、インセットされた線として表示されます。Outsetコンテナの境界線は、先頭行として表示されます。 -
None以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。オプション説明Border Color見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。Border Width境界線の幅のピクセル数を入力します。Border Radiusピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。 -
（オプション）コンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。
複数のクラス名はスペースで区切ります。
-
テキストコンテナの外側の余白と内側のパディングを決定する Margins and Padding の値をピクセル単位で入力します。
対応する値を図に入力します。
コンテナ領域説明Marginsコンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション：Top/Right/Bottom/LeftPaddingコンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション：Top/Right/Bottom/Left
-
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。