Blogger の記事投稿時に写真をアップロードすると、自動的に写真の色合いが補正されるようになっているそうです。

• のんびりポタ・ランニング: BloggerにJPEG写真をアップロードすると色や彩度が自動補正されるようになった?
• Bloggerで、jpg画像をアップロードして表示させると、白色が灰色（グレー）ぽくなる問題について | 某氏の猫空

実際に、真っ白な JPEG 画像を投稿してみると…こんな風になりました。


たしかに、やや灰色がかった画像に差し替えられていますね。いつの間にか、この「自動補正」機能が、デフォルトで有効になっているようです。ちなみに、補正の対象になるのは JPEG 画像で、PNG 画像についてはそのままの色合いで表示されるそうです。


新規写真について

新しく投稿する画像に対して、この「自動補正」機能を無効にするには、Google+ での設定が必要です。下のリンクから Google+ のアカウント設定画面を開き、「自動補正」の項目のラジオボタンで「オフ」を選びます。

• Google+ - アカウント設定

これで、新しい写真に自動的に補正がかかることはなくなります。


補正後の写真について

すでに補正された画像については、上のような設定をしても、自動的には補正は解除されません。ブログ全体の画像を元に戻したい場合には、Google+ からアルバムを開いて、「下矢印」から「自動補正を適用」の項目で「オフ」を選びます。


ブログ全体の写真一括ではなく、「写真によっては自動補正を残しておきたい」という場合には、Google+ で個別に写真を開いて、「もっと」から「自動補正」の項目を出して「オフ」を選ぶことで、その画像だけ自動補正を解除することができます。



Blogger と Google+ が連携していくのはいいんですが、ブログの使い勝手が悪くなるというのはちょっと困りものですね…。写真が思ったように表示されない！と困っていた人は、ぜひお試しください。

Blogger ブログで写真をクリックしたとき、上の画像のように、ページ全体が暗くなって写真が中央に拡大表示される「ライトボックス」という機能が働くようになっています。

が、いつの間にかこれが動かなくなっています。対処法を探しているうちにみつけたのがこちらの記事。

• The Real Blogger Status: The LightBox Image Display Option Stopped Working, Recently

こちらによると、Blogger 管理画面「テンプレート ＞ HTML の編集」で、最後の </body> と </html> の間に次のコードを貼り付けると回復するとのことです。


すべてのブログの LightBox 機能が復活するわけではないようですが、写真ブログを運営している人なんかは、ひとまず試してみるといいと思います。


関連：

• Blogger に Lightbox 再登場 | クリボウの Blogger Tips
• Blogger、 Lightbox 導入するもすぐにロールバック | クリボウの Blogger Tips

上の画像は、Blogger の投稿編集画面「HTML モード」から「画像を挿入」ボタンをクリック、PC 上の画像ファイルを選択して、「選択した画像を追加」ボタンを押したところのスクリーンショットです。画像の表示サイズが確認されなかったことに気づかれたでしょうか？

この問題を最初に教えてくれたのは鷹野さんの Google+ の投稿。いつも、ありがとうございます。

• 鷹野凌 - Google+ - Bloggerの画像アップロード、HTMLエディタ側でサイズ変更できなくなっちゃいましたね……不便。

HTML モードから画像をアップロードすると、画像の長辺が一律 320 ピクセルに、レイアウトも文字の回り込みなしの単純な左寄せに自動的になるようです。

では、「HTML」モードで投稿を書いている人は、どう画像の表示サイズを変えればいいかというと、「作成」モードに移動してから画像をクリック、サイズや配置をメニューから選ぶという手順になると思います。


Blogger の場合、「HTML」モードと「作成」モードとを行き来するだけで、投稿本文中のタグがどんどん違うものに変換されてしまうという問題があるため、「編集中にあまりモードを替えたくない」という人も少なくないはず…。「HTML」モードでもっぱら記事を書いているユーザーには、ちょっと不便な仕様になってしまいましたね。

Google の提唱しているウェブ向け画像フォーマットとして、WebP というものがあります。

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。

