ホーム » 操作マニュアル » 編集方法 » 画像の挿入・編集

画像の挿入・編集

 

本ページでは以下について説明しています。

画像の挿入/編集画面について

「画像の挿入/編集」アイコンをクリックすると「画像の挿入/編集」画面が開きます。

一般タブ

画像に関する一般的な情報を設定出来ます。

画像の挿入ポップアップウィンドウ


画像URL
画像のURLを入力します。
URLを直接入力するか、右側にある「参照」ボタンからサムネイルを見ながら画像を検索することが出来ます。
参照ボタンから画像を検索する場合はこちらをご覧ください。
画像の説明
画像の説明文を挿入します。
タイトル
画像のタイトルを挿入します。
プレビュー
画像を選択すると、実際に挿入される画像が表示されます。

表示タブ

画像の表示方法について詳細を設定出来ます。

配置
文章に対する画像の位置を、「Baseline」「Top」「Middle」「Bottom」「Text top」「Text bottom」「Left」「Right」から設定します。
サイズ
画像の表示サイズを指定します。
「縦横比の保存」にチェックを入れると、画像の縦横比率を変えることなく表示サイズを変更することが出来ます。
上下余白・左右余白
画像の上下左右に余白を付けたい場合に設定します。
入力は数値のみとなります。数値の単位は「px」です。
枠線
画像に枠線を付けたい場合に設定します。
スタイル
CSSを直接記述することが出来ます。また、「配置」等の項目で設定した内容が自動的に表示されます。
プレビューイメージ
現在の設定で画像がどのような表示になるのイメージを表示します。

高度な設定タブ

ロールオーバーやIdなどの特殊な情報を設定出来ます。


画像切替を行う
画像の切替(ロールオーバー)を行う場合、チェックを入れます。
マウスオーバー時
(「画像切替を行う」にチェックを入れた時のみ)画像にマウスのカーソルを合わせた時の画像を指定します。
マウスアウト時
(「画像切替を行う」にチェックを入れた時のみ)画像からマウスのカーソルが離れた時の画像を指定します。
Id
画像にIdを設定します。
文章の方向
文章の方向を「左から右」「右から左」のどちらかで指定します。
言語コード
言語コードを指定します。
イメージマップ
イメージマップを挿入出来ます。<map>~</map>タグで入力して下さい。
詳細説明リンク
画像の詳細説明へのリンクを設定します(longdesc属性に該当します)。

 

画像の挿入方法

外部サイトの画像を利用する方法

  1. 外部サイトの画像のURLを取得します。
  2. 管理画面にログインしページの編集画面から 画像の挿入/編集 ボタンをクリックします。
  3. 「一般」タブの「画像URL」に取得した画像URLを入力します。
  4. 挿入ボタンを押すと編集画面に画像が挿入されます。

参照ボタンから画像を検索する方法

画像の挿入/編集画面の「参照」ボタンをクリックして下さい。

画像の挿入ポップアップウィンドウ

 

するとMODXリソースブラウザが開きますので、挿入したい画像を選択します。

画像は必要に応じてアップロードすることが出来ます。画像のアップロードについてはこちらをご覧下さい。
また、アップロード先のフォルダを作成したい場合はこちらをご覧下さい。

画面左のツリーメニューから挿入したい画像が入っているフォルダを選択し、画面右からサムネイル画像を選択して「OK」を押して下さい。
MODXリソースブラウザが閉じ、画面の挿入/編集画面のプレビューに選択した画像が反映されます。

全ての設定が終わりましたら「挿入」を押して下さい。コンテンツ編集エリアの選択した箇所に設定した状態で画像が挿入されます。

 

画像のアップロード

画像の挿入/編集画面の「参照」ボタンをクリックして下さい。

画像の挿入ポップアップウィンドウ

「参照」ボタンをクリックするとMODXリソースブラウザが開きます。

 

画像をアップロードしたい場合

挿入する画像がない場合、画像のアップロードが出来ます。

画面左のツリーメニューから画像を挿入したいフォルダを選択し、ツリーメニュー上部にあるアップロードボタンを押して下さい。

以後の手順は既存フォルダへのアップロード手順をご覧下さい。

 

アップロードディレクトリ(フォルダ)を作成する場合

アップロード先のフォルダがない場合、フォルダを作成することが出来ます。

ディレクトリ作成アイコンを押して下さい。
またはフォルダを作成したいフォルダを選択し、右クリックして表示されたメニューから「ここにディレクトリを作成」を選択して下さい。

以後の手順は新規フォルダへのアップロード手順をご覧下さい。

お問合せ

iQ CMSサポートの電話番号

iQ CMSサポートの無料資料請求

iQ CMSサポートのお問い合わせ

  • iQ CMSサポートに問い合わせ
  • iQ CMSサポートに資料を請求
Share |