Joy CMSのオンラインマニュアルです

エディタを使って画像を挿入する

基本的な表示パターンであるパターンAでは、1つの画像のみの場合入力フォームの備えられている画像のアップロード機能によって画像を表示させることが出来ますが、複数の画像を挿入する場合は、エディタの画像の挿入機能を使います。

エディタの「画像の挿入/編集」ボタンをまず、クリックします。※下図の赤い破線で示しているのが「画像の挿入/編集」ボタンです。

画像の挿入/編集ボタン

「画像の挿入/編集」ダイアログには、右側に「参照」と「画像追加」のボタンが2つ縦に並んでいます。

「参照」ボタンは、既にアップロードされている画像を参照して挿入するボタンです。「画像追加」ボタンは「画像の追加」フォームを開いて画像をアップロードさせます。

画像の挿入/編集ダイアログ

それでは、画像をアップロードさせる方法を説明します。

「画像の挿入/編集」ダイアログの「画像追加」ボタンをクリックします。

「画像の追加」ダイアログが開きますので、画像のサイズをプルダウンから選択します。次に参照ボタンをクリックしてアップロードする画像ファイルを選択します。

最後に「追加する」ボタンをクリックします。5メガバイトまでのJPEG、GIF、PNG画像ファイルをアップロードできますが、ファイルサイズが大きいと多少、時間が掛かります。

画像の追加

「画像の挿入/編集」ダイアログの「一般」タブの「画像の説明」欄に画像の説明文を入力して一番下にある「挿入」ボタンをクリックすると画像ファイルがアップロードされます。

画像の挿入

次に、アップロードした画像ファイル一覧の中から画像を選択して挿入して見ましょう。

「画像の挿入/編集」ダイアログの「参照」ボタンをクリックします。

参照ボタン

既にアップロードされている画像の一覧がポップアップで表示されますので挿入する画像の右側にある「挿入」ボタンをクリックします。

画像の挿入

後は、画像のアップロードの時と同じように、「画像の説明」欄に適当な文章を入力して「挿入」ボタンをクリックすると画像が挿入されます。

画像を縦一列に配置する場合は、以上の操作で良いのですが、例えば、テキストを右側に画像を左側に配置するとかとなったら、画像の配置を指定しなければなりません。

次にその方法を説明します。

「画像の挿入/編集」ダイアログで「参照」ボタンをクリックしてアップロードされて画像ファイル一覧のダイアログの中から画像を挿入したら、「画像URL」のテキストフォームにアドレスが入力されます。

「画像の挿入/編集」ダイアログの「表示」タブをクリックします。

画像の配置

 「表示」タブの「配置」の右側にあるプルダウンから適切な配置を選択します。下の方にある、「Right」、「Left」の中から選択すれば十分です。

画像の配置

後は、先ほどと同じように「画像の説明」を入力して「挿入」ボタンをクリックします。

画像ファイルの表示サイズを指定する

これまでの説明は、画像ファイルが記事領域の幅より小さい場合は正常に表示されますが、大きい場合は表示が崩れますので、画像の表示サイズを調整する必要があります。

JoyCMSでは、画像の表示サイズが幅510ピクセル以内でなければなりません。

画像の表示サイズを編集するには「画像の挿入/編集」ダイアログで「表示」タブを選択します。

表示タブ

 画像サイズを見てみるとこの例では、幅1000ピクセルになっていますので、これでは表示が崩れてしまいます。次に「縦横比の保存」にチェックが入っていることを確認します。

表示幅チェック

「画像の挿入/編集」ダイアログの「表示タブ」のサイズの1000を500にします。サイズの右側の数値をクリックすると自動的に変更されます。最後に「挿入」ボタンをクリックするとサイズが変更されます。

サイズの編集