不具合の現象
【問題となっている点】
「画像の挿入」操作の際、「ページに表示する画像サイズ」で「画像を本文の幅に合わせて表示する」(下図-1/B)を選択した画像は、実際に画像をアップロードした日付で「マイフォト」の「ブログにアップロードした画像」アルバムに表示されない。
【判明したこと】
実際に画像をアップロードした日付ではなく、その画像のExifに持っている『デジタルデータの生成日付』で「マイフォト」の「ブログにアップロードした画像」アルバムに表示されているというバグ。(【追記】その後、「記事ページ内で拡大画像を表示」でアップロードしてもExifの日付で表示される現象を発見)
【現状(2016/12/16現在)】
この方法で画像を挿入した場合も、他の方法と同様、アップロードした日付で「ブログにアップロードした画像」アルバムに表示するよう修正依頼中。
(図-1)
【サンプル画像】
(図-2) 上の画像は2016/12/03にアップロードを行った。
「画像を本文の幅に合わせて表示する」というアップロード方法は、例えば、ブログの本文の幅が500px(ピクセル)だった場合、元画像の横幅が700pxのものをアップロードする際にこのオプションを選択すると、記事上は幅500pxに縮小して表示してくれるというものです。画像をクリックすると拡大画像(元サイズの画像が表示してくれます。)
この方法でアップロードすると、その後、本文の横幅400pxのデザインに変更しても、閲覧したときには画像も400pxの幅に縮小して表示されるという便利な方法なのですが、一つ難点があって、「画像をクリックしたときの動作」(図-1/D)の指定ができず、画像をクリックしたときの動作は、「同一ウィンドウで拡大画像を表示」になってしまう点です。(但し、HTMLタグを編集すれば、クリックしたときの動作を変えることができます。→「クリックしたときの動作を変更する」に追記)
これは、テストでアップロードした画像を削除しようと思って、すぐに「ブログにアップロードした画像」を見ても、その画像が表示されないことで気づきました。(下図-3…16/12/03に該当画像がない)
(図-3)
ちなみに図-2の画像の保存場所(URL)を「HTMLの編集」に切り替えてタグで確認すると、16/12/03用のフォルダに入っていることは確かです。
http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg
この画像は、実際には、「ブログにアップロードした画像」アルバムの16/07/31の場所にありました。(下図)
(図-4)
一体、16/07/31という日付はどこから来たのかというと、この画像をPCに保存した日付(加工した日付)でした。
EXIF Sub IFD
露出時間 (1 / シャッタースピード) = 10/200 秒 ===> 1/20 秒 ===> 0.05 秒
Fナンバー = 34/10 ===> ƒ/3.4
露出プログラム = ノーマルプログラム (2)
撮影感度 = 400
感度種別 = 標準出力感度 (SOS) (1)
EXIFバージョン = 0230
原画像データの生成日時 = 2016:07:31 06:38:20
デジタルデータの生成日時 = 2016:07:31 06:38:20
これは、Exif情報という、画像に持っている情報です。
たまたまテストで適当な画像を使ったのですが、他の画像アップロード方法では、例え古い画像をアップロードしても、マイフォトの「ブログにアップロードした画像」では、アップロードした日付で表示されます。
前述のように、「クリックしたときの動作」が選択できないので、実際にこのアップロード方法を利用するユーザは少ないから、今まで看過されたのでしょう。
【2016/12/19追記】
その後、「記事ページ内で拡大画像を表示」でアップロードしてもExifの日付で表示される現象を発見しました。もし、アップロードした画像を削除する必要などがあり、マイフォトの「ブログにアップロードした画像」内で見つからない場合、その画像のExifを調べて、その日付で探してみて下さい。
トラブルの報告はここまで。以下は、アップロードした画像のHTMLタグの編集方法に関する話です。
class="image-full"
この実験をしたときに、一つ勉強になったことがあります。
それは今回、「画像を本文の幅に合わせて表示する」で挿入した画像のHTMLタグを見て、「class="image-full"」という記述を知ったことです。
ブログ主は、本文の幅500pxのデザインを使用しているので、ブログに掲載する画像は、500pxの幅以下に予め縮小してから、「ページに表示する画像サイズ」(図-1/B)で「アップロードした画像をそのまま表示する」を選択しています。
(図-5)
これはクリックできません。
500pxより大きな元画像を見てもらいたいときは、そのままの大きさでアップロードし、その際に「サイズを指定する」に「500」(px)などと数字を指定することもあります。
この方法では、元画像(大きな画像)の他に、記事に表示するためのサムネイル画像(縮小画像)が指定したサイズで自動的に作られるので、ブログの容量を消費してしまうというデメリットがあります。(但し、閲覧用にサムネイル画像を表示することは画面の表示速度をupさせるというメリットもあり。)
いずれにしても、このように画像サイズを固定してしまうと、ブログのデザインを変えて本文の幅が500pxより狭くなったときに画像が表示しきれず、端が切れてしまう場合があります。
ここで、サンプル画像(図-2)の画像のHTMLタグを見てみると下記のようになっています。
<a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg"><img class="image-full" alt="Dscn0261_700x524" title="Dscn0261_700x524" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg" border="0" /></a>
赤字はクリックしたときの動作で、記事に表示するためのHTMLタグは青字の部分です。
下は図-5のHTMLタグ。
<img alt="Cocolog_my_photo_trouble_img04" title="Cocolog_my_photo_trouble_img04" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/09/cocolog_my_photo_trouble_img04.jpg" border="0" style="display: block; margin: auto;" />
図-2のタグとの違いは、「class="image-full"」が入っているかいないかだけです。
と言うことは、幅500pxの画像をアップロードした場合、(ブログのデザインを変える可能性がある場合は)タグに「class="image-full"」を手作業で追加しておけば心配ありません。
と言うことで、テスト。(画像に深い意味はありません )
この画像のサイズは726px×473pxなので、「アップロードした画像をそのまま表示する」でアップロードすると右端が切れて表示されますが、HTMLタグをコピーして下に貼り付け、「class="image-full"」を追加したところ、このブログの本文幅に合わせて自動的に縮小されて表示されました。
クリックしたときの動作を変更する
下の画像の1は挿入の際、「画像をクリックしたときの動作」に「記事ページ内で拡大画像を表示」(Lightboxタイプ)を、2は「別ウインドウで拡大画像をポップアップ」を指定したものです。
この2つの画像のHTMLタグを見てみると、
- <a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2016/12/08/cocolog_my_photo_trouble_img01.jpg" class="mb"><img alt="Cocolog_my_photo_trouble_img01" title="Cocolog_my_photo_trouble_img01" src="http://daishi100.cocolog-nifty.com/blog/images/2016/12/08/cocolog_my_photo_trouble_img01.jpg" width="160" height="242" border="0" style="float: left; margin: 0px 5px 5px 0px;" /></a>
- <a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2016/12/08/cocolog_my_photo_trouble_img02.jpg" onclick="window.open(this.href, '_blank', 'width=300,height=451,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img alt="Cocolog_my_photo_trouble_img02" title="Cocolog_my_photo_trouble_img02" src="http://daishi100.cocolog-nifty.com/blog/images/2016/12/08/cocolog_my_photo_trouble_img02.jpg" width="160" height="240" border="0" /></a>
青い太字の部分がサンプル画像(図-2)のHTMLタグと異なります。これを試しに図-2のHTMLタグに追加してみることにします。
HTMLタグの<>内の要素は順番は厳密ではないので、
<a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg" ※ ><img class="image-full" alt="Dscn0261_700x524" title="Dscn0261_700x524" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg" border="0" /></a>
「※」と書いたところに上の青字の部分をコピペすればOKです。(2の「'width=300,height=451」の部分は、クリックしたときに表示されるウィンドウの大きさなので、本来、図-2のサイズに修正しなければなりませんが、敢えてそのままにしてみます。)
- <a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg" class="mb"
><img class="image-full" alt="Dscn0261_700x524"
title="Dscn0261_700x524"
src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg"
border="0" /></a>
-
<a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg" onclick="window.open(this.href, '_blank',
'width=300,height=451,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0');
return false"
><img class="image-full" alt="Dscn0261_700x524"
title="Dscn0261_700x524"
src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg"
border="0" /></a>
下は、上のHTMLタグの結果です。クリックしてどのように表示されるかご確認下さい。
1.
2.
最近のコメント