画像の挿入・変更
ページ内に画像の挿入し、挿入した画像にリンクの挿入、ロールオーバーの設定をすることができます。
画像を挿入する（コンテンツパーツを使用）
コンテンツパーツ機能を使ってページ内に新しく文字や画像を追加します。
1
編集したいページを編集モードで表示します。
2
画像を追加したいコンテンツパーツの枠線の右上に表示される[メニュー]ボタンをタップします。
3
コンテンツパーツメニューが表示されますので、[追加]ボタンをタップします。
4
コンテンツパーツ追加画面が表示されますので、カテゴリーの「画像」をタップしてコンテンツパーツ一覧を表示します。
5
表示されたコンテンツパーツの一覧から使いたいパーツをタップして、パーツの下に表示される[追加]ボタンをタップすると、ページ内に配置されます。
6
配置されたパーツの[メニュー]ボタンをタップして、編集したい画像の[編集]ボタンをタップすると、サーバーブラウザーが立ち上がりますので、挿入したい画像を選択して完了です。
編集画面で画像を挿入する
1
対象のパーツの[メニュー]ボタンをタップして、編集したい箇所の[編集]ボタンをタップします。
2
編集画面で画像を挿入したい位置にカーソルを置き、ツールバーの[画像の挿入／編集]ボタンをタップします。
- ツールバーが表示される編集画面（エディタ）の操作になりますので、画像やタイトルのコンテンツパーツでは場合はこの操作は行えません。
3
“イメージプロパティ”の設定画面が表示されますので、[サーバーブラウザー]ボタンをタップして、サーバーブラウザーを立ち上げます。
4
サーバーブラウザーから挿入したい画像を選択します。
5
設定画面の「URL」と「幅」、「高さ」に数値が自動的に入力され、プレビューが表示されます。
6
必要に応じて下記の設定を行います。
| 代替テキスト | 画像の説明等を入力します。画像が表示されない場合や、一部のブラウザで画像にオンマウスした際に表示されるポップヒントになります。 |
|---|---|
| 幅、高さ | 画像の表示サイズを任意で変更できます。(サーバーブラウザーにある元のファイルのサイズは変更されません。)比率がロックされている場合、幅か高さのいずれかを変更すると、縦横比を維持して拡大・縮小されますが、ロックが外れている場合は幅と高さをそれぞれ変更することができます。 また、[サイズリセット]ボタンを押すと、変更したサイズがリセットされ、元のファイルサイズが表示されます。 |
| ボーダー | 画像に枠線を表示します。 |
| 横間隔 | 画像の左右に間隔を設定します（ピクセル単位） |
| 縦間隔 | 画像の上下に間隔を設定します（ピクセル単位） |
| 行揃え | 画像とテキストの折り返しを設定します。 |
- ご利用のデザインテンプレートによって設定内容が反映されない場合があります。
7
画面右上の「保存」をタップして完了です。
画像を変更する
画像のコンテンツパーツは、編集操作（ダイレクト編集）を行って画像を変更します。
- 上記の「画像を挿入する（コンテンツパーツを使用）」の操作で挿入したコンテンツパーツの画像の場合は、画像のダイレクト編集が行えます。
1
対象のパーツの[メニュー]ボタンをタップして、編集したい画像の[編集]ボタンをタップすると、サーバーブラウザーが立ち上がります。
2
立ち上がったサーバーブラウザから変更したい画像を選択して挿入します。
3
画像の大きさはコンテンツパーツごとに設定された横幅に合わせて、自動的にリサイズされます。
- サーバーブラウザーにアップした元の画像の横幅がページ内に表示する画像の横幅より小さすぎると、画像がきれいに表示されない場合があります。
画像の設定を変更する
画像の説明（alt、title）や属性など、画像の設定を変更します。
- 上記の「画像を挿入する（コンテンツパーツを使用）」の操作で挿入したコンテンツパーツの画像の場合は、この画像設定が行えます。
1
対象のパーツの[メニュー]ボタンをタップして、変更したい画像の[画像設定]ボタンをタップします。
2
画像設定画面が表示されますので、各項目を変更します。
| 画像の説明（alt） | 画像の説明（alt属性）を入力します。 |
|---|---|
| 画像の説明（title） | 画像の説明（title属性）を入力します。 |
| name属性 | 画像のname属性を入力します。 |
| 画像サイズ |
画像サイズを入力します。
|
| 角丸 | 画像を角丸にするかどうか設定します。詳しい設定方法は「画像を装飾する（角丸・影）」を参照してください。 |
| ドロップシャドウ | 画像をドロップシャドウ付きにするかどうかを設定します。詳しい設定方法は「画像を装飾する（角丸・影）」を参照してください。 |
| リンク | 画像のリンク先、ターゲットを設定します。詳しい設定方法は「リンク先を変更する」を参照してください。 |
| ロールオーバー画像 | ロールオーバーの画像を設定します。詳しい設定方法は「ロールオーバーを設定する」を参照してください。 |
3
画面右上の「保存」をタップして完了です。
画像を装飾する（角丸・影）
画像に角丸や影（ドロップシャドウ）を設定すると、画像の印象をやわらかくしたり、立体感を持たせることができます。
設定内容はプレビューで確認しながら変更できるため、デザインに合わせて直感的に調整することができます。
1
対象のパーツの[メニュー]ボタンをタップして、変更したい画像の[画像設定]ボタンをタップします。
2
画像設定画面が表示されますので、《角丸》または《ドロップシャドウ》を設定します。
角丸
| 角丸 | 画像を角丸にするかどうか設定します。角丸にする場合は「あり」を選択し、表示される項目に角丸のサイズを半角数字で入力後、単位（pxまたは%）を選択します。 角丸の数値や単位を指定することで丸みの大きさの調整が可能です。画像プレビューで確認しながら調整を行ってください。 |
|---|
ドロップシャドウ
| ドロップシャドウ | 画像をドロップシャドウ付きにするかどうかを設定します。ドロップシャドウを付ける場合は「あり」を選択し、表示される項目から影の種類（方向）、ぼかし（半角数字）、色（カラーピッカーまたはカラーコード）をそれぞれ選択・入力します。 影の設定により画像を浮き上がらせるような表現が可能です。画像プレビューで確認しながら調整を行ってください。 |
|---|
3
画面右上の「保存」をタップして完了です。
リンク先を変更する
画像のリンクの設定では、リンク先のURLの設定や、画像をLightBoxもしくは別ウィンドウに原寸大で表示させることができます。
- 上記の「画像を挿入する（コンテンツパーツを使用）」の操作で挿入したコンテンツパーツの画像の場合は、この画像設定が行えます。
1
対象のパーツの[メニュー]ボタンをタップして、変更したい画像の[画像設定]ボタンをタップします。
2
画像設定画面が表示されますので、《リンク》を設定します。
| リンク |
この画像をクリックしたときに表示される内容を設定します。
|
|---|---|
| ターゲット |
リンク先が「サイト内リンク」または「URL」の場合に、リンクを開く方法（ターゲット）を設定します。
|
3
画面右上の「保存」をタップして完了です。
ロールオーバーを設定する
画像をバナーなどとして使用する場合、ロールオーバー画像を設定することができます。
- 上記の「画像を挿入する（コンテンツパーツを使用）」の操作で挿入したコンテンツパーツの画像の場合は、この画像設定が行えます。
1
対象のパーツの[メニュー]ボタンをタップして、変更したい画像の[画像設定]ボタンをタップします。
2
画像設定画面が表示されますので、《ロールオーバー画像》の[参照]ボタンをタップして、サーバーブラウザーからマウスを乗せた時に表示したい画像を選択します。
3
画面右上の「保存」をタップして完了です。
よくある質問
-
画像の編集（ダイレクト編集）を行ってもサーバーブラウザーが表示されません。
-
コンテンツパーツのダイレクト編集操作は、追加や変更時に選択したカテゴリーによって異なります。テキスト内に画像を挿入している場合、サーバーブラウザーは表示されません。そのため、画像のダイレクト編集を行う場合は、コンテンツパーツの追加・変更画面でカテゴリー「画像」を選択し、その後に該当するコンテンツパーツを選択して操作を行ってください。
-
画像設定ボタンが表示されません。
-
コンテンツパーツ内の画像の画像設定操作は、追加や変更時に選択したカテゴリーによって異なります。テキスト内に画像を挿入している場合、[画像設定]ボタンは表示されません。そのため、画像設定を行う場合は、コンテンツパーツの追加・変更画面でカテゴリー「画像」を選択し、その後に該当するコンテンツパーツを選択して操作を行ってください。