マルチデバイス･ホームページ･システム
テキストボックス操作マニュアル
2022.7. 19 第 1 版
マルチデバイス・ホームページシステム
テキストボックス操作マニュアル
テキストボックスについて ​1
テキストボックスとは？ ​1
テキストボックスを利用する ​1
テキストボックスの画面構成 ​2
各エリアの機能説明 ​3
ツールバー ​3
メインパネル ​4
操作の流れ ​4
ブロック ​5
レイアウトを組む [レイアウトブロック] ​7
タグ構造を確認する[レイヤーパネル] ​9
テキストや画像を追加する[コンテンツブロック] ​10
文章を入力する[テキスト] ​10
文字リンクを作る[リンクテキスト] ​11
画像を表示させる[画像] ​11
画像リンクを作る[リンク] ​12
ブロックの主な共通操作 ​12
見た目を変更する ​12
ブロックの移動 ​13
ブロックの削除 ​13
親ブロックを選択 ​13
スタイルパネル ​14
スタイルパネルの見かた ​14
大きさの変更を行う ​15
文字の見た目を変更する ​17
ブロックの見た目を変更する ​18
HTMLアイテムに反映させる ​20
- 21 -
テキストボックスについて
テキストボックスとは？
HTMLアイテムのタグを、ビジュアルエディタを利用して作成・編集できる機能です。
コーディングを必要とせず、ドラッグ＆ドロップでパソコンからスマートフォンまで、レスポンシブ・ウェブ
デザインに対応したレイアウトを手軽に実現できます。
テキストや画像、リンクなどの要素を配置し、文字色や背景色を簡単に変更できるほか、CSSの知識があれ
ば、さらに詳細な設定することでオリジナリティ溢れるコンテンツ作りが可能となります。
テキストボックスを利用する
[ページ編集]からHTMLアイテムの[編集]をクリックして編集フォームを開きます。
編集フォームの[テキストボックス（編集）]をクリックすると、テキストボックスが別タブで起動します。
- 1 -
テキストボックスの画面構成
テキストボックスは、大きく分けると[キャンバス]、[ツールバー]、[メインパネル]の３つで構成されていま
す。
名称
説明
❶ ​キャンバス
コンテンツを作成するためのメインの領域です。
❷ ​ツールバー
プレビュー、コードビューなど、さまざまな機能を提供します。
➌ ​メインパネル
キャンバスに追加する要素（ブロック）を管理する[ブロックパネル]、追加したブロックの見た目
を調整する[スタイルパネル]、タグ構造を階層表示する[レイヤーパネル]があります。
- 2 -
各エリアの機能説明
ツールバー
名称
説明
❶​ ​表示デバイス切り替え
アイコンをクリックすると、キャンバス幅が自動で調整され、各デバイスでの表示を確認するこ
とができます。左から[PC][タブレット][スマホ]です。通常はPCが選択されています。
❷​ 背景色の切り替え
アイコンをクリックすると、キャンバスの色を変更することができます。
左から[白][黒]です。通常は白が選択されています。
➌​ 線の表示
キャンバス上に設置した要素に枠線がつき、構造をとらえやすくなります。
クリックで、表示 / 非表示を切り替えることができます。
➍​ プレビュー
[ツールバー][メインパネル]を非表示にし、HTMLアイテムに反映される内容を画面上で確認できま
す。
❺​ アイテムに反映
キャンバスで編集していた内容を、HTMLアイテムの入力フォームに反映させ、テキストボックス
を終了します。
❻​ 戻る
ひとつ前の状態に戻ることができます。
❼​ 進む
[​❻​ 戻る]を行った際に、もとの状態へ進めます。
❽​ タグ表示
キャンバスで組み立てたデザインを構成するHTMLタグを確認することができます。
また、表示されているタグを自由に編集し、[import]ボタンをクリックしてキャンバスに反映させ
ることができます。※この画面で編集を行う場合、入力済みのタグを壊さないように気を付けま
しょう。
❾​ 削除
キャンバス上のすべてのデータを消去します。
- 3 -
メインパネル
メインパネルは、[スタイルパネル][レイヤーパネル][ブロックパネル]の3つから構成されます。
スタイルパネル
要素の見た目を調整します。
レイヤーパネル
キャンバスにある要素のHTMLタ
グ構造を階層で表示します。
ブロックパネル
キャンバスに追加するための要素
（ブロック）が配置されていま
す。
操作の流れ
ブロックパネルの「レイアウトブロック」を使って
レイアウトを組む
（参照　P.7～ ）
（参照　P.10～ ）
スタイルパネルを使って
見た目を整える
（参照　P.14～ ）
HTMLアイテムに反映させる
（参照　P.20 ）
- 4 -
ブロック
HTMLタグの１つ、または複数のタグの集まりをブロックと呼んでいます。ブロックをキャンバスへ配置する
だけで、HTMLのタグが自動的に作成されます。ブロックには、レイアウトの枠組みを作るための[レイアウト
ブロック]と、実際にテキストや画像、リンクなどの要素を表示するための[コンテンツブロック]、二種類があ
ります。また、[テンプレート]は、レイアウトブロックを使って、基本的なカラムレイアウトを組んだもので
す。
基本 [レイアウトブロック]
名称
説明
❶​ ​1カラム
レイアウトブロックを1列で表示します。
❷​ ​2カラム
レイアウトブロックを2列で表示します。
ブロックを横に2つ並べたレイアウトをする際に使います。
➌​ ​3カラム
レイアウトブロックを3列で表示します。
ブロックを横に3つ並べたレイアウトをする際に使います。
基本 [コンテンツブロック]
名称
説明
❹​ テキスト
文章を表示するためのコンテンツブロックです。
❺​ テキストリンク
リンク文字を作るためのコンテンツブロックです。
❻​ リンク
画像リンクを作るためのブロックです。
この中に[​❼​画像ブロック]を設置して使います。
❼​ 画像
画像を表示するためのコンテンツブロックです。
❽​ 横線
幅いっぱいにひろがる横線を表示するコンテンツブロックです。
項目や内容が変わるタイミングなどで使うと、見やすいレイアウトになります。
❾​改行
一行分の余白を表示するコンテンツブロックです。
項目や内容が変わるタイミングなどで使うと、見やすいレイアウトになります。
- 5 -
テンプレート
名称
説明
❿​ ​左1・右2
2カラムをベースに、右側のcellに1カラムを2つ挿入したレイアウトです。
左側にブロックを一つ設置し、右側にブロックを二段重ねたレイアウトを実現できます。
⓫​ ​上2・右1
２カラムをベースに、左側のcellに1カラムを2つ挿入したレイアウトです。
左側にブロックを二段重ね、右側にブロックを1つ設置したレイアウトを実現できます。
⓬​ ​上1・下2
1行目は1カラム、2行目は2カラムのレイアウトです。
2行のうち、上段ではブロックを1つ設置し、下段ではブロックを横に2つ並べたレイアウトを実現
できます。
⓭​ 上2・下1
1行目は2カラム、２行目は1カラムのレイアウトです。
2行のうち、上段ではブロックを横に2つ並べ、下段ではブロックを1つ設置したレイアウトを実現
できます。
- 6 -
レイアウトを組む [レイアウトブロック]
テキストや画像などの要素を設置するまえに、まずはこれから作ろうとしているコンテンツのレイアウトを組
みます。
レイアウトブロックは、レスポンシブ・ウェブデザインに対応しているので、タブレット・スマホで見た際、
各端末にあわせて表示が最適化されます。
▼2カラム　一行の中で、コンテンツを２つ並べることができます
▼​PCで閲覧した2カラム　
▼スマホ・タブレットで閲覧した2カラム
▼3カラム　一行の中で、コンテンツを3つ並べることができます
▼PCで閲覧した3カラム
▼スマホ・タブレットで閲覧した3カラム
- 7 -
[ブロックパネル]から[ブロック]をドラッグしてキャンバスへドロップすることで追加できます。
下図のようなレイアウトを組んでみます。
▼まず[1カラム]をキャンバスへ追加します。その下に、[3カラム]を追加します。
設置済みの[レイアウトブロック]の中へブロックをドラッグすると、[レイアウトブロック]の枠がオレンジ色に
なります。その場でドロップすると、オレンジ色の枠がついた[レイアウトブロック]内にブロックが追加されま
す。
▼[3カラム]の左のカラムの中に、[1カラム]を３行になるよう３つ追加します。
▼3カラムの他のCellにも、同じように1カラムを追加して完成です。
　
- 8 -
タグ構造を確認する[レイヤーパネル]
[レイヤーパネル]では、選択中のブロックを全体から見たときに、どの位置にあるかを把握することができま
す。また、選択中のブロックを囲むブロック（親ブロック）がどれなのか…などもわかりやすくなります。
キャンバス上で任意のブロックを選択すると、レイヤーパネル側で選択したブロックの位置がハイライトされ
ます。また、レイヤーパネルから、キャンバス上のブロックを選択することも可能です。
レイヤーパネル内で表示されている一つ一つの層を「レイ
ヤー」と呼びます。
名称
説明
❶​ ​ブロックの表示
クリックで、ブロックの表示 / 非表示を切り替えることができます。
❷​ ​ブロックの移動
十字キーマークにカーソルを当てます。
そこから移動したい場所までドラッグ＆ドロップでレイヤーの位置を変更することができます。
また、十字キーマークの横にある小さな数字は、その下にブロックをいくつ包んでいるかを表し
ています。
- 9 -
テキストや画像を追加する[コンテンツブロック]
レイアウトを組むことができたら、次は、要素（ホームページに掲載したい内容）を入れ込むための[コンテン
ツブロック]を追加していきます。
設置済みの[レイアウトブロック]の中へ[コンテンツブロック]をドラッグすると、レイアウトブロックの枠がオ
レンジ色になります。その場でドロップすると、オレンジ色の枠がついたレイアウトブロック内にコンテンツ
ブロックが追加されます。
文章を入力する[テキスト]
コンテンツブロックを設置後、ダブルクリックでテキスト入力が可能になります。
また、この時表示されるテキストメニューから選択中のテキストブロック内の文字装飾やリンク設定を行うこ
とができます。
手順は次の通りです。
(1)ダブルクリックをし、任意のテキストをドラッグで選択します。
(2)テキストメニューから適用させたい項目をクリックします。
名称
説明
❶​ ​太字
文字を太くします。
❷​ ​斜体
文字を斜体にします。（日本語には適用されません。）
➌​ ​下線
文字に下線をつけます。
❹​ 打ち消し線
文字に打ち消し線をつけます。
❺ ​スパンで囲む
文字をspanタグで囲みます。文字の一部だけスタイルを適用したい場合に使います。spanで囲ん
だ箇所は、ピンポイントで選択・装飾できるようになります。たとえば、文中のキーワードを赤
字にしたり、太字にすることが可能になります。
- 10 -
❻​ ​リンク
文字をリンクにします。
URLの入力は、リンク文字を選択した状態で[スタイルパネル]の[プロパティ]から行います。
「タイトル」にはリンク先のページの名前や簡単な説明、「URL」には、リンク先のURLを入力
します。
「Target」では、リンクをクリックした際のページの開き方を指定することができます。
This window…同じウィンドウ内でページを移動、表示します。
New window…新しい画面が立ち上がり、別窓で表示します。
文字リンクを作る[リンクテキスト]
コンテンツブロックを設置後、ダブルクリックでテキスト入力が可能になります。
URLの入力は、リンクにした文字を選択した状態で[スタイルパネル]の[プロパティ]から行います。
手順は、[テキスト - ​❻​リンク]と同じです。
また、この時表示されるテキストメニューから選択中のテキストブロック内の文字装飾やリンク設定を行うこ
とができます。各項目の機能は[テキスト - ​❶​~​❻​]と同じです。
画像を表示させる[画像]
コンテンツブロックを設置後、画像の選択画面が出現します。
❶​の一覧の中から任意の画像をダブルクリックで選択してください。ここでは、ホームページのブログ投稿画
面からアップロードした画像が表示されています。
画像を新規で追加する場合は、​❷​の[ファイル選択]をクリックします。
- 11 -
画像リンクを作る[リンク]
中に入れたものがリンクになる、空の箱です。
この中に、画像ブロックを設置して使用します。URLの入力手順は、[テキスト - ​❻​リンク]と同じです。
ブロックの主な共通操作
見た目を変更する
操作したいブロックをクリックすると、枠が青色になります。
この状態のとき、メインパネルに[スタイルパネル]が表示されましたでしょうか。この[スタイルパネル]で、選
択中のブロックの装飾を行います。詳しくはP.18をご覧ください。
- 12 -
ブロックの移動
青枠の右上に表示される[十字キー]マークにカーソルを当てます。
そこから移動したい場所までドラッグ＆ドロップします。
ブロックの削除
青枠の右上に表示される[ゴミ箱]をクリックします。
親ブロックを選択
青枠の右上に表示される[上向きの矢印]をクリックします。
選択中のブロックを囲んでいるブロックを選択します。
- 13 -
スタイルパネル
「スタイルパネル」は、キャンバスに設置したコンテンツブロックの見た目の変更や修飾を行う機能がまとめ
られたパネルです。任意のブロックを選択した状態でパネルを操作します。
スタイルパネルの見かた
プロパティ＞タイトルを設定することで、ホームページ上でカーソルが要素に触れたときに、吹き出しを表示
することができます。画像やリンク先の補足などに使えます。
選択中のブロックの表示形式を変更することができます。
表示形式の変更について理解をすると、レイアウトの幅が広がります。
名称
説明
❶ ​float
ブロックの配置位置を変更する。
❷ ​表示形式
ブロックの表示形式を変更
block:ブロックが横いっぱいに広がる。複数設置すると、ブロックの前後には自動で改行が入り、
縦に並ぶ。
inline:ブロックは自身の大きさで表示され、複数設置すると、横に並んでいきます。幅・高さを指
定できません。左右の余白は指定可能です。
inline-block:ブロックを複数設置すると、横に並んでいきます。幅・高さ・余白の指定が可能で
す。
- 14 -
大きさの変更を行う
選択中のブロックの大きさ（高さ/横幅）や、ブロックの外側・
内側の余白（上/右/下/左）の変更を行います。
名称
説明
❶ ​幅
ブロックの横幅を変更します。​使用できる単位：%、px
❷ ​高さ
ブロックの高さを変更します。​使用できる単位：%、px
➌ ​最大幅
横幅の最大値を定めます。
この値を決めることで、どんな端末・ブラウザで見ても、これよりは横幅が大きくならなくする
ことができます。
❹ ​最小高さ
高さの最低値を定めます。
この値を決めることで、どんな端末・ブラウザで見ても、これよりは高さが小さくならなくする
ことができます。
❺ ​外側の余白
ブロックの外側に余白をつけます。
上：上側の余白
右：右側の余白
下：下側の余白
左：左側の余白
❻ ​内側の余白
ブロックの内側に余白をつけます。
上：上側の余白
右：右側の余白
下：下側の余白
左：左側の余白
- 15 -
ブロックを選択した際に、青枠上に​□​（四角いマーク）が出現します。
この​□​をドラッグすることで、自由に幅・高さを調整することが可能です。
　　
- 16 -
文字の見た目を変更する
文字の大きさ・文字の色・行の高さ・揃え位置・装飾の変更を
行います。
名称
説明
❶ ​フォントサイズ
文字の大きさを変更します。　​使用できる単位：px、em、rem、％
❷ ​フォントの太さ
文字を太くします。
初期値の「Normal」をクリックすると「Bold」に切り替えることができます。[Weight]を「Bold」
にすることで、選択したブロック内の文字が太くなります。
➌ ​フォントの色
文字の色を変更します。
初期値の「black」をクリックすると文字入力が可能になり、カラーコードを指定することができ
ます。また、右側のカラーパネルから[カラーピッカー]を開き、任意の色を設定することも
可能です。
❹ ​行間隔
一行の高さを変更します。　​使用できる単位：px、em、rem、％
❺ ​配置
文字の揃え位置を変更する
❻ ​文字飾り
文字の装飾を行う
➐​ ​文字の影
文字に影を付ける　​使用できる単位：px
水平方向の距離​：影の横位置を指定します。 正の値を指定すると
右へ、負の値を指定すると左へ影が移動します。
垂直方向の距離​：影の縦位置を指定します。 正の値を指定すると
下へ、負の値を指定すると上へ影が移動します。
ぼかし具合​：影のぼかし具合を指定します。
影の色​：初期値の「black」をクリックすると文字入力が可能にな
り、カラーコードを指定することができます。また、右側のカラー
パネルから[カラーピッカー]を開き、任意の色を設定することも可
能です。
- 17 -
ブロックの見た目を変更する
ブロックに対しての修飾を行います。
名称
説明
❶ ​透明度
ブロックの透明度を指定します。
透明度は、0.0（完全に透明）～1（完全に不透明）の数値で指定します。
スライダーを移動、または初期値の「1」をクリックで数値入力が可能です。
❷ ​背景色
ブロック内の背景色を変更します。
初期値の「black」をクリックすると文字入力が可能になり、カラーコードを指定することができ
ます。
また、右側のカラーパネルから[カラーピッカー]を開き、任意の色を設定することも可能です。
➌​ 枠線の角丸
ブロックにつけた枠線の角を丸くします。
左上：​左上の角
右上：​右上の角
左下：​左下の角
右下：​右下の角
使用できる単位：px、%
- 18 -
❹ ​枠線
ブロックに枠線をつけます。
枠線の太さ：​線の太さを変更します。
枠線の種類：​線の種類を選択します。
（solid‥実線 / dotted‥点線 / dashed‥破線）
線の色：​線の色を変更します。
初期値の「black」をクリックすると文字入力が可能になり、カラーコードを指定することができ
ます。また、右側のカラーパネルから[カラーピッカー]を開き、任意の色を設定することも可能で
す。
❺ ​影
ブロックに影をつけます。　​使用できる単位：px
水平方向の距離：​影の横位置を指定します。 正の値を指
定すると右へ、負の値を指定すると左へ影が移動します。
垂直方向の距離：​影の縦位置を指定します。 正の値を指
定すると下へ、負の値を指定すると上へ影が移動します。
ぼかし具合：​影のぼかし具合を指定します。
影の幅：​影の幅を拡張します。
影の色：​初期値の「black」をクリックすると文字入力が
可能になり、カラーコードを指定することができます。ま
た、右側のカラーパネルから[カラーピッカー]を開き、任
意の色を設定することも可能です。
影の種類：​影の種類を指定します。
Outside‥ブロックの外側に影を表示
Inside‥ブロックの内側に影を表示
❻ ​背景画像
ブロック内の背景に画像を設置します。　
「images」をクリックし、画像を選択後、表示の設定を
行います。
背景画像の繰り返し：​画像の繰り返し設定を選択しま
す。
repeat‥繰り返し表示
repeat-x‥横方向に繰り返し表示
repeat-y‥縦方向に繰り返し表示
no-repeat‥1回だけ表示
背景画像の位置：​ブロック内のどこを基準に画像を設置
するかの設定を行います。
背景画像の表示方法：​画面をスクロールしたときの画像
の動きの設定を行います。
scroll‥背景画像も一緒にスクロールする
fixed‥画面をスクロールしても、背景が固定
背景画像の寸法：​背景に設置した画像のサイズの設定を
行います。
cover‥縦横比を保持して、表示領域全体を覆うように
背景画像を表示する。
contain‥縦横比を保持して、表示領域に収まるように背景画像を表示する。
- 19 -
HTMLアイテムに反映させる
完成したらHTMLアイテムに反映させ、保存して終了します。
ツールバーの[アイテムに反映]をクリックしてHTMLアイテムの編集フォームへHTMLタグを反映します。
別タブで開いていた、HTMLアイテムの編集フォームへ戻り「登録」ボタンをクリックして保存し編集を終了
します。
テーマのCSSをカスタマイズして利用している場合など、テキストボックスのエディタ上の表示とサイトの表
示が異なることがあります。編集が完了したら、実際のホームページを確認してください。
- 20 -
推奨動作環境
以下の環境を推奨しております。
■ 商標について
※｢Windows｣｢Microsoft Edge｣は、Microsoft Corporationの米国及びその他の国における商標または登録商標です。
※｢Google Chrome｣｢Android｣は、Google Inc.の登録商標です。
※ その他、本誌に記載されている会社名、各製品名は、一般に各開発メーカーの登録商標または商標です。 なお、本文では ™ 、 ® は明記していません。
PC
・ Microsoft Edge 最新版
・ Google Chrome 最新版