WebP - Wikipedia

と、非常に高い圧縮率を誇る静止画フォーマットなんですが、Blogger や Picasa ウェブアルバム、Google+ に画像をアップロードしていれば、簡単にこの形式へ画像を変換することが可能なようです。

ネタ元はこちら。

• Google Operating System: Convert Images Hosted by Google to WebP

WebP フォーマットへの変換方法

やり方は簡単、Google のサービスにアップロードした画像をブラウザで表示し、その URL


のサイズを指定している部分（赤字部分）に -rw の 3 文字を加えるだけ。


元の画像がこちら、WebP 形式に変換したのがこちらです。画像自体はほとんど見分けがつかない（確認は Chrome がおすすめ）のに、289 KB から 57 バイトへと約 4 分の 1 にファイルサイズが減少しています。


画像比較

画像比較用に、ノゴマとか


シャム猫とか

サトキマダラヒカゲを載せておきます。


ちなみに、WebP として上に表示しているのは WebP に変換したあと、ブログ掲載用に再び JPEG に変換したものです。ファイルサイズ減量の割に、ほとんど見分けがつかないと思います。自分のいろいろな画像で試してみるといいかもしれませんね。


掲載写真について

あと、今回掲載した写真自体に興味があるという方は、

• クリボウの写真日記

をフィードリーダーの片隅にでも登録してもらえるとうれしいです。

現在、Internet Explorer で Blogger の投稿編集画面から画像をアップロードすることができないという不具合が出ているようです。写真ブログを開設している人なんかには痛手ですよね。

• Known Issues for Blogger

Known Issues for Blogger によると、現在 Blogger チームが調査中とのことです。また、当面これを回避するための方法についても 2 つ紹介されていました。


「Blogger 画像 アップできない」という検索フレーズで、このブログにたどり着く人が急に増えてきたので、取り急ぎ紹介しておきます。画像が投稿できない！という人は、一度試してみてください。


追記（2013-01-25）：

Update, 1/22: This is now fixed, thanks for your patience.

とのことで、ようやく不具合が解消されたようです。

サイドバーに画像を表示するガジェットとして、Blogger には「スライドショーガジェット」というのもが存在します。このガジェットを使うと、Picasa ウェブアルバムや Flickr やその他写真を含む フィードを登録することで、簡単にスライドショーを設置することができます。



このブログのサイドバーに、試しにつけてみたのが下の画像。



「小さい！」というのが第一印象なんじゃないでしょうか。ガジェットのタイトル間が妙に空いてしまうのも困りものですね。ガジェットの設定画面で調節できるといいんですが、あいにくこのガジェットの設定画面には、画像の表示サイズを指定する項目がありません。

そこで、今回のブログカスタマイズです。表示される写真を拡大して、最終的にこんな感じになります。



手順

１．ブログの管理画面「テンプレート ＞ HMTL の編集」（旧インターフェースでは「デザイン ＞ HMTL の編集」）を開きます。

２．次のコードをみつけます。（ブラウザの検索機能を使うと便利です。）

３．そのコードの直前に、以下の赤字のコードを挿入します。
４．「テンプレートを保存」ボタンを押します。

これだけです。

下線部分の値はこのブログ用のものになっています。自分のブログのサイドバーのサイズに合わせて使ってください。width をサイドバーのコンテンツの幅にして、height の方は写真の中で一番多いアスペクト比で指定するのがいいんじゃないでしょうか。

たとえば、うちのブログの場合、サイドバーのコンテンツのサイズは 320px なので、少し余裕を持たせてガジェットの幅（width）は 300px に、写真はほとんどが横縦比 3:2 なので、高さ（height）を 200px に、という風に指定しました。

みなさんも、ぜひいろんなサイズでスライドショーをレイアウトしてみてください。

参考：

• How to Change Slideshow Size? ~ The Blog Doctor.

次のページで知った、Blogger ブログへの GIF アニメの投稿の仕方。

• マルカジリます。: Bloggerでブログを書いてて気づいた豆知識２点

