【ココログ新システム】画像挿入に関する不具合テスト

公開：　2019-03-22 20:53　　　最終更新：　2019/03/23 10:48　　

※環境：　Windows8.1、Firefox

現在までに判明した不具合（2019/03/23 9:26頃報告済み）

1．　サムネイルサイズが都度変更できない

同一記事の同一編集作業中に複数の画像を異なったサイズで挿入する場合、以前のように、挿入の都度サムネイルサイズを指定できない。一見、都度変更できるように見えるが、同一編集作業中だと、前回の設定が生きているようである。

例えば、通常のサイズ（幅）を500に設定していた場合で、今回は150で挿入したい場合、①一旦、記事の編集を終了（下書き保存）して、②サムネイルサイズを150に変更し、③再び記事を開いて画像を挿入なくてはならない。

2．　過去にアップロードした画像を、今回は異なったサムネイルサイズで記事に掲載しようとしても、前回アップロードしたサムネイルサイズが適用されてしまうようである。

従って、うっかり、意図しないサイズでアップロード or 記事に挿入してしまった場合（サムネイルが作成されるのは後者のタイミングか？）、ファイルマネージャーでサムネイルを消さないと、いつまでも同じサイズのサムネイルが使われてしまう。

下は幅300で挿入。

画像のHTMLタグ

<div style="text-align: center;"><a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test05.jpg" target="_blank" rel="noopener"><img src="http://daishi100.cocolog-nifty.com/blog/images/image_test05.jpg" alt="Image_test05" width="300" height="222" border="0" /></a></div>

画像のHTMLタグを以下のように修正して貼り付けてみるテスト。（サムネイルを使わない、サムネイルサイズの幅を500とし、高さは削除）

<div style="text-align: center;"><a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test05.jpg" target="_blank" rel="noopener"><img src="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test05.jpg" alt="Image_test05" width="500" border="0" /></a></div>

幅500の画像が挿入されたが、これをHTMLタグに不慣れなユーザにやらせるのは酷である。

いっそ、サムネイル画像を別に作成する仕様をやめた方がいいのではないか？　オリジナルサイズの画像URLを<img src="～" />にも使い、幅も画像を挿入する都度変更できる以前の仕様に戻すべき。

3つの画像を連続して記事に掲載するテスト

1．　まずは、150×150pxの画像を原寸大のままup。

タンポポは「配置：左回り込み」、スミレは「指定無し」、チューリップも「指定無し」。

特に問題ないようである。

2．　次に、200×200pxの画像を幅150に縮小（サムネイルのサイズ）してupするテスト。

（これを行う前に、予め、サムネイルサイズを150に設定した。）

３つとも同じ画像だが、1と同様、配置は「左回り込み」、「指定無し」、「指定無し」で記事に掲載。

とくに問題ないようである。

なお、画像を挿入するときは、画面上部の「画像の挿入」ボタンから作業した。設定画面は以下の通り。

3．　画像の文字回り込みテスト（回り込み解除、マージン）

ああああ
　

上のように回り込み解除をして画像の右にマージンを空けるには、下記のように行う。

画像の周囲にマージンを入れるテスト

1の3枚の画像を例にすると、下のようなHTMLタグである。分かりやすいように色わけ（左：水色、中：ピンク、右：黄色）

<p><img src="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test01.jpg" alt="Image_test01" width="150" height="150" align="left" border="0" /><img src="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test02.jpg" alt="Image_test02" width="150" height="150" border="0" /><img src="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test03.jpg" alt="Image_test03" width="150" height="150" border="0" /></p>

ここに、「style="float: left; margin: 0px 5px 5px 0px;"」、「style="margin: 0px 5px 5px 0px;"」を挿入する。

HTMLタグは以下の通り。左端の画像のみ「style="float: left; margin: 0px 5px 5px 0px;"」、中と右は「style="margin: 0px 5px 5px 0px;"」を挿入する。

<p><img src="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test01.jpg" alt="Image_test01" width="150" height="150" align="left" border="0" style="float: left; margin: 0px 5px 5px 0px;" /><img src="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test02.jpg" alt="Image_test02" width="150" height="150" border="0" style="margin: 0px 5px 5px 0px;" /><img src="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test03.jpg" alt="Image_test03" width="150" height="150" border="0" style="margin: 0px 5px 5px 0px;" /></p>

マージンの意味。

💕

---