【ブログの楽しみ方】画像の周囲の余白を調節する【cocolog】

ブログ主の覚え書きとして画像を「左寄せ・記事回り込み」した際に周囲の余白を調整する方法を記します。

画像の「左寄せ・記事回り込み」とは、下のように、画像を挿入するときに「画像の位置」で「左（記事回り込み）」を選択します。（挿入画面の画像はこちら）

• 左　：　続く文章は画像の下に配置される
• 中央　：続く文章は画像の下に配置される
• 左（記事回り込み）：　続く文章は画像の右に配置される
• 右（記事回り込み）：　続く文章は画像の左に配置される

サンプル1

画像とテキストの間に若干の余白（隙間＝正しくは「マージン」と呼ぶ）があるのが分かるかと思います。

ココログでは自動的に空く隙間は5px（ピクセル）に設定されていますが、個人的にはやや狭すぎる感があるので、いつも、HTMLタグをいじって調整しています。

この余白を調整する方法を説明するのが、この記事の目的です。

HTMLタグ：style="float: left; margin: 0px 5px 5px 0px;"

画像の左寄せ、あるいは右寄せを指定した場合、「HTMLの編集」に切り替えてHTMLタグを見ると、「style="float: left; margin: 0px 5px 5px 0px;"」という要素が記述がされています。これはココログが自動的に設定したものです。

<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>

このうちの「float: left」は左寄せ（右側に文字の回り込み）を意味し、「margin: 0px 5px 5px 0px」は画像の周囲の余白を表します。（下図）

　

余白を調節するときは、「HTMLの編集」に切り替えてこの数字を変更します。

サンプル2（余白調整後）

従って、HTMLタグのこの数字をいじれば、余白を微調整することができます。

左の画像では、分かりやすく、

margin: 0px 30px 5px 30px;"

と、左右のマージンを30pxにしてみました。

HTMLタグを編集するときは、必ず半角文字を使うこと、タグ内の各要素の前後には必ず半角スペースを空ける必要があることに注意して下さい。

記事（文字）の回り込みを解除する

以前も記事にしましたが、ここでも簡単に説明します。

上の例のように文字の回り込みを途中でやめたいときは、「HTMLの編集」に切り替え、「<p>を指定。</p>」となっているのを、「<br clear="left" />」と一文字のスペース（下では便宜的にスペースの代わりに■と表記）を追加して、

<p>を指定。<br clear="left" />■</p>

とし、更に、 最後の「</p>」の右側に文字、例えば「ああ」と記入して、

<p>を指定。<br clear="left" />■</p>ああ

のようにし、

「記事の作成」タブに切り替えると、記事の回り込みは解除されて、「ああ」は画像の下に配置されます。

これを再び「HTMLの編集」モードに切り替えると、「<p>ああ</p>」のように、ココログが自動的に改段落タグ（「<p>～</p>」）を付加してくれます。

画像の下に文章を続けるときは、この「ああ」を上書きするようにして記入します。

注）HTMLタグはブログシステムの違いに関わらず共通ですが、ブログシステムによって使用できるタグ・できないタグがあったり、「記事の作成」で入力した内容をどのようなHTMLタグにするのかは、ブログシステムの仕様によって異なります。

ここでの説明はココログでの作業方法を説明したものです。

　　

---

【ブログの楽しみ方】「別ウインドウで拡大画像をポップアップ」したときにスクロールバーを表示する方法【ココログ】

画像を挿入するとき、ブログ主は『画像をクリックしたときの動作』で、好んで『別ウインドウで拡大画像をポップアップ』を使用します。

その理由は拡大画像（実際は元サイズの画像）が別ウィンドウで開くため、画像を見ながら本文を読むことができるので、閲覧者にとって便利だと思うからです。

画像をポップアップさせる見せ方としては「記事ページ内で拡大画像を表示」というのもあり、これは周囲が暗くなって画像が浮き上がる（ライトボックス）ので見た目はかっこいいのですが、本文を読むには画像を閉じないとならないので、閲覧する側からするとあまり使い勝手はよくありません。（写真などを作品として見せるには効果的な方法だとは思います。）

しかし、『別ウインドウで拡大画像をポップアップ』の場合、閲覧者の使用しているディスプレイのサイズからはみ出るほど大きい（長い）画像だとウィンドウの下の方が切れて見えないので困っていました。　（例えば下の画像です。ちなみに2012年06月の川崎球場の画像。）