Blogger の新・旧のインターフェースと、HTML モード・作成モードの組み合わせで、実際に GIF アニメをアップロードしてみました。

新インターフェースの「HTML」モードの場合

新インターフェースの「作成」モードの場合

旧インターフェースの「HTML の編集」モードの場合

旧インターフェースの「作成」モードの場合

ちょっと分かりにくいんですが、新インターフェースで「作成」モード のときだけ、表示画像もリンク先もアニメになっていると思います。ほかのはどちらも静止画ですね。

ということで、今のところ GIF アニメを投稿するには、新インターフェースの「作成」モード で画像をアップロードしましょう、という Tips でした。

ブログの投稿中の画像をクリックすると、ページ移動せずにページ全体が暗転して中央に画像が表示される仕組みを「Lightbox」といいます。この Lightbox 機能、華々しく Blogger に登場したもののすぐに停止されてしまったニュースが、まだ記憶に新しいと思います。

• クリボウの Blogger Tips: Blogger、 Lightbox 導入するもすぐにロールバック

この機能が、今回戻ってきました。

• Lightbox update | Blogger Buzz

表示例：


　　　（宣伝：よかったら、クリボウの写真日記も読者登録してみてください。）

今回もすべてのブログのデフォルト動作として、画像クリック時は Lightbox が動くようです。が、前回と違うのは、Lightbox を使用しないというオプションが用意されたこと。


Lightbox 停止方法

Lightbox を停止するには、新ダッシュボードの場合、「設定 ＞ 投稿とコメント ＞ Open images in Lightbox」という項目で、旧ダッシュボードの場合は「設定 ＞ フォーマット ＞ Open images in Lightbox」の項目で「いいえ」を選択します。

ブログをカスタマイズして独自の画像表示機能を導入している人は、ぜひお試しください。

Blogger ではこれまで、ブログ上で画像をクリックした場合、大きな画像へと移動するだったんですが、先週（2011-09-19） Blogger チームは、画像をクリックするとページの移動なしに画面が暗転し、中央に拡大画像が表示される仕組み「Lightbox」を Blogger に導入しました。

• Blogger Buzz: Your images never looked so good

これは、Google+ でストリーム上の画像をクリックしたときと同じ振る舞いですね。最近 Google のブランド戦略として、Blogger ダッシュボードが Google+ 風にリニューアルされましたが、それと同じ流れなんでしょうか。


（画像は Google+ 上のもの）

ところが、この「Lightbox」、カスタマイズで別の画像表示方法をすでに導入しているブログ上で多く問題が起こったようです。Blogger チームはそのフィードバックを受けて、画像をクリックしたときの挙動を現在元に戻しています。

Updated 09/21/11: After listening to your feedback we've decided to roll back and make improvements to the Lightbox feature. We will update this blog as soon as the feature relaunches.
（クリボウ訳：2011-09-21追記：みなさんのフィードバックを聞いて、ロールバックと Lightbox 機能の改善を決定しました。機能が復活したら、すぐにこのブログでお知らせします。）

Blogger Buzz: Your images never looked so good

クリボウとしては、結局新機能を試す暇がなかったんですが、Blogger には Blogger in Draft（Blogger の新機能のテストラボ）もあることだし、全ユーザーのデフォルトの振る舞いをいきなり変えるのではなく、オプションで選択できるようにしておけば混乱が少なかったように思います。

ともかく、ブログでの画像の見せ方については、いろんな選択肢があった方がいいと思うので、機能改良して、またすぐ復活してくるのを期待しています。

Picasa ウェブアルバムの仕様変更

Blogger に投稿した写真の表示サイズを、後から変更するための記事を発見。

以前、Blogger のテンプレートをつくった際に、画像の大きさについて参考にしたのが、
　　・クリボウの Blogger Tips「Blogger で画像の表示サイズを変更する方法(2008/01/05)
他の画像サイズを使いたかったので、FireBug を使って調べたことがあります。結果、他のサイズも使えるようなので、その画像サイズのまとめを紹介します。記事が 2008 年と少し古いので、その後サイズが追加されたのかもしれません。

