海夕 ～かいゆう～

リッチテンプレート変更しました

わざわざ書くまでもなく見ればテンプレートが変わったことはわかりますね。でも変更した理由をちょいと解説しときます。

今までは「プールにて」というリッチテンプレートを使っていたのですが、これでコメントを書いてプレビューすると、私がいつも使っているブラウザのsafariでは右端の文字がきちんと表示されないんです。文字が半分くらいに切れた状態で表示されてしまっていたのです。

そこでニフティに問い合わせてみたのですが、対応は推奨環境ではきちんと表示されるので、推奨環境でご確認のうえご利用くださいとのこと。safariが推奨環境ではないことは知っていますが、以前、別のテンプレートで同様の不具合を指摘したらきちんとスタイルシートを修正して対応してくれたのですが、今回は「推奨環境で…」ということなので、いちいちつっかかるのも面倒だし自分でスタイルシートを書き換えて使うのも面倒だから、手っ取り早くサブで準備していたテンプレートを使うことにしたわけです。

今回のリッチテンプレートは「浜辺の貝殻」というものです。海のそばで育った私としては海をイメージできるテンプレートということでこちらもすぐに使えるようにはしておいたので、サクッと入れ替えて終わりです。

ということで、新しいテンプレートになってもよろしくお願いいたします。

「日刊ココログ・ガイド」に紹介されてるよ

なにげなく「日刊ココログ・ガイド」を見て同じようなこと書いている人は多いよねって思ってたら、このしょぼいブログが紹介されていました。いやぁ〜、かなりビックリ！！ですわ。

（画像クリックで拡大）

記事のタイトルの付け方はもう少し考えた方がいいみたいだなぁ、なんて他の人のを見て感じてしまっているような状況で、自分のブログが紹介されているなんて気がつくわけもなくどんなことを書いてあるのか興味を持ってクリックしてたら、あらまっ、自分のところにきちゃったじゃん。

紹介されるのは嬉しいんだけど、紹介されるだけの内容が書いてなければせっかく訪れてくれた人にも失礼ですよね。そんなことを思いながらこの記事を書いているんだけど、じゃどうすればよいのか考える余裕もなくなんとなくやっています（汗）

「日刊ココログ・ガイド」を見て訪れてくれた皆さん、ありがとうございます。

ちなみに、@niftyトップページ下側の「今日の注目！ブログ」のコーナーでも掲載されていました。

画像のポップアップをひとつに

先日の『料理の写真（失敗・成功・修正）』という記事では複数の画像がポップアップウィンドウで開くようにしています。「画像の挿入」を使うときに画像オプションで「ポップアップウィンドウ」というのを選択しています。下の画像がそれです。

通常は小さめのサムネイルと呼ばれる画像を表示しておき、その画像をクリックすることでポップアップウィンドウにフルサイズの画像を表示させるという便利な機能ですが、サムネイルをクリックする度にポップアップウィンドウが開いてしまい、いつの間にかポップアップウィンドウだらけという状態になることがよくあります。

画像を大きくして見せたい時に便利な機能なのですが、ポップアップウィンドウだらけになるのは後片づけが面倒になってしまうので、同一記事のポップアップ画像はグループ化してひとつのポップアップウィンドウしか開かないようにしようということです。

まずは下の枠内を見てください。これがポップアップウィンドウで画像を開くように設定したときの内容です。意味不明の文字列がたくさんありますが修正するのは一部だけですから簡単です。

<a href="http://sea.moe-nifty.com/.shared/image.html?/kaiyu/images/sample/katu_1.jpg" onclick="window.open(this.href, '_blank', 'width=640,height=480,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img alt="写真１" title="写真１" src="http://sea.moe-nifty.com/kaiyu/images/sample/katu_1_s.jpg" width="200" height="150" border="0" style="float: left; margin: 0px 5px 0px 0px;" /></a>【写真１】 極端な露出不足でなにを写したのかよくわからないですね。ここまでの失敗はあまりないと思いますが、黒焦げの料理みたいでとても食べられる感じはしませんね。（画像クリックで拡大）

やたら長い呪文のような文字列に慣れないと戸惑うのですが、大切なのは下の枠内だけです。ここさえわかっていれば大丈夫ですから安心してください。内容はポップアップウィンドウをどのような状態で開きなさいという細かな設定が書いてあるだけです。

onclick="window.open(this.href, '_blank', 'width=640,height=480,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0')

さらに省略してポップアップウィンドウをグループ化してひとつにまとめるには、下の枠内の部分だけに注目してください。これは新規のウィンドウで開きなさいということを意味しています。こう書いてあればサムネイルをクリックする度にどんどん新規のウィンドウに画像が表示され画面上が散らかってしまうわけです。

'_blank'

今回はこれを下の枠内のように変更してみます。複数の画像の該当部分を下のように置き換えるだけです。今回は料理の写真のサンプルということもあり「sample」にしてみました。

'sample'

