ブログ記事に合うFlickr画像を簡単に探せて、加工できて、コピペで貼れる「igosso画像検索」を利用する時に一点だけ注意した方がいいこと

RSSで自分の記事がどのように表示されるかあんまり気にしてなかった

新しいwebサービスを自分のブログに導入した際は、表示確認、そして、RSSでどのように見えるかまできちんと確認した方がいいみたいです@shintarowfreshです。

「igosso画像検索」を利用する時にトリミング機能を使って画像を任意のサイズに変更した場合、通常PCのブラウザでの画像の見え方とRSSリーダー上の画像の見え方が、くいちがう現象が起きているので、注意が必要かもと思い、記事を書いてます。

一応暫定的ではありますが、解決の方法が見つかったのでシェアします。

ブログに画像は必要？

当然必要でしょうね。少なくとも僕はそう思います。文章で伝えようとすれば恐ろしい行数を書かなければ、むしろどれだけ書いたとしても伝えられないほどの情報量を、一枚の画像だけで伝えることが出来る。といえば言い過ぎかもしれませんが、箸休め、気分転換、ちょっとしたアイキャッチは、やはりブログに華を添えるというモノです。

そこで今日はいごっそぉ！

• 権利的に問題ないFlickr画像を
• 検索して探せるし、トリミングしたり加工もできる
• ブログに貼り付けるのは、コードをコピペするだけ

以下サイトより引用します。

igosso画像検索は、flickrから無料で商用利用可能なフリー素材を検索するサービスです。
商用利用も可能な画像しか出ないようになっていますので、広告を掲載したブログにも使えます。
アニメや芸能人、商品写真などをお探しなら、ブログ画像ゲッターをチェックしてみてください。

自分で記事用に画像を用意するのは大変です。
こんなありがたいサービスがあるなら盛大に使わせてもらいましょう。

igosso画像検索 : 無料で商用利用可能なフリー素材/写真

使い方はほんとに簡単

↑とりあえず欲しいイメージを検索しましょう。

Flickrは世界で使われる画像オンラインアルバムサービスです。なので英語で検索した方がよりより結果が得られると思います。もちろん日本でも大丈夫です。
検索できたらそのままのサイズで使うのか、はたまた編集して使うのか選ぶことが出来ます。

この記事では編集して使う場合に起こる問題を書こうと思っているので、編集します。

↑編集画面です。
コードの下あたりの「トリミング(切り除き): する しない」で「する」を選ぶと任意のサイズにトリミングできます。

トリミングと位置の調整が出来れば、コードをコピーして、ブログ記事の任意の場所に貼り付ければ、画像の設置完了です。
全部がweb上でそしてブラウザ上で出来るなんて、ほんとにすばらしいです。

それではこの記事に上の画像を張ってみましょう。

(LOC) / The Library of Congress

どうでしょうか、きちんと表示されているでしょうか？されてますね。簡単ですね、ほんとに。

実は意外なというか、至極当たり前の落とし穴ががが

昨日書いた記事に対して推しブロの覇者@tamkaiさんから、こんな指摘をいただきました。

最近Flickrの写真をトリミングしてブログに貼っている人のエントリをRSSで見ると文字がめり込んで見づらいんだけどどうしてなの？このエントリでもなってた…。@shintarowfreshblog.quusookagaku.com/wordpress/4879/

— タムカイさん (@tamkai) 4月 12, 2012

あわてて確認したところ。

↑写真にもじが重なって、恐ろしく見にくい状態に！
RSSリーダーで見るとこんなことになってたんですね。

それもそのはず、コピペで貼り付けた画像は切り抜かれて、リサイズされた訳ではなく、CSSで余計なところが表面的に見えないようになっているだけなんです。実際は存在している画像を必要なところだけブラウザ上で見せているんです。

RSSリーダーは、各記事が読みやすくなるようにCSSを強制的にクリーンな状態に当て変えます。おかげで読みやすくなるんですが、今回の場合、CSSをキャンセルされてしまうと、上記のように写真に重なる状態になってしまいます。

おそらくこの記事もRSSリーダーで閲覧されている場合、画像と文字が重なって、見にくい状態になっていることでしょう。

<div style="position:relative;height:270px;width:620px;padding:1px;background:#333;"><a href="http://www.flickr.com/photos/library_of_congress/5228634951/" target="_blank"><img src="http://farm6.static.flickr.com/5163/5228634951_37d9a72cd9_z.jpg?zz=1" alt=" (LOC)" style="position:absolute;clip:rect(130px 617px 400px -3px);margin:-130px 0 0 3px;padding-bottom:5px;" /></a><span style="position:absolute;bottom:0;right:0;background:#333;color:#DDD;font-size:10px;padding:3px;"> (LOC) / The Library of Congress</span></div>
コードを見てみます。

やはり画像はCSSのclip:rect(上,右,下,左); position:absoluteで擬似的にトリミングされています。ブラウザ上では問題ありませんが、RSSリーダー側でclipプロパティーが解除されると画像に文字が重なってしまいます。

clip－スタイルシートリファレンス
clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。 CSS2の仕様で指定できる切り抜きの形状は矩形のみです。 …

しばらく実験をしてみます。
見苦しいかもしれませんが、かまわず続けます。

画像の最後にclear:bothをしこんだ場合。

(LOC) / The Library of Congress

どうでしょうか？
通常のブラウザ上では特に問題なく表示されてると思います。
別にフロートしてる訳ではないので、あまり関係ないでしょうか。

結果はわかっています、たぶんいま惨憺たる結果になっているでしょう。

これは画像にかかっているposition: absolute;が解除されるために起こっている現象だと思います。

画像を囲む＜div＞にoverflow:hiddenを足した場合

(LOC) / The Library of Congress

どうでしょうか？

おそらくですが、画像の表示位置は狂ってしまっていると思いますが、文字は重なってないのでしょうか。
しかしトリミングがずれたら画像の効果は半減してしまいますね。

一応この方法「overflow:hiddenを足す」を使えば文字と画像が重なって見えにくくなることはなくなりました。

対策は一番最初の＜div＞
<div style="position:relative;height:270px;width:620px;padding:1px;background:#333;">
に対して
<div style="position:relative;height:270px;width:620px;padding:1px;background:#333;overflow:hidden;">
overflow:hiddenを足せば、トリムされた画像の位置は狂いますが、文字と画像が重なることはなくなります。

正しくは

このスクリーンショットのように表示したいのですが、コレばっかりはちょっと方法がないかも知れません。

ふだん画像を表面上トリミングするclip:rect(上,右,下,左); position:absoluteを使わないので、問題をハックでかわす方法がいまいちわかりません。
なんかあっさり解決できそうでもやもやします。

もしこうしたらいいよと知恵があれば、是非教えていただきたいです。

フレッシュの目線それは左眼だけ二重な

冒頭にも書いていますが、この記事は実験段階です。
実験後に、もうちょっとまともな感想が書けると思います。

実験が終わったので追記してます：超暫定的で、致し方ない方法です。力不足を感じてますが、もうわからないことはわかりません。

とりあえず製作者さんにこの記事を見てもらうことにします。僕が致命的に間違ってるかも知れませんので、各個人判断していただければと思います。

clipプロパティーさえ使わなければ（不安な人はとりあえずトリミング機能を使わなければ）、おそらく何の問題も無いと思います。
まいった、人にえらそうにCSSなんか教えようとするから、こんなコトになるんだ。

@shintarowfreshでした。

igosso画像検索自体はすごい素敵なwebサービスなので、是非とも利用してみてください。

文：シンタロヲフレッシュ

はてブ

pocket

twitter