ブログ主のPCでは手前の照明灯の下部やその左右の木々が画面に入りきりません。

これは、「HTMLの編集」に切り替えて、画像を表示するHTMLタグを1箇所修正すればスクロールバーが表示されて解消します。

下の画像をクリックしてご確認下さい。

下は最初の川崎球場の画像のHTMLタグですが、「scrollbars=no」の「no」を「yes」と打ち替えるだけでスクロールバーが表示されるようになります。

<a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2012/06/05/kawasaki_st03.jpg" onclick="window.open(this.href, '_blank', 'width=1024,height=768,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img alt="Kawasaki_st03" title="Kawasaki_st03" src="http://daishi100.cocolog-nifty.com/blog/images/2012/06/05/kawasaki_st03.jpg" height="146" border="0" style="display: block; margin: auto;" /></a>

---

【ブログの楽しみ方】画像を削除してブログ容量を増やす【ココログ】

ブログの容量が少なくなった場合の苦肉の策とも言えますが、

記事にサムネイル画像（＝縮小画像）を表示し、クリックすると拡大画像（＝オリジナルサイズの画像）をポップアップしている場合、「サムネイル画像」か「拡大画像」のどちらかを削除して空き容量を増やそうという趣旨の記事です。

手順概略

手順としては、

1. ブログをHTMLの編集でHTMLタグを編集して保存
   
2. 1の後で、マイフォトの「ブログにアップロードした画像」から該当のサムネイルまたは拡大画像を削除する

となります。

限られたブログ容量の大半を占めるのは画像です。サムネイルと拡大画像はそれぞれ別のところに保管されていて、これを図示すると、以下のような構造です。

図-1

このサムネイル画像は、アップロードの際、「ページに表示する画像サイズ」で指定したサイズでココログが自動的に作るものです。

そして、それを表示するためのHTMLタグが自動的に生成されます。

画像サンプルとHTMLタグ

HTMLタグの説明は後述しますので、あまり細かいところは気にせず、構造だけ見ると、「<img ～ />」（赤い部分）という部分がありますが、これがサムネイルを表示するHTMLタグで、「<a ．．．>と</a>」（青い部分）は、サムネイル画像をクリックするとオリジナル画像を表示するというHTMLタグです。

単純に構造だけ示すと、

<a ．．．><img ～ /></a>

となっていることをサンプル画像で理解して下さい。　

■サンプル１：　画像をクリックしたときの動作：「記事ページ内で拡大画像を表示」

<a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg" class="mb"><img width="220" height="165" border="0" alt="Wrapping_ornament_m" title="Wrapping_ornament_m" src="http://daishi100.cocolog-nifty.com/blog/images/2014/02/07/wrapping_ornament_m.jpg" /></a>

■サンプル２：　画像をクリックしたときの動作：「別ウインドウで拡大画像をポップアップ」

<a onclick="window.open(this.href, '_blank', 'width=512,height=384,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/01/28/wrapping_ornament_m.jpg"><img width="220" height="165" border="0" src="http://daishi100.cocolog-nifty.com/blog/images/2014/01/28/wrapping_ornament_m.jpg" title="Wrapping_ornament_m" alt="Wrapping_ornament_m" /></a>

【サムネイル画像を残してマイフォトの画像（ブログにアップロードした画像）を削除する】

上に述べたことから、前後の<a ～>と</a>の部分を消してしまって、<img ～ />のみを残せばば、とりあえず、閲覧時に拡大画像は表示されなくなります。（下の画像）

この作業の後に、「マイフォト」の「ブログにアップロードした画像」から該当の画像を削除します。

なお、「ブログにアップロードした画像」は新しいものから表示され、古い画像に辿り着くのが大変ですが、有志の方がお書きになったノウハウ『「記事一覧」や「マイフォト」で1ページの表示件数を任意に設定する方法』に、1ページに表示する件数を増やす方法が書かれています。

これに従うと、通常20件／1ページの画像を500件などと増やせるので、過去に遡りやすくなります。

画像の日付はブログの日付でもおおよそ見当がつきますが、画像のURLにも下記のように記述されています。

href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/01/28/wrapping_ornament_m.jpg"

画像を削除するときは、該当の画像を別タブで開くと便利です。（せっかく遡った画像リストがリセットされないため。）

下はFirefoxというブラウザの例ですが、他のブラウザでも画像名の上で右クリックして表示されるメニューには「新しいタブで開く」という内容のメニューがあるのでそれをクリックして別タブで開き、そちらでその画像を削除します。

【マイフォト（ブログにアップロードした画像）を残し、サムネイル画像を削除する】

上のサンプル1を例にすると、

<a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg" class="mb"><img width="220" height="165" border="0" alt="Wrapping_ornament_m" title="Wrapping_ornament_m" src="http://daishi100.cocolog-nifty.com/blog/images/2014/02/07/wrapping_ornament_m.jpg" /></a>

太字の部分（URL）がそれぞれの画像のURLです。ですから、青字のURLを赤字のURLにコピペしてしまえばサムネイル画像は不要になります。

ただし、貼り付けるURLは「http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg」そのままでなく、青く色を付けたところを削除して、「http://daishi100.cocolog-nifty.com/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg」の形にする必要があります。

このあと、サムネイル画像を削除します。（削除の方法は→【ブログの楽しみ方】サムネイル画像の削除方法【ココログ】）

なお、サムネイル画像は220px×165px（width="220" height="165"）でしたが、このオリジナル画像は512px×384pxの大きさがあるので、記事に表示する画像のサイズを大きくしても構いません。

例えば、このブログのデザインの本文幅500pxに合わせるなら、width（幅）のサイズを500に変え、width="500"にしてheight（高さ）は指定しせん。幅だけ指定することで縦横比は変わらずに表示されます。（逆にheightだけを指定してwidthを指定しなくても縦横比は維持されます。）

下記HTMLタグとを画像を参照してください。

<img width="500" border="0" alt="Wrapping_ornament_m" title="Wrapping_ornament_m" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg" />

横幅500pxを指定して記事に大きな画像が表示されるようになったので、クリックしたときの動作は削除しました。

本腰を入れて画像を減らす作業をするなら、

1. ファイルマネージャのimageフォルダでサムネイル画像を確認して、そのURL（この例ならhttp://daishi100.cocolog-nifty.com/blog/images/2014/02/07/wrapping_ornament_m.jpg）をコピーして「記事一覧」の検索窓にペースト（貼り付け）し、そのサムネイル画像が使われている記事を検索
   
2. 記事内のHTMLタグを編集してサムネイルが不要な状態にし、
   
3. サムネイル画像を削除

という作業を地道に行うのがいいかと思います。

---

【ブログの楽しみ方】画像の見た目の大きさを変えずに圧縮してサイズを小さくする／ロスレス圧縮とは

ブログなどのwebサイトに画像を掲載する場合、実際には“画像を呼び出す”命令（HTMLタグ）が記述されるだけで、画像は別の場所に保存されます。（ココログの場合、画像をそのまま掲載する場合は「マイフォト」、記事上には縮小画像＝サムネイルを表示する場合はサムネイル用の保管場所と、「マイフォト」の2箇所。）

つまり、画面上の画像はアクセスした時（そのページを開く時）に、いちいち呼び出されるわけです。従って、記事上に表示される画像が少ない、あるいは画像のサイズが小さいほど表示スピードが上がります。（但し、ブラウザのCache＝キャッシュに画像が保存されるため、2回目以降は素早く表示される。）

今回は、見た目にほとんど影響を与えず、画像サイズ（縦横のサイズではなく、バイト数）を小さくしてくれる方法のご紹介です。

• 紹介記事：　『無料でJPG、PNG、GIF、SVG画像を圧縮して小さくしてくれる「Compressor」』(Gigazine 2014年05月27日付）
• CompressorのURL：　http://compressor.io/

使い方はさほど難しくなく、上記記事を読めば分かりますが、以下、簡単にご紹介します。

サンプル画像

下はこのブログのサイドバーに現在表示している画像ですが、左が元画像、右が圧縮後の画像で、現在は圧縮後の画像を表示させています。

　

この画像のサイズは、縦横は220px × 300pxで同じですが、右が82.39 KB (84,371 バイト)、左が21.97 KB (22,498 バイト)です。

Compressorの使い方

手順としては、①画像をアップロードする→②web上で圧縮される→③圧縮された画像をダウンロードする　だけです。

1．サイトにアクセすると下のよう画面が表示される

2．下記の［SELECT　FILE］というボタンをクリックして、アップロードする画像を指定

3．ダウンロード

［DOWNLOAD YOUR FILE］ボタンをクリックするとダウンロードされる。

【追記】圧縮した画像のファイル名はデフォルトで元の名前に「-compressor」が付きます。ダウンロード時に「名前を付けて保存」で元画像と同じ名前で上書きしようとしたところ失敗しました。

ロスレス（lossless)圧縮とは

ここでは見た目を劣化せずにサイズを小さくすることだけを目的にしていますが、このサイトではロスレス圧縮という方法で圧縮してくれます。

losslessとは、コンピュータ用語では「情報が失われないデータ圧縮の」という形容詞で、ロスレス圧縮は日本語では「可逆圧縮」と呼ばれます。（可逆＝逆向きの反応も可能なこと、つまり元に戻せる⇔不可逆（lossy））

これがよく分かるのは、zip形式などの圧縮かと思います。

メールに添付して送るためにサイズを小さくしたり、アプリをダウンロードする際に圧縮されたzipファイルを“解凍”して元の形に戻した経験はあるのではないでしょうか。

不可逆性のファイル形式としてよく知られているものは、画像ファイルのjpgファイルです。

ブログなどにアップロードするためにjpgファイルを加工することはよくあると思いますが、（縦横のサイズ変更ではなく）色調を変えたり明るさを変えたりという修正を何度も繰り返して保存すると、そのたびに画質は劣化して元には戻せません。

下は、左が元画像、右は　明るさを少し変えて保存→元に戻して保存　を10回以上繰り返したものです。右の画像は少しぼやけてしまったのが分かるかと思います。

　

１、２回程度ではあまり変わらないのですが、もし、ブログ用などに画像を編集する場合、必要なら元画像は残しておいて、コピーした画像（コピーした時点では元画像と全く同じ画質）を編集するとか、編集結果を別の名前で保存して元画像を上書きしないようにするといった注意が必要です。

---

【PC】ブログに掲載すると縦長の画像が横になってしまうのを解消する【ココログ】

なぜこのようなことが起こるのか？

【原因と対策　概要】

PCなどで画像を見て縦（縦長の画像）なのにブログに投稿すると横（横長）になってしまうというのは、本来は横なのにPCのビューワ（画像表示ソフト）がそう見せてくれているにすぎない。

これを解消するには、投稿前に縦に直してからアップロードする。

まずは例を見てみます。

図-1

この画像は、吉田建工株式会社様のブログの一つから、許可を得て掲載しています。この記事で使わせていただいた画像もご協力いただいています。ありがとうございました。

スマホやタブレット端末、（最近の）デジカメ（→これらのデジタル撮影機器を、これ以降、単に「カメラ」と表記）で撮影した画像で、ブログに直接掲載すると、端末の画面では縦になっていたものが、ブログでは横になってしまうということがたびたびあるようです。

これは、実は、ブログに掲載すると横に倒れてしまうのではなく、本来は横向きの画像なのに、“縦向きに撮影した”というデータを画像に持っているため、タブレット端末やWindows8（8.1）などの画面上では縦にして見せてくれているだけなのです。このデータを「Exif（イグジフ）データ」などと呼びます。

Exifとは

一般的にカメラで撮影された画像データはjpeg（またはjpg／ジェイペグ／Joint Photographic Experts Group＝この規格を作った団体名が形式名になっている）という形式になっています。これに撮影情報（日付やカメラの機種、露出、絞り、等）が付加されていますが、この情報の形式は「Exif（イグジフ／Exchangeable Image File）形式」という規格に統一されています。

最近のカメラはカメラの向きを感知するセンサーが付いていて、縦長の画像を撮りたくてカメラを時計回りに90度傾けて撮った場合、「向き」＝例えば「（右回りに）90度回転して撮影した」というような情報が画像に書き込まれます。

これも具体的に見てみます。

■Picasaを使用して

図-2

PicasaはGoogleの提供する無料の画像管理ソフトで、簡単なレタッチや各種エフェクト（効果）をつけられるので利用していますが、図-2のようにExif情報を見ることができます。これを見ると、「方向　90度回転」と表示されています。（Picasaのエフェクト機能については、『【Picasa 3.9】無料のレタッチソフトで画像に効果を与える』で記事にしてあります。）

■Firefoxブラウザのアドオン（Exif Viewer）を使用して

図-3

ここでも「画像方向　90度回転」と表示されています。

アドオン（Add-on）とは「追加する（した）機能」という意味で、ここではブラウザ（Firefox）に追加した拡張機能です。このアドオンは「Exif Viewer」というもので、http://araskin.webs.com/exif/exif.htmlからダウンロードしてFirefoxに追加することができます。

このアプリをインストールすると、画像の上で右クリックしたときに表示されるメニューに、「画像のExifデータを表示」という項目（図-4）が加わり、それを選択すると、図-3のようなウィンドウが表示されます。なお、図-3を見ると分かりますが、「ローカルファイル」という項目があるので、ブラウザ上で表示している画像だけでなく、自分のPC（＝ローカル）にある画像も指定することができます。

図-4

Windows8やWindows8.1のExif情報の扱い方

多分、“ブログに掲載した縦向きの画像が横になってしまう”という問題は、特にWindows8になってから経験した方も多いと思います。（ブログ主はメールに添付された画像をフォルダに保存して見ると、自動的に縦に回転してくれるので気づきました。）

カメラで撮影した画像をPCに取り込んだ場合、どこかのフォルダ、例えば「ピクチャ」というフォルダ（※1）に入れることになりますが、Exifの撮影情報を読み込んで自動回転して表示するという機能はWindow8から追加された機能だからです。（→マイナビニュース『OSの使い勝手を左右し、重要な存在となる"エクスプローラー"改良ポイント - Windows 8レポート』）

しかし、この情報を読み取って自動的に回転させてくれないWindows7以前のフォルダ（※2）やブログでは、“元の横向きの画像”のまま表示されてしまうわけです。

※1、※2：「フォルダ」と書いていますが、正確には「エクスプローラー」というアプリ（左のアイコン）でPC内のフォルダを閲覧しています。上の記事はWindows8以降のエクスプローラーが自動回転して表示するようになったと書いています。

試しに、図-2に表示されている画像をココログのウェブページにアップしてみると、既に編集画面で横向きになります。

図-5

これを解消するには？－概論－

ここまでお読みになって、Exif情報、特に「画像の方向」が縦を“正位置”として保存し直すツールが必要だということはおわかりになると思います。これは通常、そのような機能がある画像編集アプリで行います。

現代では、使っている端末（PC、スマホ、タブレット）だけでなく、OSも様々で、例えば、タブレット端末だけでもiPad（アイパッド）、Android（アンドロイド）、Windows（ウィンドウズ）のタブレットがあります。 そこにインストールされている、あるいはインストールできるアプリも異なるので、自分の環境に合った方法を見つけるしかありません。

残念ながらブログ主はタブレット端末を所有していないので、以下、Windows8.1の環境で、Exif情報が付加されている画像を使って検証し、外部の『タブレットで納得のいく写真に仕上げよう！』という画像アプリを紹介する記事だけご紹介しておきます。（これらのアプリでExif情報の書き換えができるかどうかは分かりません。また2013年10月22日の記事なので、今では他にも良いアプリがあるかと思います。）

あと、ブログに掲載したときに横に倒れたり倒れなかったりする、というのは、センサーが誤操作？しているのかも知れません。実際にきっちり90度傾けて撮影するとは思えないので、許容範囲みたいなのがありそうです。

いずれにしても、Exif情報を自分で確認するのが最も正確ですね。

これを解消するには？－各種アプリのテスト－

先にアプリ毎のテスト結果をまとめておきます。（○は成功、×は不成功、×?の理由は後述）

• ペイント（Windows PCに入っているソフト）　･･･○
• Adobe Photoshop Elements 11（有料）　･･･○
• Picasa（無料）　･･･○
• Jtrim（無料）　･･･○
• Microsoft フォトギャラリー（無料）　･･･×?
• Windowsの機能で画像のプロパティを削除／回転　･･･×

基本的には、画像ソフトに読み込んで、そのまま保存するだけです。読み込んだ際はExif情報に基づいて縦向きになっていますが、保存した画像のExif情報は書き換わっています。

【説明】

■ペイント

これは、Windows パソコンの黎明期からアクセサリとしてインストールされているアプリです。（図-6）これを使うと、縦向きのままExif情報を書き換えてくれます。

下はペイントの操作方法なので、ご存じの方は読み飛ばして下さい。

図-6

フォルダから画像を開くときに、直接ペイントを指定することもできます。（図-7）

図-7

画像の上で右クリックして表示されるメニューから「プログラムから開く」を選択すると、画像を扱えるアプリの一覧が表示されるので、「ペイント」を選択します。

なお、「規定のプログラムの選択」を選択すると、JPGファイルと紐付けるアプリが選択でき（図-8）、次回から画像をダブルクリックするだけで、毎回そのアプリで開くことができます。

図-8

ペイントで画像を開いたあとは、メニューから「名前をつけて保存」→「JPEG画像」で保存します。

ちなみに下はペイントでなにも編集せず、単に別名（exif_paint.jpg）を付けて保存した画像をPicasaで見たところです。Exif情報が「方向　ノーマル」となっており（図-9）、更に下の方を見ると、サムネイルも縦になっています。（図-10）

図-9

図-10

図-10は図-2の画像（元画像＝exif_org.jpg）のサムネイル部分を合成したのですが、Picasa上で縦になっていても、本来は横向きだというのが分かります。

操作方法の違いなので、詳細は省きますが、「Adobe Photoshop Elements 11」（※）や「Picasa」も同様の処理をしてくれます。

※Photoshop Elements公式サイトでは、「EXIF データは、撮影したJPEG形式自体に保存され、また Photoshop Elements で上書き保存してもデータは消去されません。」と記載されているように「画像の方向」以外の撮影データは保持されます。

http://helpx.adobe.com/jp/photoshop-elements/kb/224171.html

■ＪTｒｉｍ

これは、無料でダウンロードできるアプリで、例えば下記の場所からダウンロードすることができます。（「窓の社」のJtrimのページ）

http://www.forest.impress.co.jp/library/software/jtrim/

このアプリを使う際は、保存の前に「ファイル」→「保存オプション」で「Exifデータを保持する」のチェックを外しておく必要があります。（図-11）これで保存した画像をPicasaで見ると、図-12のように、画像の向き以外のExif情報も消えているのが分かります。（JTrimは画像を読み込むと縦ではなく、本来の横向きに表示されるので、画像を回転させてから保存します。）

　図-11

　図-12

■Microsoft フォトギャラリー

MSのアプリで、以前のPicture Managerの後継として、画像や動画ファイル管理の他、簡単なレタッチもできるソフトです。

公式サイトFAQでは、下記のような記述があり、フォトギャラリーを開いてから画像を読み込む場合、“画像の自動回転をオフ”することもできると読み取れますが、オリジナル画像をUSBメモリーに保存して読み込むテストをしてみても、（オフにしてもしなくても）必ず縦向きに表示され、想像しているような結果が得られないので、このアプリの評価は保留とします。

http://windows.microsoft.com/ja-JP/windows-vista/Windows-Photo-Gallery-frequently-asked-questions

「保存した画像が回転してしまいます。回転しないようにできますか？」

写真を縦に撮ったか、横に撮ったかを (通常はカメラの向きを感知するセンサを使用して) 検出できるカメラをお使いの場合、JPEG 画像を保存するとコンピュータで自動的に回転して、向きを修正できます。このオプションを使用する場合、横向きに表示される画像を手動で回転する必要はなく、画像の品質にも影響を及ぼしません。

■Windowsの機能で画像のプロパティを削除／回転

これは、Exif情報も一部削除してくれるのですが、試したところ、画像の向きは削除できませんでした。ただ、情報として提示しておきます。

　図-13

これは、Windows のフォルダで、画像の上で右クリックして表示されるメニューから「プロパティ」を選択して、「このファイルから次のプロパティを削除」を選択（図-14）すると、Exif情報も一部消せるようだったので試してみたものです。（画像は、Picasaの画像と合成してあります。）

図-14

Exif情報の一部も削除できますが、主目的ではないようです。

---

【ブログの楽しみ方】複数の画像を横に並べる方法【ココログ】

ここでは下のように複数枚の画像を横に並べる方法と、上手くいかないときの対処方法を説明します。

このように複数枚の画像を横に並べ、文章をその下に配置するには、左の画像と中央の画像を挿入するときは「画像の挿入」ダイアログボックス（下の図）の「画像の配置」で、『左（記事回り込み）』を、最後（右）の画像を挿入するときは『左』を選びます。最後の画像で『左』を指定することで「記事の回り込み」が解除され、次の文字を画像の下から始めることができるのです。

　図－１

しかし、場合によっては2枚目の画像が思ったところではないところに挿入されてしまったり、3枚の画像の横幅がブログの幅より大きくなり、きれいに横に並ばずに、例えば一番右の画像が下に落ちてしまったりすることがあるかもしれません。

そういう場合、「HTMLの編集」モードで修正するコツを知っていると便利です。

ココログでは、「記事の編集」モード（リッチテキストモード）を使用してワープロソフト感覚で文字を装飾したり、画像を挿入したりして記事を書くことができますが、実際はHTMLタグと呼ばれるコードで書かれており、それを編集できるのが「HTMLの編集」モードです。

■1枚目の画像の挿入

図－１のように、『左（記事回り込み）』を指定して挿入します。

■2枚目の画像の挿入

図－２

『左（記事回り込み）』を選ぶと、文字を書く場合はそのすぐ右側から始められるので、画像の右側でクリックすればカーソルを図のような位置に置くことができるはずです。

これが上手くいかない（上手くクリックできない）ときは、「HTMLの編集」モードに変えて、下のように操作してみて下さい。

図－３

【図－３訂正】①の位置で（改行することなく）③画像の挿入を行っても構いません。（ブログ主は「HTMLの編集」画面で操作することが多いので、見やすいように改行しているだけです。）

下図の上の画面のように画像が挿入され、「リッチテキスト」モード（下の画面）に切り替えると、画像が並んでいるのが分かります。（作業をブログ記事ではなくwebページで行っているので「記事の作成」ではなく「リッチテキスト」と表示されていますが、同じ意味です。）

図－４

次は最初に説明したように、2枚目の画像の右側にカーソルを置いて、画像の挿入を行う際に「画像の配置」で『左』を指定すればいいのですが、トラブル対処のための知識として、もう少し説明を続けます。

ここもう一度、「HTMLの編集」に切り替えてみます。

図－５

図－４の上の画面ではなかった、「<p>」、「</p>」が自動的に付加されています。これは改行マーク（正確には「段落」タグ）で、「<p>～</p>」で挟まれた部分は“一つの段落”になります。

通常、段落と段落の間は改行され、少しスペース（見た目は1行くらいの空白行）が空きますが、1枚目の画像を挿入したときに『左（記事回り込み）』を指定したために改行されることなく、次の段落（＝次の画像）が続いているのです。

図－１を見ると分かりますが、『左（記事回り込み）』を選択すると、右側に下のようなサンプルが表示されます。

図－６

■3枚目の画像を挿入

「画像の配置」で『左』を指定します。この時、「HTMLの編集」モードで挿入する場合は、一度「記事の編集」（リッチテキスト）モードに切り替えてからもう一度「HTMLの編集」にして、2枚目の画像のHTMLタグに「<p>～</p>」が挿入されている状態で行って下さい。

なお、図－１のように、クリックすると拡大画像（元々の大きさの画像）が別ウィンドウで表示されるように画像を挿入した場合、HTMLタグは下のような構造をしています。

<p><a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2013/09/19/cocolog_img01.jpg" onclick="window.open(this.href, '_blank', 'width=468,height=719,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img width="200" height="307" border="0" alt="Cocolog_img01" title="Cocolog_img01" src="http://daishi100.cocolog-nifty.com/blog/images/2013/09/19/cocolog_img01.jpg" /></a>　図－１


</p>

緑の部分（<a href="画像の存在する場所（URL)" >～</a>）はサムネイル画像（ブログ記事に表示される小さな画像）をクリックしたときに開くリンク先を表すHTMLタグで、いずれにしてもその前後を「<p>～</p>」で囲んでいるのが分かると思います。

さらに付け加えると、黒地の部分はサムネイル画像が存在している場所を示しています。（<img ～ src="サムネイル画像が存在する場所（URL）"/>）

これで分かるように、ブログ記事に画像を貼るということは、記事に直接画像が貼り付いているのではなく、ある場所に“元画像”と“サムネイル画像”を保存し、実際はHTMLタグでその場所を指定しているだけです。（ページが表示されるときに画像を呼び出しているので、1ページ内に大きな画像を多用すると、それだけ表示が遅くなり、“重たい”ページとなります。）

■ 「画像の配置」で、『左（記事回り込み）』や『左』を指定し間違えてしまった場合

「HTMLの編集」で2枚目と3枚目の画像のHTMLタグを比較してみます。

●2枚目（画像名：Wallp02）

<p><img border="0" alt="Wallp02" title="Wallp02" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/09/19/wallp02.jpg" style="float: left; margin: 0px 5px 5px 0px;" />
</p>

●3枚目（画像名：Wallp03）

<p><img border="0" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/09/19/wallp03.jpg" title="Wallp03" alt="Wallp03" />
</p>

画像名が異なるのは当然ですが、大きな違いは2枚目には青地で示した「style="float: left; margin: 0px 5px 5px 0px;"」があり、3枚目の画像にはないことです。

実は『左（記事回り込み）』と『左』はこのHTMLタグを挿入するかどうかを指定するもので、このHTMLタグ（style要素）があるから次の段落がすぐ左から始まるのです。

詳しい説明は避けますが、この中にある「margin」は画像の周囲のスペース（マージン）の大きさを表していて、画像と画像の間に少し隙間が空くのは、「5px（ピクセル）」という指定のためです。

ですから、指定し間違えても、「HTMLの編集」で、1枚目と2枚目にこのstyle要素を貼り付け、3枚目にはないように手で編集すればいいのです。「style="float: left; margin: 0px 5px 5px 0px;"」の前後には必ず半角のスペースを一つ入れて下さい。

■画像を並べたら、記事の幅より大きくて、横に並ばなかった（下の行に落ちてしまった）場合

ブログの記事の幅はブログのデザインによって異なり、このブログは450px（ピクセル）くらいの幅があります。3枚の画像を横に並べたとして、各画像の幅とマージンの合計がこれよりも大きいと、横に入りきれずに最後の画像が下の行に落ちてしまったりします。

このような場合は「width要素」でサムネイル画像の表示サイズを小さくすることで解決します。

以下、このwidth要素について解説します。

「■3枚目の画像を挿入」で説明したように記事上に表示される画像は「<img ～ src="サムネイル画像が存在する場所（URL）"/>」で指定されています。

下の画像は、「画像の挿入」時、「ページに表示する画像サイズ」で『サイズを指定する』を指定して「64px」と入力しました。

ここでこの画像のHTMLタグのうち、<img ～ />の部分だけを注目して見てみると、下のようになります。

<img width="64" height="64" border="0" alt="Wallp01_2" title="Wallp01_2" src="http://daishi100.cocolog-nifty.com/blog/images/2013/09/19/wallp01_2.jpg" />

注目すべきはピンクの部分です。『幅』（＝width）を「64px」指定したので、（元々128×128の画像のため、）『縦』（＝height）のサイズも自動的に「64」と設定されます。この数字を弄れば、記事上に表示される画像のサイズも微調整できます。

この、widthとheightは片方だけ指定してもよく、例えばwidthだけ指定しても、縦横比を維持して表示してくれます。

ためしに「width="40"」と指定し、「height」の部分は削除してみると、下のように表示されます。

このHTMLタグは以下の通りです。

<a onclick="window.open(this.href, '_blank', 'width=128,height=128,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2013/09/19/wallp01_2.jpg"><img width="40" border="0" src="http://daishi100.cocolog-nifty.com/blog/images/2013/09/19/wallp01_2.jpg" title="Wallp01_2" alt="Wallp01_2" /></a>

このように、「width="xx"」を「img」の直後にでも記入すれば、サイズを微調整できるのです。（前後に必ず半角スペースを入れて下さい）

下はこのページの上に貼った3枚の画像のHTMLタグをコピーして貼り付け、<img ～/>タグの中に「width="100"」を追加しました。

なお、「<img ～ />」タグの中は比較的自由に各要素（ex width要素）は置くことができるので、「「img」の直後にでも」と書きました。

（拍手はブログ主のモチベーションup程度の目的です。面白かった、役に立った、等々、宜しければクリックしてください。）