THE HAM MEDIA BLOG

Gigazinize Tools - Image

様々な写真が楽しめるFlickrの写真を使って、
ブログのエントリーに関連する写真を簡単に貼付けられるツール、

「Gigazinize Tools - Image」

ここのブログでも使ってみようと思い、試しに使ってみた。

GIGAZINEのように

GIGAZINEと言えば、様々なネタを提供してくれるIT系のニュースサイト。
GIGAZINEでは、記事の内容に関係しているような画像をつけて、
ビジュアル的にも目立つようなエントリーをするサイトだが、
今回紹介するGigazinize Tools - Imageも、
そのGIGAZINEのように、自分のブログに簡単に画像を貼付けられるというツールです。

Gigazinize Tools - Imageの特徴

・テキストから検索キーワードを自動的に抽出します
・抽出されたキーワードを自由に組み合わせて簡単に画像検索が可能です
・Flickrでクリエイティブ・コモンズライセンスとして公開されている
　画像のみを検索します
・各種ブログサービス用，またはHTMLとしてライセンスを守った
　画像の貼り付けテキストを生成します
Gigazinize Tools - Image：このサービスの特徴

ブログに貼付けられる形式のHTMLを自動的に生成される。
記事の内容にあったイメージを入れるだけでも、
インパクトがかなりつきますから、かなりいいツールだと思います。

サンプル

北海道だけで検索されたもの。

Photographer

Jaako

License

Creative Commons (by-nc)

Tool for photo selecting

Gigazinize Tools - Image

生成されたHTML

<a href="http://www.flickr.com/photos/56944727@N00/2342718238/" title="oops"><img alt="oops" src="http://farm3.static.flickr.com/2114/2342718238_a3ee3668c3_m.jpg" /></a>
<dl><dt>Photographer</dt><dd><a href="http://www.flickr.com/photos/56944727@N00/" title="Jaakoさんのページ">Jaako</a></dd><dt>License</dt><dd><a href="http://creativecommons.org/licenses/by-nc/3.0/deed.ja" title="Creative Commons Licenseの説明ページ">Creative Commons (by-nc)</a></dd><dt>Tool for photo selecting</dt><dd><a href="http://image.gigazinize.net/" title="Gigazinize Tools - Image: Making up your Blog（あなたのブログにスパイスを）">Gigazinize Tools - Image</a></dd></dl>

生成されたHTML部分を横に並べるためのCSS

生成されたHTMLを表示すると、デフォルトの状態だと
画像が上にきて、ライセンスのための表示部分が
画像の下側にくるようになってしまっている。

そのままでもいいという人のほうが多いかもしれないけど、
なんとなく右側が寂しくなると思ったので、一工夫してみた。

まずは生成された部分をdivで囲み、適当なclassをつける。

サンプルと合わせたHTML

<div class="flickr-img"><a href="http://www.flickr.com/photos/56944727@N00/2342718238/" title="oops"><img alt="oops" src="http://farm3.static.flickr.com/2114/2342718238_a3ee3668c3_m.jpg" /></a>
<dl><dt>Photographer</dt><dd><a href="http://www.flickr.com/photos/56944727@N00/" title="Jaakoさんのページ">Jaako</a></dd><dt>License</dt><dd><a href="http://creativecommons.org/licenses/by-nc/3.0/deed.ja" title="Creative Commons Licenseの説明ページ">Creative Commons (by-nc)</a></dd><dt>Tool for photo selecting</dt><dd><a href="http://image.gigazinize.net/" title="Gigazinize Tools - Image: Making up your Blog（あなたのブログにスパイスを）">Gigazinize Tools - Image</a></dd></dl></div>

classは”flicer-img”としてみました。

そして加えるCSSはこれ

div.flicker-img img{
border:none;
float:left;
padding-right:10px;
}
div.flicker-img dl dd{
text-indent:10px;
}

表示してみるとこうなる。

ちょっとだけCSSについて解説

カスタマイズする人もいると思うので、CSSについて少し解説。

imgをメインに左寄せするために、img自体にfloat:left;を指定、
そしてimgにリンクがついているので、余分なボーダーが出ないように
border:none;を指定した。

そして画像の右に回ってくる文字だが、画像と少し間をあけるたいとおもったので、
imgの方にpagging-right:10px;を指定した。
右側にくるdl自体にpadding-leftをしようとしても、
floatがかかっているため、もしdl側にmarginやpaddingをつけようとしても、
画像の横サイズを含めた分以上の値が必要となるので、
あえてimg側でpadding-rightとして指定した。
余白をもっとあけたい人は、その数値を変更するよういに。

そして右側の内容では、タイトルと内容の部分があるので、
内容の部分にインデントをつけたかったので、
text-indentをつけて、右に少しずれるように設定した。
もし、全部左揃えがいい人は、この値を0にするか、
div.top-flicker dl ddの部分自体を削除してください。

ちなみに、このdivに続く文字もfloatされてしまうので、
このdivのあとの部分には、clear:left;を忘れずにつけてみてください。

このツールを使って、サイトにイメージをつけて、
少し印象を高めてみてはどうでしょう！