white croquis

思索と探索のクロッキー帳。オーディオや音楽の話題、レビューなども。

はてなブログにInstagramの画像ギャラリーを表示してみた (Webstagram編)

はてなブログで、Instagram にアップした画像をタイトルの下にギャラリー形式で表示できるようにできないかと色々試して、ひとまず希望に近いものができたのでメモ。

追記:
より簡単でカスタマイズの自由度が高い "SnapWidget" を使った方法もあったので、そちらもおすすめします。
続・はてなブログにInstagramの画像ギャラリーを表示してみた (SnapWidget編) - white croquis

RSS.stagram + 複眼RSS は重すぎた

Instagram のサービス自体では、ハッシュタグRSS feed は提供しているものの、ユーザー自身が投稿した画像の RSS feed が提供されていません。そこで、最初に試したのは、「RSS.stagram」でまず RSS feed を生成し「複眼RSS」で画像をタイル上に並べる方法です。

当初はこの方法で期待通りの表示ができていた・・・かのように見えていましたが、ページを読み込んだ際に画像がすぐに表示されなかったり、新しく Instagram にアップした画像が表示されなかったりと、ちょっと実用には耐えないなという印象でした。

Webstagram のブログパーツで画像ギャラリーが簡単に!

現在は、Instagram が公式に Web 上で写真を見られるようになりましたが、最近まで公式サイトではWeb上で閲覧できず、以前からあった Webstagram という、Instagram の写真を Webブラウザから閲覧できるサービスを使ったりしていました。

この Webstagram を以前から利用していたので、何かないかなとふとサイトを見てみたところ、なんと「TOOLS」メニューの中にブログやWebサイト貼付け用のiframeのコードを生成できるフォームが!
これを使って設置したのが、このページの上部タイトル下の細長い画像ギャラリーです。
左から新しい順に並び、それぞれの写真をクリックすると、Webstagram のページが開き、大きな画像で見られるようになっています。

設置までの流れ

※予め、Instagram と Webstagram を利用している前提です。

1. Webstagram 画像ギャラリー用コードの生成
Webstagram > TOOLS > Instagram Gallery for your Blog / Website のフォームに自分の Instagram のユーザー名、画像サイズ、並べる数、枠線の有無、背景色、間隔等を入力・選択し、[Preview] をクリックして実際の表示を確認します。

f:id:align_centre:20131110003824p:plain

好みの表示設定ができたら、[Generate Code]をクリックすると、次のようなダイアログにコードが生成されるので、このコードをコピーします。

f:id:align_centre:20131110004839p:plain

2. はてなブログへの設置
サイドバー等に設置するだけなら、1.でコピーした内容を、はてなブログの管理画面 > デザイン > カスタマイズ > サイドバー の [+モジュールを追加] をクリックし、「HTML」を選択して貼付ければそれでもう出来上がりです。
今回は、タイトル部分に設置したかったので、「ヘッダ」>「タイトル下」にコードを貼付けました。
3. タイトル下にバナー状に設置するためコードを追記
生成されたコードを見るとわかりますが、HTMLコードの中に表示用のパラメータが数値で入っているので、次のように変更しています。
また、写真全体ではなく細長く切り抜くきたかったので、さらに id をつけたdivで囲みました。
複眼RSSではHTMLコード上で設定が変更ができないので、この Webstagram のブログパーツを使った方が断然楽です。
<div id="instagram"><iframe src="http://widget.stagram.com/in/align_centre/?s=150&w=20&h=1&b=0&bg=848484&p=0" allowtransparency="true" frameborder="0" scrolling="yes" style="border:none;overflow:hidden;width:100%; height: 180px" ></iframe> <!-- Webstagram - web.stagram.com --></div>
次に、画像を細長くバナー状に切り抜くための CSSはてなブログの管理画面 > デザイン > カスタマイズ > デザインCSS に追記します。デザインテーマによっては、他にも若干いじる必要がある所があるかもしれません。
写真の特徴ある部分が表示できるように、縦方向は中心よりやや上の辺りを切り抜いて表示するように調整しています。

#instagram {
  width: 100%;
  height: 30px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

#instagram iframe {
  position: relative;
  top: -45px;
}

完成

こうしてめでたくタイトル下にバナー状の Instagram ギャラリーが出来上がりました。

f:id:align_centre:20131110014043j:plain

なんか、食べ物の写真ばかりですが…w
ちなみに、SafariChrome では横スクロールして左から順に直近の20枚の写真を表示できます。

おまけ:プロフィールに Instagram のバッジを追加する

はてなブログには、Instagramの画像を貼付ける機能はあるものの、プロフィール欄に自分の Instagram ページに誘導するボタンを追加する機能がありません。
そこで、Instagram のリンクバッジ用のコードを次のページで生成してプロフィール欄に貼付けるとちゃんとリンクボタンとして機能するようです。

追記:

プロフィール欄への Instagram へのリンク設置方法を改良しました。詳しくはこちらを↓

はてなブログ プロフィール欄の Twitter と Instagram リンクをカスタマイズしてみた - white croquis

残る課題

  • FirefoxiOSSafari では横スクロールできない
  • MacSafariChrome では横スクロールできるが、右端にスクロールバーが hidden にしてもどうしても残ってしまう
  • Internet Explorer はまだ未確認

といったところが未解決ですが、何ぶんCSS勉強中なので、何かご存知でしたらアドバイスなど頂けると助かります。
はてなブログは意外とカスタマイズができるみたいなので、色々試してみようと思います。

当ブログでは、Google Analytics, Google AdSense 等を使用しています。Google によるデータの収集ポリシーについて詳しくは「Google のサービスを使用するサイトやアプリから収集した情報の Google による使用」を参照ください。
当ブログに掲載の画像や文章等コンテンツの、引用の範囲を超えた無断転載はご遠慮ください。画像等のコンテンツにはメタデータで著作者情報等を埋め込んでいる場合があります。図やチャートの利用をご希望の場合は、お問合せフォームあるいは、Twitter @align_centre 宛にDM等でご連絡ください。