複数のポップアップ画像の該当部分を同じ文字（今回は「sample」）に置き換えるだけで、同じ文字を持つ画像はグループ化され同じポップアップウィンドウに表示されいくつものポップアップウィンドウで散らかってしまうのが防げるのです。

ちなみに『ドコモの新ロゴ実は5色！？』というおバカな記事でも同じことをしていて、こちらは「docomo」という文字列にしています。

ここでお気付きの方もいらっしゃると思いますが、「sample」と「docomo」と文字が違っていると実は別のポップアップウィンドウで開いてしまうのです。もちろん別のグループだから別のポップアップウィンドウで開いていいのでそうしているのですが、とにかくひとつのポップアップウィンドウで開いて欲しいという場合は「photo」といった文字で全て統一すると良いのではないでしょうか。

最後にひとつだけ注意点ですが、同じグループにしたい画像は同じサイズに統一しておくということです。「sample」にした画像は「640×480 pixel」で統一し、「docomo」にした画像は「500×120 pixel」に統一しています。

文字の回り込みを解除する

昨日の『料理の写真（失敗・成功・修正）』という記事では画像の右側に文字が回り込むように、「画像の挿入」を使うときに画像オプションで「テキストの回り込み」というのを選択しています。下の画像がそれです。

これはこれで便利な機能なのですが、画像の上下サイズより短い文章を書いた場合、昨日の記事のように画像の下に「（画像クリックで拡大）」といったように入れたい場合や、いくつも続けて画像を表示したい場合、思ったようにいかず下の画像のようになってしまいます。

これをちょっとした工夫で思ったとおり表示されるようにしようというのが下の枠内のおまじないです。

<br style="clear: both;" />

HTMLを勉強されているとわかるかと思いますが、ブログの機能をなにげなく使っているだけだと意味不明の文字列でしかありませんね。でも難しいことではなくこれを丸ごとコピーして使えばいいだけですから深く考える必要もありません。

とはいっても実際にどのように使うのか書いておかないとわからないでしょうから、少しばかり解説を書いておきます。
まずは下の枠内みたいに画像を表示させるための文があり、続けて画像の横に入れたい説明を書いておくことになります。すると上の画像みたいになるわけです。

<img alt="" title="" src="http://***.cocolog-nifty.com/blog/images/abc.gif" width="200" height="150" / >【写真１】
極端な露出不足でなにを写したのかよくわからないですね。（画像クリックで拡大）

これに先ほどのおまじないを付け加えたのが下の枠内で、文字の回り込みを解除したい所に挿入しておけばいいというのがわかっていただけたと思います。ガッテン！ガッテン！

<img alt="" title="" src="http://***.cocolog-nifty.com/blog/images/abc.gif" width="200" height="150" / >【写真１】
極端な露出不足でなにを写したのかよくわからないですね。<br style="clear: both;" />（画像クリックで拡大）

これで昨日の『料理の写真（失敗・成功・修正）』という記事みたいになるわけですが、おまじないの意味がわからないと気持ち悪いかもしれませんね。

じゃ、ちょっとばかり解説しておきます。では下の枠内を見てください。これは改行しなさいというおまじないです。

<br />

これで通常の文であれば改行されるのですが、文字の回り込みを設定したときはうまくいかないので、先ほどのように「style="clear: both;"」を付け加えて回り込みを解除して改行しなさいというおまじないにするわけです。

なぜこのようなおまじないが必要になるのかといえば、画像の横に文字を回り込むようにしたときに「style="float: left; margin: 0px 5px 5px 0px;"」というような、回り込みしなさいというおまじないが挿入されていたからなんですよ。

料理の写真（失敗・成功・修正）

おとといは使っているデジタルカメラやおすすめサイトの紹介をしましたが、ブログでよく見かけるようになった料理の写真の失敗と成功、そして画像の修正について少しばかり書いてみます。

使用カメラは Nikon COOLPIX P5100 というコンパクトカメラで、ポートレートや風景、スポーツなどのシチュエーションや被写体に合わせてモードを選ぶだけでイメージどおりの写真を簡単に撮影できるシーンモードがありますが、残念なことに料理モードは存在していません。

最近のコンパクトカメラは料理モードがついたものが多くなっているようですが、料理モードがついていないカメラでどうやったら料理の写真がうまく撮れるのか、というのが今回のポイントなのです。そして、せっかくだからうまく撮れた写真をもっとよく見せるにはどうすればよいのか、という点も簡単に書いておきます。

まず、昨日の夕食であったとんかつ店でサンプル用に撮ってきましたから順に見ていきましょう。料理の写真に詳しい人や見慣れている人から見れば幼稚な写真なのはご容赦ください。わかりやすさ優先で撮ってきました。

【写真１】
極端な露出不足でなにを写したのかよくわからないですね。ここまでの失敗はあまりないと思いますが、黒焦げの料理みたいでとても食べられる感じはしませんね。
（画像クリックで拡大）