Blogger にアップロードした画像サイズを変更する方法 まとめ | Blogger カスタマイズ情報ブログ

ここで紹介していただいているように、このブログでも画像のサイズ変更について、一度解説をしたことがあります。

• Blogger で画像の表示サイズを変更する方法

これは、画像アップロード時の「大」「中」「小」以外で指定できる写真のサイズを列挙した記事だったんですが、Picasa ウェブアルバムの仕様が変更されて、現在では随分状況が変わってきているので、再度記事にしておこうと思ったわけです。

その仕様変更というのは、

記事が 2008 年と少し古いので、その後サイズが追加されたのかもしれません。

と書かれているような固定サイズ（32px、48px、64px、72px…）の追加ではなくて、画像サイズを 1 ピクセルから 1600 ピクセルまでの任意の長さで、自由に指定できるようになったということ。

論より証拠というわけで、下に Blogger へアップロードした画像を掲載してみました。入力部に 1 ～ 1600 を指定して「変更」ボタンを押すと、ちゃんとそのサイズに変更される…はず。

長い方の辺の長さ：
URL:	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAekCrm2oVON4aQ5ilcGQ7QTHI0Hdz-9XqexRqKfktJPhFbHsSF5i6c6N7s4C4eBoo5EbQjO9SOWa3vePslEmIx3Sg1U9USd59XNO3eX3VDmHRX3A9cAV8gbLArflloQw_Orcp/s400/DSC_5864.JPG

画像サイズの変更方法

では早速画像サイズの変更方法を紹介します。「新しいエディタ」で、画像をアップロードすると、表示されるのがこちらの HTML コード。


ブログ上に実際に表示される画像のサイズが赤字部分、リンク先の画像のサイズが青字部分で指定されています。前述したとおり、この src 属性や href 属性の URL 中の値、「sなんとか」という文字列の「なんとか」部分の値で、画像の長い方の辺の長さ（横長画像なら横の長さ、縦長画像なら縦の長さ）を指定することができます。この値の範囲は 1 ～ 1600。たとえばこの画像で「s500」で指定すると、幅が 500 ピクセルとなるように自動的にリサイズされた状態で、Picasa のサーバーが画像を送ってくれるというわけです。

コード中、width（幅）、height（高さ）の属性は、送られてきた画像を、パソコンのブラウザで最終的にどのようなサイズに拡大縮小して表示するのかを指定しているもの。なのでこれらの数値は、送られてくる画像の縦横の長さに一致させる必要があります。「sなんとか」の部分を調節した URL を直接ブラウザで表示して見て、タイトルバーに表示されるサイズを確認したり（Chrome、Firefox）、右クリックから「プロパティ」で確認したり（IE）するのが１番楽だと思います。が、調べるのが面倒だという場合は、width="***"、height="***" の文字列をごっそり削除してしまっても OK です。これらの属性が省略されている場合、ブラウザは送られてきたままのサイズで画像を表示してくれます。

（補足：じゃあ、原寸で表示する場合は width、height を指定する意味はないのかといえば、そうではありません。width や height の指定がないと画像読み込みまで文書全体のレイアウトが確定しませんが、指定しておくことで画像読み込みの速度に関わらず最初からレイアウトが確定させることができます。ので、指定する・しないで意見が分かれるのかもしれませんが、クリボウ的にはできるだけ width、height を指定するようにしています。）

ということで、自分のブログにあった画像サイズ、一度ゆっくり探してみてはいかがでしょうか。

これまで、Blogger の投稿編集画面から画像のアップロードを行うと、その画像は Picasa ウェブアルバム上の、掲載先ブログ名のついたアルバムに自動的に保存されていました。それが今回 Blogger in Draft 投稿エディタの更新で、アップロード画像の保存先アルバムをユーザーが自由に指定できるようになりました。

• Blogger in Draft: Better Image Posting on "Blogger In Draft"

Blogger in Draft の投稿編集画面で「画像を挿入」ボタンを押してみたのがこちら。



また、すでに Picasa ウェブアルバムで公開しているアルバムの中から、ブログの投稿に掲載する画像を選択できるようにもなっています。



