最新情報

  • 2020/09/16
    ブログを更新しました。
    2018/04/30
    冷やし中華...じゃなかった、Twitterはじめました。

このサイトに関して



当サイトご利用上の注意

  • 記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。

    2019/04/14現在、コメント欄の認証方法やNGワード設定等、時々変更しています。メールアドレスの入力が求められる場合、とりあえずメールアドレスの形をしていれば(@の前は適当でも)OKです。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。

    コメントは承認無しで掲載されますが、ココログの仕様で投稿されたコメントが画面に反映されるのにはしばらく時間が掛かります。ご了承下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。




特設コーナー

  • Banner_wuhanvirus2

    banner_kunimori01


















外部サイト(その他)

  • 台湾の名前で東京オリンピック参加を!署名活動


    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会









管理人ポータル

大師小同窓会関連












  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

各種ノウハウ集



私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


« ドイツの伝統的なグリューワイン(ホットワイン)レシピ集 | トップページ | トイレを表す絵文字(ピクトグラム)は日本で生まれたものだった »

2016/12/16

【ココログ】「画像を本文の幅に合わせて表示する」で画像をアップロードするとマイフォトに表示されない!?

不具合の現象

【問題となっている点】

「画像の挿入」操作の際、「ページに表示する画像サイズ」で「画像を本文の幅に合わせて表示する」(下図-1/B)を選択した画像は、実際に画像をアップロードした日付で「マイフォト」の「ブログにアップロードした画像」アルバムに表示されない。

【判明したこと】

実際に画像をアップロードした日付ではなく、その画像のExifに持っている『デジタルデータの生成日付』で「マイフォト」の「ブログにアップロードした画像」アルバムに表示されているというバグ。(【追記】その後、「記事ページ内で拡大画像を表示」でアップロードしてもExifの日付で表示される現象を発見)

【現状(2016/12/16現在)】

この方法で画像を挿入した場合も、他の方法と同様、アップロードした日付で「ブログにアップロードした画像」アルバムに表示するよう修正依頼中。

 

 

Cocolog_my_photo_00
(図-1)

 

【サンプル画像】

Dscn0261_700x524
(図-2) 上の画像は2016/12/03にアップロードを行った。

 

「画像を本文の幅に合わせて表示する」というアップロード方法は、例えば、ブログの本文の幅が500px(ピクセル)だった場合、元画像の横幅が700pxのものをアップロードする際にこのオプションを選択すると、記事上は幅500pxに縮小して表示してくれるというものです。画像をクリックすると拡大画像(元サイズの画像が表示してくれます。)

この方法でアップロードすると、その後、本文の横幅400pxのデザインに変更しても、閲覧したときには画像も400pxの幅に縮小して表示されるという便利な方法なのですが、一つ難点があって、「画像をクリックしたときの動作」(図-1/D)の指定ができず、画像をクリックしたときの動作は、「同一ウィンドウで拡大画像を表示」になってしまう点です。(但し、HTMLタグを編集すれば、クリックしたときの動作を変えることができます。→「クリックしたときの動作を変更する」に追記)

 

これは、テストでアップロードした画像を削除しようと思って、すぐに「ブログにアップロードした画像」を見ても、その画像が表示されないことで気づきました。(下図-3…16/12/03に該当画像がない)

 

Cocolog_my_photo_trouble01
(図-3)

 

ちなみに図-2の画像の保存場所(URL)を「HTMLの編集」に切り替えてタグで確認すると、16/12/03用のフォルダに入っていることは確かです。

http://daishi100.cocolog-nifty.com/photos/uncategorized/2016/12/03/dscn0261_700x524.jpg

 

この画像は、実際には、「ブログにアップロードした画像」アルバムの16/07/31の場所にありました。(下図)

Cocolog_my_photo_trouble04
(図-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)で「アップロードした画像をそのまま表示する」を選択しています。

Cocolog_my_photo_trouble_img04
(図-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"」を手作業で追加しておけば心配ありません。

 

と言うことで、テスト。(画像に深い意味はありません

Awb20161209

この画像のサイズは726px×473pxなので、「アップロードした画像をそのまま表示する」でアップロードすると右端が切れて表示されますが、HTMLタグをコピーして下に貼り付け、「class="image-full"」を追加したところ、このブログの本文幅に合わせて自動的に縮小されて表示されました。

Awb20161209

 

クリックしたときの動作を変更する

下の画像の1は挿入の際、「画像をクリックしたときの動作」に「記事ページ内で拡大画像を表示」(Lightboxタイプ)を、2は「別ウインドウで拡大画像をポップアップ」を指定したものです。

Cocolog_my_photo_trouble_img01

Cocolog_my_photo_trouble_img02

この2つの画像のHTMLタグを見てみると、

  1. <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>
     
  2. <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のサイズに修正しなければなりませんが、敢えてそのままにしてみます。)

  1. <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>
     
  2. <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.

Dscn0261_700x524

2.

Dscn0261_700x524

 

 


 

« ドイツの伝統的なグリューワイン(ホットワイン)レシピ集 | トップページ | トイレを表す絵文字(ピクトグラム)は日本で生まれたものだった »

コメント

コメントを書く

(ウェブ上には掲載しません)

« ドイツの伝統的なグリューワイン(ホットワイン)レシピ集 | トップページ | トイレを表す絵文字(ピクトグラム)は日本で生まれたものだった »

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2020年9月
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

sponsored link


ドールハウス工作おすすめ参考図書

カテゴリー

無料ブログはココログ