画像の挿入・変更画像の挿入・変更

ページ内に画像の挿入し、挿入した画像にリンクの挿入、ロールオーバーの設定をすることができます。

画像を挿入する(コンテンツパーツを使用)

コンテンツパーツ機能を使ってページ内に新しく文字や画像を追加します。

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
画面右上の「保存」をタップして完了です。

リンク先を変更する

画像のリンクの設定では、リンク先のURLの設定や、画像をLightBoxもしくは別ウィンドウに原寸大で表示させることができます。

  • 上記の「画像を挿入する(コンテンツパーツを使用)」の操作で挿入したコンテンツパーツの画像の場合は、この画像設定が行えます。

1
対象のパーツの[メニュー]ボタンをタップして、変更したい画像の[画像設定]ボタンをタップします。

2
画像設定画面が表示されますので、《リンク》を設定します。

リンク
  • 「なし」・・・通常はなしに設定されています。リンクを解除したい場合もこちらにチェックを入れてください。
  • 「原寸画像をLightBoxで表示」・・・クリックすると、LightBoxでサーバーブラウザに保存されているサイズでこの画像を表示します。
  • 「画像をLightBox2で表示」・・・クリックすると、LightBox2でサーバーブラウザーに保存されている画像をディスプレイサイズに最適化して表示します。(レスポンシブ対応)
  • 「原寸画像を別ウインドウで表示」・・・クリックすると、別ウィンドウでサーバーブラウザに保存されているサイズでこの画像を表示します。
  • 「URL」・・・クリックすると入力したURLを表示します。「ターゲット」では同じウィンドウでリンク先を表示するか、別のウィンドウで表示するかを指定することができます。

3
画面右上の「保存」をタップして完了です。

ロールオーバーを設定する

画像をバナーなどとして使用する場合、ロールオーバー画像を設定することができます。

  • 上記の「画像を挿入する(コンテンツパーツを使用)」の操作で挿入したコンテンツパーツの画像の場合は、この画像設定が行えます。

1
対象のパーツの[メニュー]ボタンをタップして、変更したい画像の[画像設定]ボタンをタップします。

2
画像設定画面が表示されますので、《ロールオーバー画像》の[参照]ボタンをタップして、サーバーブラウザーからマウスを乗せた時に表示したい画像を選択します。

3
画面右上の「保存」をタップして完了です。

よくある質問

画像の編集(ダイレクト編集)を行ってもサーバーブラウザーが表示されません。

コンテンツパーツのダイレクト編集操作は、追加や変更時に選択したカテゴリーによって異なります。テキスト内に画像を挿入している場合、サーバーブラウザーは表示されません。そのため、画像のダイレクト編集を行う場合は、コンテンツパーツの追加・変更画面でカテゴリー「画像」を選択し、その後に該当するコンテンツパーツを選択して操作を行ってください。

画像設定ボタンが表示されません。

コンテンツパーツ内の画像の画像設定操作は、追加や変更時に選択したカテゴリーによって異なります。テキスト内に画像を挿入している場合、[画像設定]ボタンは表示されません。そのため、画像設定を行う場合は、コンテンツパーツの追加・変更画面でカテゴリー「画像」を選択し、その後に該当するコンテンツパーツを選択して操作を行ってください。

ブログ内検索