今宵も話半分で…

CSSでflickr画像を同じサイズに

   

Photo:|| flickr By:dsevilla

Photo:|| flickr By dsevilla

どうも。らいぱちです。
このサイトではアイキャッチ画像にflickrに公開されているクリエイティブ・コモンズの画像を使っています。
flickrはクオリティの高い写真がたくさんあっていつも助かってます。
世界中のフォトグラファーさん、ありがとうございます。
が、アイキャッチに使うとしたらひとつ不満がありまして。
サイズがバラバラなんですよね。画角だったり、大きさだったりが。
メインコンテンツの横幅一杯に画像を表示した場合、もとの画像の比率のままだと
記事が出てくるのがだいぶ下の方になってしまって。
そこでCSSを使って、画像をトリミングして同じサイズのアイキャッチを
作る方法をとってみました。これが、まあ難しい。
なんせど素人なもんでやり方とか無茶苦茶なのかもしれません。
そんなときは温かい目で見守って、そっとブラウザバックしてください。


スポンサード リンク





今回なにがやりたいのか?って言うと…

今回したいことはブログ記事にアイキャッチをつけるということなんですけど、
ただつけるだけではなくて、細かく言うと…
 ブログ記事に、
「サイズがバラバラなflickr画像を、
 センタリングしながら必要な部分だけをトリミングして、
 記事本文(メインコンテンツ)横幅一杯にレイアウトして、
 さらにそれをなるべく手順の少ない方法で」

 アイキャッチをつける
 
ということになります。
 

大切なのは「画像のセンタリングとトリミング」

ざっくり手順としては
①flickrで画像を探してくる。
②ソースコードを生成してくれるブックマークレットを使って、
 ブログに張り込めるようにコードを出力。
③seesaaブログの記事投稿画面にコピペ&CSSを当てやすいように変更。
④画像の中央を使いつつ(センタリング)、余計な部分を見せないように(トリミング)する。
こんな感じで行います。
いろいろ調べているうちにjQueryを使ったやり方を紹介していただいている記事
「CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ」)もあったのですが、
なんだかjQueryがうまく起動しないみたいで。
jQueryっなんだか動かない時ってないですか?
いろいろ調べていたらfirefoxでは動かない時があることもあるようで
(こちらの「Firefox(Mac)でjQueryの一部が動かない」という記事をおみかけしました。)
だいぶやってみて、結局ダメで諦めて、なんとなく形になったのがCSSだけでやる方法です。
(ま、jQueryのこともよくわかってないのが大きいですが…)
ただ調べていく中でわかってきたのは、画像の扱いとして
「センタリング」と「トリミング」にはそれぞれ適したやり方があるということ。

画像のセンタリングはmargin: auto

今回やろうとしているのは、どんな画像サイズのものがきても、
とにかくセンタリングできるようにすること。
これは、画像よりも大きいサイズの親要素を作って、
そこにmargin: autoでセンタリングする方法がよさそうです。

トリミングにはoverflow: hidden

センタリングされた画像のセンターを中心に
必要な範囲だけ表示させるには、
やっぱりoverflow: hiddenが最適そうです。
この2つのテクニックの合わせ技でflickrでアイキャッチ画像を作っていきます。

まずはflickrで画像を探そう

アイキャッチ画像をどうしてもflickrとかから探したかったんです。
クオリティの高い写真も多いですからね、ほんと。
なによりも、クレジットの表記で画像の利用ができるようになる
クリエイティブ・コモンズ・ライセンスがたくさんあってうれしい。
今回はトリミングしたいのでは改変OKのもので探しますが、
検索の仕方も簡単なので助かります。
新UIになって、ソースコードのコピペもクリックするだけでできるようになってますし。
しかし、この出力されるソースコードでまず問題が発生しました…

新UIになったflickrのソースコードではトリミングできない

完璧に僕の未熟なせいだと思いますが、
新flickrが出力してくれるソースコードにはクレジット表記も含まれているのですが、
この表示場所がなんと画像の中なんですね。
マウスホバーしたときに撮影者の名前と写真のタイトルが現れてきます。
普段は写真だけ表示されていて、かっこいいんですけど、
この画像の中に表示される状態のものをトリミングすると、
左下のクレジット表記、なくなってしまいました…
(移動させる方法が、わからん…)

おなじみのブックマークレットでコードを入手する

そんなわけでクレジット表記の方針としては
マウスホバーでのクレジット表記は諦めて、画像外に表示させる方向でやってみます。
まずは、flickrの画像のコードをゲットしましょう。
いくつか方法はあるのかと思いますが、今回は「Flinckr」というサイトで
配布してくれいてるブックマークレットを使ってみます。
お目当ての画像を見つけたら、ブックマークに組み込んだFlinckrのブックマークレットをクリック。
別タブで立ち上がったソースコードを
seesaaブログの記事編集画面にがっつりコピペです。

