フリッカーflickrでクリエイティブコモンズ画像検索とワードプレスに貼り付け

フリッカーflickrはプロが撮ったすごい写真のオンパレードなのでぜひ自分のサイトでも使わせていただきたいと思いクリエイティブコモンズ(CC)ライセンスで画像検索する方法を探してみました。

著作者の画像を違法にならないように使うための備忘録です。

flickrからクリエイティブコモンズ(CC)画像を選んでダウンロードと著作者のクレジットをコピーしてワードプレスに貼り付けるところまでやってみます。

flickrでも普通の画像は自分のサイトなどに転載はできません(Shareからのリンクはできる？）のでクリエイティブコモンズ(CC)ライセンスがある画像のみ使って良いことになります。

フリッカーのクリエイティブコモンズ画像検索
作成したリンクタグをワードプレスに貼り付ける
1. ●img●の部分に画像をアップロード
2. 【おまけ】クリエイティブコモンズ（CC）表示する部分をCSSで変えてみる

フリッカーのクリエイティブコモンズ画像検索

まずはフリッカーのトップページの右上の検索窓に「1」など入れて検索してみます。

Oops! There are no matches for “1”.と出ます（汗）ので右上のAdvanced Searchを押します。

もしくは、

Flickr Search — “1”

ここから直接行ってもOKです。

Advanced Searchで検索する

こんなページになります。

必要な部分は一番上の「Search for」の部分と一番したのほうの「creative commons」の部分です。他はデフォルトでOKです。

Search forは検索ワードを入れます。

creative commonsの部分が重要です。

Only search within Creative Commons-licensed content： CCライセンス画像のみ表示
Find content to use commercially：営利目的で使いたい場合
Find content to modify, adapt, or build upon：画像を加工したい場合

加工はほとんどしない場合が多いと思うので上の２つにチェックを入れれば良いでしょう。

「福岡キャナルシティ」と検索したらこのような画像がでてきました。ここから良さそうな画像を選んでダウンロードしてみます。

次回のクリエイティブコモンズ画像検索

次から検索するときはここでチェックして検索します。（検索ごとに解除されるのでその都度チェックする必要があります・・・）

クリエイティブコモンズ画像のダウンロード

すみません（汗）前回の記事作成から時間が経ってしまったので新たにキャナルシティではなくForestでクリエイティブコモンズの画像を検索してみました。

クリエイティブコモンズの設定で検索して好きな画像を選ぶと以下の用に表示されます。以下、かなり加工してるとは思いますが自分では絶対撮れなさそうなすごい画像です！

右下のほうにダウンロードアイコンがありますので押します。

するとサイズを選択する吹き出しが出るのでお好みのサイズを選ぶとダウンロードが始まります。（サイトやブログで使う場合は640px程度あればOKだと思います。）

ファイルを保存するを選択してOKを押すとダウンロードのフォルダに保存されます。

flickrで著作者のクレジットをコピー

画像がダウンロードできたらクリエイティブコモンズ（CC）のクレジットのリンクタグを作るために著作者情報をコピーします。

FirefoxのColtを使うのでまだ導入していない場合は以下のページを参考にインストールしてみましょう。

リンクタグをもっと便利にFirefoxアドオンCoLTを導入する

上記のように著作者の名前の部分を選択して反転させ、右クリックします。

「リンクのテキストとURLをコピー」（Coltアドオン）の「クリエイティブコモンズ（CC）」を選択すると著作者の名前とURLがリンクタグとしてコピーされます。コピーされたタグは以下のようになります。

<div class="cc">●img●photo by <a href="https://www.flickr.com/photos/aigle_dore/" target="_blank">Moyan Brenn</a></div>

このリンクタグと先ほどダウンロードした画像をワードプレスに貼り付けていきます。

作成したリンクタグをワードプレスに貼り付ける

まずはリンクタグを貼り付けます。このまま普段通りにワードプレスの「ビジュアル」で記事の部分に貼り付けてもタグが見えてしまうので以下のように「テキスト」に変えてから貼り付けます。

このような表示になります。HTMLが分からないとかなりわかりにくいですが画像を挿入したいところまでスクロールして先ほどコピーしたリンクタグを貼り付けてみます。

ここ　↓　↓　に貼り付けてみます。

●img●photo by Moyan Brenn

上の部分をテキストでみると　↑　このような表示になります。

ビジュアルでみると　↑　このような表示になります。今、実際にみているこのページとはCSSで文字の大きさとか色を変えているのでちょっと違う表示になっていますね。

このような表示になればOKです。

次に●img●の部分に画像を貼り付けてみましょう。

●img●の部分に画像をアップロード

投稿ページの「テキスト」の画面で先ほど貼り付けた「●img●」の部分を選択して反転させましょう。上記のように●img●の部分を反転させます。

反転させたら画像をアップロードします。画像ファイルをドラッグアンドドロップでワードプレスに放り投げればアップロードされますが、以下のように「メディアを追加」ボタンを押してもできます。

画像ファイルをドラッグアンドドロップでアップロードします。

アップロードが終わったら、「タイトル」と「代替テキスト」はSEO的に有利になると言われているので必ず最適な文字を入力しましょう。

最後に右下の「投稿に挿入」ボタンを押します。

そうすると以下のような表示になります。

photo by Moyan Brenn

上記の画像は投稿ページの「テキスト」で見ると　↓　このようになります。画像の周りの<div>~</div>の部分がクレジットになります。このように画像がうまく●img●の部分に入れば完了です。

うまく説明できたかどうか分かりませんが分からない場合は質問してくださいね。

もう少し簡単に出来る方法を探してみます。

【おまけ】クリエイティブコモンズ（CC）表示する部分をCSSで変えてみる

クリエイティブコモンズ（CC）の部分がデフォルトだと画像とクレジットの文字が離れすぎてしまうので変更しました。CSSを以下のように設定してあるのでクレジットの見栄えよく表示するようになりました。

/* ---著作権表示　クレジット-- */
.cc{
margin-top: 0px !important;
line-height: 100%;
color: #999;
font-size: 12px !important;
margin-bottom: 12px !important;
padding:5px;
}
.cc a{
color: #999 !important;
text-decoration: underline !important;
}
.cc img{
padding:5px 5px 0px 0px !important;
}

クリエイティブコモンズ（CC）の表示例