同じカテゴリの新着記事

Flickrの写真をギャラリーとして記事に埋め込む方法!プラグイン「Awesome Flickr Gallery」を使ってみた

AwesomeFlickrGalleryプラグインの記事アイキャッチ

ゆうです。

今回はFlickrの写真をギャラリーとして記事に埋め込むプラグイン「Awesome Flickr Gallery」の使い方などについて。ダラダラした説明を読むよりもひと目見たほうが早いですよね。ギャラリー例はこういった記事!

川苔山の写真ギャラリー
金時山の写真ギャラリー

この記事のように、Flickrのアルバムを記事内に埋め込むことができるプラグインのご紹介です。

目次

  1. 「Awesome Flickr Gallery」を使うとこんなことができます
  2. インストールから設定方法など
  3. APIキーをプラグインの設定画面に入力
  4. Flickr上のアルバムを記事内に表示してみよう
  5. 写真のサムネイルサイズなど細かい設定も可能
  6. まとめ:WordPressでFlickrの写真をギャラリー表示させるなら

「Awesome Flickr Gallery」を使うとこんなことができます

WordPressのプラグイン「Awesome Flickr Gallery」を使うと、Flickrのアルバム写真を記事内に埋め込むことができます。こんな感じ⇓

プラグインAwesome Flickr Galleryの例

Flickrの写真がサムネイル表示され、クリックすると拡大します。
左右クリック(スマホなら左右スワイプ)すると前後の写真見れる、という操作性もなかなか便利。

クリックして拡大したところ

しかもこのプラグイン、レスポンシブ対応っぽいのです。iPhone 5sで見るとこんな感じで表示されますよ。
当サイトもレスポンシブデザインなので非常に重宝しています。

レスポンシブデザインに対応したプラグイン

とまあ、このようにFlickr上の写真をギャラリー表示にできるのが「Awesome Flickr Gallery」!

インストールから設定方法など

では実際に使い始めるまでの設定方法なんかをご紹介しますね。まずはプラグインをインストール。

AwesomeFlickrGalleryをインストール

インストールするとWordPressの管理画面にこのような設定項目が表れます。ここにFlickrのAPIキーなどを入れることで、Flickrと連携させることが可能に。

AwesomeFlickrGalleryの設定画面

ではでは、APIキーなどの取得方法を見てみましょう。Flickrの「Settings」ページ内にある「Sharing & Extending」へアクセス。

「here are some you might like to try」と書いてあるリンクをクリックします。

Flickrの設定画面へ

「The App Garden」なるページが開くので、
「Get an API Key」をクリック。

API取得ページへ進む

次のページでは商用か非商用か聞かれるので、インストールするサイトに合っているほうを選びましょう。

このサイトのように個人ブログであれば非商用かなぁと思います。会社で大きなサイトを立ち上げるのであれば商用でしょうか。

商用か非商用かを選択

そしたら次に「APIキーを何のために使うの?」って聞かれます。適当にこのプラグインの名前「Awesome Flickr Gallery」とでも入れておきましょう。

あとはその下のボックスにチェックを入れて「SUBMIT」をクリックすると…、

APIを使うアプリの概要について記入

はい、これでAPIキーの取得に成功です!(モザイクかけてあるのがAPIキー)

FlickrのAPIキーを取得

APIキーをプラグインの設定画面に入力

もうちょっとだけ設定が続きますが、ここまで来ればあと一息。

先ほど取得したAPIキーをそれぞれコピーして、プラグイン設定画面にペーストします。2つ。

FlickrのAPIキーをコピペする

そしてその上には「Flickr User ID」を入力します。
これはFlickrのフォトストリームページを開いたときに出てくるURLの末尾。これ!

FlickrのユーザーIDはここ

これをコピーして、プラグイン管理画面の「Flickr User ID」にペースト。

FlickrユーザーIDをコピペ

以上3つの項目をコピペしてから画面下の「Save Changes」をクリックすれば、ひとまず設定完了です。おつかれさまでした!

Flickr上のアルバムを記事内に表示してみよう

やっとですが、Flickr上のアルバムを記事内に埋め込んでみます。「Add Gallery」を表示したらギャラリーネームとその説明を記入し、その下にあるタブを「Photoset」に変更するとアルバム名が紐付きます。ここでは金時山に行ったときのギャラリーを作成してみました。

画面下の「Add Gallery」をクリックして保存!たぶん⇓の画像見ながらやったほうが早いですね。

Addgalleryから設定する

次は「Saved Galleries」へ。

今作成したフォトギャラリーが追加されていればOK! 「Gallery Code」と書かれている部分をまるまるコピーしましょう。

ギャラリーコードをコピペ

ここまで来たらもう大詰めです。今コピーしたコードを記事内の任意の位置にペーストして、プレビューを表示してみると…、

ギャラリーコードを記事内にペースト

キター!!
Flickrのアルバムが表示されました。これで完成です!

この記事の冒頭でもお伝えしたように、写真をクリック(スマホだとタップ)すると拡大されます。またレスポンシブデザインに対応しているようなので、スマホでも違和感なく表示されるハズ!

Flickrのアルバムが記事内に表示された

写真が多い場合は、このようにページ送り表示が出ます。なんかギャラリーっぽい!

ページ送りが表示される

写真のサムネイルサイズなど細かい設定も可能

とりあえずデフォルト設定のままだと、上記のような

・1ページ辺りの写真は10枚
・2カラム
・画像サイズは240px

とかになっていると思います。これも「Default Settings」にてお好みで変更可能。写真の表示枚数やカラム数、写真サイズなどなどご自由に。

ギャラリーの表示を変更可能

まとめ:WordPressでFlickrの写真をギャラリー表示させるなら

Awesome Flickr Gallery」、けっこう便利でした。良かった点としては

・レスポンシブデザイン対応
・写真をクリックすると記事内で拡大される(他のタブに飛んだりしない)
・画像サイズやカラム数など調整可能
・記事内に貼り付けるコードが短くてシンプル

などでしょうか。扱いやすいなぁと。ただまぁデザイン面の微調整はしていきたいと思っております。

そんなわけでせっかく撮った写真をブログに載せたいな〜と思っている人は、プラグインの導入を検討してみてはいかがでしょうか。

こんなギャラリー記事ができます!

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

にほんブログ村 自転車ブログへ

更新情報の取得はコチラからどうぞ!