「これはポップスの記事1です。」の次の行に、自分のパソコンに保存されている画像を挿入してみます。
前準備として、自分のパソコンで、挿入する画像のサイズを調整してください。今回は横幅200px程度が望ましいです。画像編集ソフトや縮小専用などのフリーソフトを使えば比較的簡単にできます。
サイズ変更が終わったら、エディタ上で実際に画像を挿入します。1行目の行末で改行し、2行目の先頭にカーソルを移動して下さい。エディタ下側にある「イメージ」をクリックします。
背景が暗転し画像の選択画面が表示されます。この画面で画像をアップロードします。画面下側にある「参照」ボタンを押し、挿入する画像を選択したら「アップロード開始」をクリックします。
アップロードした画像が表示されます(今回はアンテロープの写真)。その画像をクリックして「画像のURL」に画像のパスが表示されたのを確認します。また「ALT属性」は画像を説明する単語や説明を入力します。詳しくはALT属性で検索して下さい。すべて入力できたら、画面右上の「挿入」をクリックします。
エディタ上に画像が挿入されます。
保存してフロントエンドで「ポップス」の記事を表示すると、「ポップスの記事1」に画像が挿入されているはずです。
今度は挿入した画像を編集してみます。
画像をクリックして選択し、以下のボタンをクリックします。
画像の設定を変更するウインドウが表示され、「画像の説明」や「配置」などを再設定できます。その他画像のサイズ、枠線、上下左右の余白なども設定できます。今回は「枠」を「10」に設定し、「更新」をクリックします。
画像の周りに10pxの枠線が付きました。