一つのブログに掲載している写真を複数のアルバムに分けることができるので、写真をブログでもPicasa ウェブアルバムでも見て欲しいという人には朗報かと。新しい画像アップロード機能は、今のところ Blogger in Draft でのみ利用可能です。フォトブログをつけているひとは、ぜひ一度お試し下さい。

（これが 2008 年最初の投稿です。今年もよろしくお願いします。）

Japan Blogger Users Group | Google Groups に、Blogger の画像表示サイズについての質問があったので、こちらで回答します。

写真のアップロードについてなんですが、小、中、大という設定以外に掲載サイズを調整はできないのでしょうか？ どなたかご存知であれば教えて下さい。

記事内での写真サイズについて - Japan Blogger Users Group | Google Groups

コードをいじりますが、意外と簡単にできます。このとおり。


画像表示例


このブログではこれ以上の大きさの画像を載せられないんですが、
512px, 576px, 640px, 720px, 800px, 912px, 1024px, 1152px, 1280px, 1440px, 1600px
という「大」より大きいサイズも選択可能です。


表示サイズの指定方法

それでは、サイズ指定の仕方について。
Blogger の新規投稿画面もしくは投稿編集画面から画像投稿機能で画像をアップロードすると、本文入力用のテキストエリアにこのようなコードが表示されるはず。


このコードの中から赤字で示した箇所を見つけます。見つけ方は、img 要素（画像）の src 属性中「s なんとか」という部分。

ここが画像の表示サイズを指定している部分なので、ここを s72 や s1600 などに変更すれば、ブログでの画像の表示サイズ（サムネイルの大きさ）を変更できるというわけです。


サイズについて

指定するサイズの値は、表示される画像の縦横どちらか長い方のピクセル数になります。また、表示例で示したサイズ以外を指定すると、画像が出ないので注意してください。

アップロードした画像より小さいサイズが指定されている場合は、自動的に画像が縮小されます。実際の画像サイズよりも大きなサイズを指定した場合には、実際の画像のサイズで表示されます。

なので、特殊な場合ですが、ローカルで 300px にした画像をアップロードし s320 と指定すると、最初の 300px で表示することができます。この場合に s300 と指定してしまうとエラーになります。


リンク先画像の表示サイズ指定

応用として、リンク先画像の表示サイズを変更することも可能です。 さきほどのコードでいうと


赤字で示した箇所。見つけ方は、a 要素（リンク）の href 属性中「s なんとか -h」という部分です。

ここで s72-h や s1600-h など、掲載サイズのときと同じようにピクセル数を指定することができます。末尾の -h の部分ははずさずにそのまま。はずしてしまうとリンク先がブラウザで見られなくなるので要注意です。


ということで、Blogger ブログに掲載する画像のサイズ、色々と試してみてくださいね。

参考：

• clmemo@aka: Picasa Web Albums の写真をブログに貼り付ける時に、サムネイルのサイズを変える
• えをきば、: Picasa Web Albums 覚え書き

Blogger ユーザーには Flickr で写真を公開している人も多いように思います。かくいうクリボウも利用者なんですが、今日はこの Flickr から Blogger beta への写真投稿が便利になりました、というニュースです。

• Blogger Buzz: Flickr Support for Blogger in beta

この Flickr からの画像投稿の仕方については、@aka さんが詳しく解説されているので、ぜひそちらをご覧下さい。

• clmemo@aka: Flickr が Blogger Beta への画像投稿をサポート

クリボウはブログに写真を載せないつもりなんですが、フォトログをつけている人なんかはこの機能、便利だろうなと思います。


ところで、Flickr というと現在 Yahoo! が運営しているサービスですよね。Blogger beta に対応したからといって、Google のブログサービス Blogger の公式ブログで、喜んで紹介していていいのか、というツッコミが海外のブログでありました。

• Bloggeratto: Blogger Says: Use Flickr In Blogger v3.0

それより Picasa のアップグレードを急ぐべきじゃないの、と。そう言われてみるとそうですね…。