お詫び

このサイトに関して




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


当サイトご利用上の注意

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

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

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



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


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




特設コーナー


















外部サイト(その他)

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


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









管理人ポータル

大師小同窓会関連












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


我が町!大師の情報

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

各種ノウハウ集



私家版スクラップブック

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

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

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

友達の輪・お薦めSHOP

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




    かわさき楽大師

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

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


« 【ココログ新システム】背景透過画像のテスト | トップページ | 【ココログ新システム】画像の挿入方法/サムネイル画像を巡る諸問題と当面の対応策 »

2019/03/22

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

公開: 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で挿入。

   

Image_test05

   

画像の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>

   

   

Image_test05

   

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

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

   

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

   

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

   

Image_test01Image_test02Image_test03

   

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

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

   

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

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

   

Image_test04Image_test04Image_test04

   

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


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

   

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

   

Cocolog_new07

   

3. 画像の文字回り込みテスト(回り込み解除、マージン)

   

Image_test03ああああ
 

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

   

Cocolog_new08

   

   

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

   

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;"」を挿入する。

   

Image_test01Image_test02Image_test03

   

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>

   

マージンの意味。

   

Cocolog_my_photo_05

   

💕

  






  




« 【ココログ新システム】背景透過画像のテスト | トップページ | 【ココログ新システム】画像の挿入方法/サムネイル画像を巡る諸問題と当面の対応策 »

コメント

コメントを書く

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

« 【ココログ新システム】背景透過画像のテスト | トップページ | 【ココログ新システム】画像の挿入方法/サムネイル画像を巡る諸問題と当面の対応策 »

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2019年4月
  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


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

ドールハウス工作おすすめアイテム(材料・工具)

カテゴリー

無料ブログはココログ