ソースコードをちょこっと編集

seesaaブログのcssを使ってセンタリングとトリミングをする前に、
入手した画像のソースコードに少し手を加えていきます。
といっても、<img>タグに入れ子構造のタグを2つ作ります。
今回一番親になるタグを<p>タグで。その中に<a>タグ、そして
その中にもともとの<img>タグになるようにしました。
(<p>タグにはclassもあてておきます)
htmlコードがとりあえずそこまで準備したらいよいよcssの編集です。

CSSを編集する

まずは親要素になる<p>のサイズを決めます。
これがアイキャッチが表示されるサイズになります。

.eyecatch {
float: left;
width: 798px; /*トリミング後の横幅*/
height: 340px; /*トリミング後の縦幅*/
position: relative; /*子要素の基準位置に指定*/
overflow: hidden; /*表示範囲以外を非表示に*/
margin: 0 -60px 0; /*親要素contentから左右がはみ出るようにネガティブマージン*/
}

3行目、4行目。今回はメインコンテンツ幅一杯の横798px×縦340pxにしてみました。
映画で言うシネスコサイズに近い縦横比です。
デザイン的を直感的によさ気に見せるなら、黄金比や白銀比サイズに
しておいてもよいかもしれません。
5行目。positionプロパティはrelativeに設定しておきます。
子要素に対しての基準位置とします。
あとで子要素にabsoluteを設定すればmarginで
センタリングすることができるので、それ用です。
6行目。overflow: hiddenにすることで、決めたサイズ以上の画像は
表示されなくなりますので、つまりは画像のトリミングができることになります。
7行目。ネガティブマージンは記事本文よりも左右幅をとるための作戦です。
続いて<a>タグのcssを編集します。

.eyecatch a { 
width: 200%; /*親ボックスの200%の横幅のボックスにする*/
position: absolute; /*親ボックスclass eyecatchの左上を基準にして絶対位置化*/
left: 50%; /*基準位置から右へ半分*/
top: 50%; /*基準位置から下へ半分*/
margin: -170px 0 0 -100%; /*ボックスの高さ半分戻す、横幅の半分戻す*/
}

1行目。親ボックスより大きなサイズのボックスにします。
あとで、これを帳消しにするサイズ調整して、画像の横幅を指定したサイズに合わせます。
2行目。position: absoluteを設定することで親ボックスの左上を基準点にして
位置を調整できるようになります。
3行目、4行目。基準点からボックスサイズの半分だけ、右そして下へ移動させます。
5行目。ネガティブマージンでボックスの位置を調整します。
が、このあたり実はあまりよくわかってません、なんでこうなるのか。
margin-topを増減させると、画像が上下するんですがどの当たりの数字にすると
正確なセンターなのかがちょっとわかりません。
現状なんとなく見た目でのセンタリングです。
さらにid flickrimgのcssを編集します。

#flickrimg {
position:absolute; /*親ボックスaの左上を基準にして絶対位置化*/
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto; /*aに対して上下左右センタリング*/
width: 50%; /*200%されたボックス内で50%に戻して、都合100%=798px×340pxに*/
}

一応こんな感じで完成です。
見よう見マネなため、いまいち自分でも理解できてないというか説明へたくそすぎてすみません。

最後に大切なもの

アイキャッチ画像をトリミングしてセンタリングすることができたら
もうひとつ、大切なことが残っています。
そうです、クレジット表記です。
これやっとかないと、怒られちゃいますから。
Flinckrでコードを入手した場合は、クレジット部分にclass=”small”が
すでについていますから、それを使ってcssを編集しておきます。

中央揃えは奥が深い

結構頑張っていろいろ調べながらの作業になりましたが、
この画像の中央揃えって言うのは非常に難しかったです。
画像サイズとかがわかっていないと、なおさらです。
ただまあ。なんとなくは簡単な方法で画像を制御できるようになったかなと。

transformプロパティ

ちなみに最終的なアイキャッチ画像には、トリミング&センタリング以外に
transform: scaleがあてられています。
画像にマウスホバーすると画像が少し大きくなります。
widthやheightを使って拡大させるより、
画像の中心を基準にして拡大してくれるtransition:scaleの方が
扱いやすかったです。
それにしても、ほんといろいろ調べながらやりましたが
中央揃えは奥が深いというか、むずかしく、まだちっとも理解できてないですが、
きょうはこんなところで試合終了。

この記事が気に入ったら
いいね!しよう

Twitter で

 - 世界は学びで変わってゆく , , , , , ,