【写真２】
フラッシュが発光してそれなりに写ってはいるのだけど平面的な感じです。なにを写したのかはわかるけど、あまり美味しそうには見えないので好んで食べたいとは思いませんね。
（画像クリックで拡大）

【写真３】
フラッシュの発光を停止してみました。なかなかそれらしい雰囲気になっていて、食べてもいいかなって感じになっていますが、揚げたての雰囲気はあまり伝わってきませんね。
（画像クリックで拡大）

【写真４】
写真３を画像処理ソフトで修正。テーブルをぼかし、お皿や盛られているものをクッキリとシャープに、色味を良くするために彩度を上げました。揚げたてで美味しそうな感じです。
（画像クリックで拡大）

さてどうでしたか？

ちょっとわかりやすくオーバー気味の写真にしていますが、これから料理の写真を撮ってみようという人にも違いはすぐにわかっていただけると思います。

【写真１】は暗いところでありがちな失敗で、フラッシュを発光しないように設定したのはいいんだけど露出がうまく合わず極端な露出不足となったもので、カメラのオートモードのままだとここまでひどい写真になる可能性は低いと思います。ただし、他のお客様がいらっしゃるからと思ってフラッシュを発光しないようにしただけだと、このような写真になってしまうこともあるでしょう。
これくらい極端な露出不足だと画像処理ソフトでの修正でも無理だと言えますから、すぐに撮り直しましょう。

【写真２】はよくありがちな失敗で、カメラの設定をオートのままで撮るとこのような写真になりやすいです。なにが写っているかわかるのはいいんですが、他のお客様がいらっしゃるお店でフラッシュが光れば迷惑になりますし、実際に撮った写真を見てもあまり美味しそうではないですね。美味しいものをブログに残そうと思って撮ったのに、なんだかイマイチって感じになってしまいそうです。
でも、この写真をうまく画像処理ソフトの「照明効果」という機能などを使えば少しはいい感じにはできるんです。

【写真３】はフラッシュを発光しないように設定し、露出も合うように少しばかり調整したものです。
カメラに露出補正の機能があれば少しプラス側にしておくといいですね。プラス0.7や1.0といった値で試してみるといいでしょう。カメラによっては露出を変化させて何枚か連続で撮影する機能などありますから、実際にどのくらい違うのか撮り比べてもいいでしょうね。
これくらいの写真になっていればブログで公開しても恥ずかしくはないと思いますし、もう少し美味しく見えるように画像処理ソフトで修正をかけるのも簡単です。

【写真４】は実際に写真３を画像処理ソフトで修正してみたものです。わかりやすいようにオーバーに修正をかけていますが、クッキリと浮き上がっていることと、海老のしっぽや梅肉巻の赤味がいい感じに鮮やかになっていますね。実際にここまでやると不自然な感じになってしまうので、撮ったものをあとで見てもっと鮮やかな色だったような、と思ったときは少し修正かけてみるといいでしょう。

細かい設定など省いた説明ですから、じゃ実際にどうすればいいのよと思われるでしょう。そんなときはおとといの記事で紹介したサイトの料理の写真のコーナーや、次に紹介するサイトにかなりわかりやすくポイントを書いてあるのでご覧になってみるとよいでしょう。

『デジカメ写真の上手な撮り方』（DECOBOXで節約上手）
http://decobox.boo.jp/camera/index.htm

『第8回　料理と写真とおいしさの関係』（今日から始めるデジカメ撮影術：ITmedia）
http://plusd.itmedia.co.jp/pcupdate/articles/0410/29/news045.html

『第35回　料理とおいしさの関係』（今日から始めるデジカメ撮影術：ITmedia）
http://plusd.itmedia.co.jp/lifestyle/articles/0511/10/news017.html

『第67回　料理とマクロと美味しさの関係』（今日から始めるデジカメ撮影術：ITmedia）
http://plusd.itmedia.co.jp/lifestyle/articles/0702/22/news010.html

『第92回　外食と食べ歩きの関係』（今日から始めるデジカメ撮影術：ITmedia）
http://plusd.itmedia.co.jp/lifestyle/articles/0803/13/news009.html

フリートーク

この記事はフリートーク用ですので挨拶や足跡など自由にコメントを書いていただいてかまいません。

このブログでのルール

コメントやトラックバック、その他、このブログでのルールを書いておきます。

楽しいやりとりのために、相手に不快感を与えるようなコメントやトラックバックはご遠慮ください。自分がされて嫌なことはしないのがいいですからね。

当方でスパムまたは広告と判断したコメントやトラックバックは容赦なく削除いたします。なお、トラックバックについては承認制としております。

2008年4月13日更新

このブログについて

コメント時のメールアドレス、アドレス(URL)の記入は自由ですが、お名前（ハンドル名）だけは記入していただけると嬉しく思います。名無しさんでは悲しいですので。

『今日のおサイフケータイ』はブログのトップページおよび『最新の記事（抜粋）』のリストから外して掲載しています。標準の『最新の記事』には無条件に表示されていますので、使い分けていただければ幸いです。

当ブログのルールはこちらを参照ください。