文書（HTML）の編集（４）　image（写真など）の貼り付け

文書（HTML）の編集（３）で写真を貼り付けている例について少し触れましたが、ここでは具体例を示しながら詳細に説明することと致します。ここでMy Noteでの写真など画像の取り扱いについて以下の注意が必要です。

• 写真など画像とはjpeg、png、bmp、gifなどの形式で保存されたファイルで特別なことではありません。
• My Noteでの画像の貼り付けはHtml_Designの追加タグで作成された「横小枠 flex」中に貼り付けることが可能です。
• My Noteでの画像の貼り付けはHtml＿Designポップアップ画面上の追加タグ「絵写真 img」からのみ可能です。
• 【要注意】上記作業で貼り付けた画像は外部環境（他の第3者）では見えないのです。メール送信したりHomeページなどに組み込んだページを外部環境の第3者が見えるようにするには更なる作業が必要なのです。その方法については別途紹介します。

まずは、普通に画像を貼り付ける方法について順番に説明します。文書の編集に入ってWebDesignメニューにてHtml_Designポップアップ画面を立ち上げ、追加タグにて「横小枠 flex」の分割数４を指定して画面最下段の追加ボタンを押すと、下記のような４つの横枠が現れます。

コンテンツが入ります

写真の説明

コンテンツが入ります

コンテンツが入ります

コンテンツが入ります

そこで最初の小枠に画像を貼り付けるには最初の小枠中の「コンテンツが入ります」の一部を選択状態にして最下段メニューのWebDesignボタンを押すと現在位置を示すGreen Lineが現れます（①step_01）。ここでHtml＿Designポップアップ画面上の追加タグの「絵写真 img」を選択して追加ボタンを押します（②step_02)。するとGreen Lineの近くにメニューがポップアップします（③step_03）。ここでは画像をlocal PC上にあるか、既にMy Noteに取り込んだものかを選択するようになっています。

①step_01　現在位置を決める

写真の説明

②step_02　絵写真を選択→追加

写真の説明

③step_03　local/My Noteメニュー

写真の説明

④step_04　from localの場合

写真の説明

⑤step_05　Fileﾌｫﾙﾀﾞｰで写真選択

写真の説明

⑥step_06　step_04に現れる

写真の説明

⑦step_07 step_06の確認onで終了 　

写真の説明

以上が横小枠 flexに画像を配置するまでのstepですが、その後画像に関する表題や説明が必要な場合は上部の「コンテンツが入ります」の部分か「写真の説明」の文を修正したり、不必要な場合は削除しても構いません。 更に枠内での画像の配置のスタイルを変更する場合を下記に説明します。

貼り付けが終了した各画像の配置スタイルを指定するには画像にGreen Lineを持ってくる必要があります。文書（HTML）の編集（２）でGreen Lineの移動について述べているのですが分かりにくい説明なので画像の場合について端的に言いますと、画像の上か下にある画像の説明文にカーソルを持って行って下メニューのWebDesinをクリックするとGreen Lineがカーソル位置に移動して来ます。画像は説明文の上か下にある兄弟要素なのでHtml_Design画面上にある ← → のどちらかを押すと画像の下枠の部分がGreen Lineに（tag欄部分はIMGに）変わると画像部分を選んだことになります（画像は文章と違って直接にGreen Lineを移動出来ない）。その段階でHtml_Design画面上のstyle表示ボタンを押して下さい。

①画像のStyle変更

写真の説明

②Styleパラメータの変更

小さめ形状（width:650%)にして中央部によせ（margin:0 40px)境界の半径を大きく（border radius:50px)変更して最後にSetボタンを押すことで最終形状を得ることが出来ました。

③画像の最終形状

写真の説明

Html＿Design画面上のStyle表示ボタンを押すことで４種類のStyle画面が入れ替わり表示されます。左の①②③によるStyle変更では１つのStyle画面しか使っていませんが、境界Lineの形状や色など必要ならばStyleを切り替えて設定することが可能です。 また、横小枠の枠線を消すことなども可能です。