見出し&テキストの活用方法

基本的なデザインを構成する上で、
一番利用するのが、「見出し」と「テキスト」。
直感的にデザインが変更でき、配置も思うまま。

あなたの商品・サービスのメッセージを魅力的なデザインへ変えていきましょう！

ウィジェットの選択と配置

画面左側に表示されているウィジェットの一覧から、「見出し」と「テキスト」の項目を探します。

「見出し」「テキスト」ドラッグ＆ドロップします。ドロップできる場所には、プレースホルダーが表示されます。

見出しの編集

配置した「見出し」ウィジェットをクリックすると、編集オプションが表示されます。
テキストの変更: 表示された入力フィールドに、変更したい見出しのテキストを入力します。既存のテキストを選択し、上書きすることも可能です。
スタイルの変更:
・見出しの種類 (ヘッダー): スタイルオプションから、見出しのレベル（例：H、H、Hなど）を選択できます。
　これにより、見出しの重要度やデザインが変わります。

・フォント: フォントの種類を変更できます。

・太字・斜体・取り消し線: テキストを強調するために、太字、斜体、取り消し線 を適用できます。

・そのほか文字サイズ、行の高さ（行間）色の変更

グローバルスタイルの適用: 見出しの基本スタイルはグローバルスタイルとして設定されており、一括で変更することも可能です。サイト内全てのテキストやカラーの統一ができます。

テキストの編集

配置した「テキスト」ウィジェットをクリックすると、編集オプションが表示されます。
テキストの入力・編集: 表示されたテキストエディタに、コンテンツのテキストを入力します。直接入力するだけでなく、既存のテキストを貼り付けることも可能です。
スタイルの変更:
・フォント: フォントの種類を変更できます。
・太字・斜体・取り消し線: テキストを強調するために、太字、斜体、取り消し線 を適用できます。
・箇条書き・番号付きリスト: テキストをリスト形式で表示できます。

・行の高さ: 複数行にわたるテキストの行間を調整できます。
・文字サイズ: 文字のサイズを調整できます。
・色の変更: ベーシックなグローバルカラーから選択したり、カラーコードを入力して独自の色を指定したりできます。

画像の挿入: テキストウィジェット内に画像を挿入することができます。

・編集画面で画像アイコンをクリックし、アップロードまたは既存の画像を選択します。
・挿入した画像のサイズ調整や配置（左寄せ、中央寄せなど）も可能です。
・画像を丸くしたり、少し傾けたりといった装飾もテキストウィジェット内で可能です5。

リンクの設定: テキストの一部にリンクを設定できます。
・リンクを設定したいテキストを選択し、リンクアイコンをクリックします。

・内部ページへのリンクはもちろん、「connected one」で作成した他のページへのスムーズな遷移も設定できます。
・外部リンクのURLを入力することも可能です。

配置と調整

配置した見出しとテキストウィジェットは、ドラッグ＆ドロップで自由に移動できます。
ウィジェットの幅は、ウィジェットの左右に表示されるハンドルをドラッグすることで調整できます。
見出しやテキストウィジェットを選択した際に表示される青い星のアイコンを操作することで、より細かな位置調整が可能です。横方向に表示される矢印アイコンでは、幅の調整ができます。

活用例

大きな広告やセクションのタイトルには、見出しウィジェットを使用します。
見出しの内容を詳細に説明する際には、テキストウィジェットを使用します。
商品やサービスを紹介するページでは、見出しで目を引き、テキストで詳細な情報を提供するという使い分けが効果的です。
テキスト内に画像を挿入することで、視覚的に訴求力の高いコンテンツを作成できます。
リンクを活用することで、関連情報への誘導をスムーズに行えます。

この手順書を参考に、「connected one」の見出しとテキストウィジェットを効果的に活用し、魅力的なメッセージを作成してください。実際に様々な設定を試してみることをお勧めします。

ウィジェット一覧

フリー画像素材の活用

注文概要の作成

ボタンの使い方

見出し&テキストの活用方法

画像の追加&設定方法

メニューを好きな場所に追加しよう！

フォームの使い方〜お問い合わせ、メルマガ、アンケートなど〜

クイズフォームの使い方

チェックアウトフォーム設定

カウントダウンタイマー機能を活用しよう！

ファイルマネージャー（アップロード&ダウンロード方法）

音声メディアを作ろう!

画像の埋め込み方法

スペーサー

プログレスバー

区切り線の設定

アコーディオン

更新日 09/04/2025