画像の挿入

記事の中に画像を挿入する方法を確認します。使用するツールバー上のアイコンは次の通りです。

画像の挿入

ビジュアルエディタの本文入力エリア内に記述された文字列の中で、画像を挿入したい位置をクリックしてキャレットを移動して下さい。

画像の挿入

ツールバー上の次のボタンをクリックします。

画像の挿入

次のようなダイアログが表示されます。

画像の挿入

設定可能な項目は次の通りです。

項目入力内容
Image URL画像のURL
Image description画像の説明
Alignment画像と文字の位置関係
Dimensions画像サイズ
Border枠線
Vertical space縦方向の余白
Horizontal space横方向の余白

「Alignment」には次の値が設定可能です。

画像の挿入

画像は事前にサーバにアップロードしておいて下さい。今回は同じWWWサーバの下記の位置に画像をアップロードしておきました。

画像の挿入

では必要事項を入力します。

画像の挿入

入力が終わりましたら「Insert」ボタンをクリックして下さい。画像が挿入されます。

画像の挿入

コードビューで確認すると次のようになっています。

画像の挿入

画像の設定変更

挿入した画像に関して設定した内容を変更することができます。設定変更したい画像をクリックして下さい。

画像の挿入

ツールバー上の次のボタンをクリックします。

画像の挿入

画像に対する設定画面が表示されます。

画像の挿入

設定を変更したら「Update」ボタンをクリックして下さい。変更した内容が反映されます。

ブログでの確認

では編集を保存して頂きブログでどのように表示されるのかを確認してみます。

画像の挿入

画像が表示されます。

画像の挿入