はてなブログは、カスタマイズがしやすくて使っていて気持ちがいいのですが、プロフィール欄について、次の２点が気になっていました。それは、
- Twitter の有無を言わさず「即フォロー」しかできないボタンがいやだ。
できればタイムラインのページにリンクしたい。
↓コレ - Instagram が標準で提供しているリンクボタンのデザインがイマイチ。
さらにプロフィール欄にマッチせず、位置調整が難しい。
↓コレ
という点です。
そこで、最終的にこれを、
こんな感じにしてみたので、その方法をメモしておきます。
その1：Twitter のアイコンを用意する
まず、そもそも Twitter 社は公式なリンクボタンとして「ツイート」と「フォロー」と「ハッシュタグ」しか用意していないようです。
また、ロゴマークの使用についてはガイドラインがかなりこと細かく決められているようです。
アイコンの横にテキストでユーザー名を表記してリンクするのはよさそうなので、今回は、
で公開されている、
を使うことにしました。
その2：Instagram のアイコンを用意する
Instagramの自分のフォトギャラリーのページにリンクさせるボタンは、先日の記事、
「はてなブログにInstagramの画像ギャラリーを表示してみた (Webstagram編) - white croquis」
で紹介したように、Instagram の公式サイトで作成できるようになっています。
- バナー • Instagram（要ログイン）
しかしここで作成できるバナーは、テキスト入り画像だと大きくて目立ちすぎるし、アイコンが単純化されすぎていて、ぱっと見、アイコンだけでは Instagram だとわかりづらいのです。
そこで調べてみると、
ということで、公式のアイコン画像素材があるようなので、ダウンロードして Twitter のアイコンと同じ 16px に縮小し、こんな感じ 
にしました。
その3：プロフィール欄に設置する
アイコンが用意できたら、いよいよプロフィール欄に設置です。
はてなブログ管理画面 ＞ デザイン ＞ カスタマイズ ＞ サイドバー ＞ プロフィール
の「ブログの説明」の欄にHTMLコードを書き込むことはできるのですが、説明文や標準で用意されているリンクアイコンとの間隔調整が非常に難しくなります。
そこで、
はてなブログ管理画面 ＞ デザイン ＞ カスタマイズ ＞ サイドバー ＞ モジュールを追加
の「HTML」を選び、そこにリンク用の画像とコードを書き込みます。
あとは、それをプロフィールの下に移動させ、HTMLコード／スタイルでプロフィールとの間隔を調整すればOKです。
ポイントは次の2点。
- タイトルを空のままにしておく。
- サイドバー間の間隔が空くので、margin-top: をマイナスの値にして調節する。
コードやスタイルシートはブログの「デザインテーマ」によって異なると思いますが、現時点で「timeline-minimal」を（一部カスタマイズして）使っているこのブログでは、次のようにしました。CSSを別にするのが面倒なのでスタイルは要素内に直書きしてます。
これでめでたく、「見た目上」、プロフィールの下に Twitter と Instagram へのリンクが追加された状態になりました。＼(^o^)／
はてなブログで Instagram をさらに楽しむ！
はてなブログには、直接 Instagram の画像を貼付けられる機能があるので、とても便利です。
自分自身、もともと「はてなダイアリー」を使っていましたが、Instagram 連携を使いたいがために「はてなブログ」に移行しました。
しかし、Instagram の画像を貼るだけでは飽き足らず、リアルタイムにブログに反映させたいと考え、あれこれ試行錯誤の末、先日の記事に書いたように、ブログタイトル下に「Instagram ギャラリーバナー」（横スクロールも可！）を設置しました。
これを設置してから、ますます Instagram に画像をアップするのが楽しくなりました。
Instargam を使っている方はぜひお試しあれ！
番外：いつも使ってる Instagram 関連アプリ
Instagram のために iPhone を買ったようなものなので、9割がた iPhone で撮った写真をアップしていますが、iPhone 標準のカメラでは露出補正ができないので、マニュアルで露出がコントロールできるカメラアプリで撮っています。
最近は、相方に教えてもらった Camera+ がとても使いやすくて重宝しています。
iPhone のカメラはとても優秀なので、ほとんどはそのまま Instagram 上に取り込んで済ませてますが、たまーに Photoshop Express で画質補正やエフェクトをかけてます。
また、Instagram は iPad 版がないので、iPad では InfinitGallery（昔は InstaGallery という名前だったような…）で見たりしています。
