読者です 読者をやめる 読者になる 読者になる

white croquis

日々の思索のためのクロッキー帳。オーディオやオススメなども。

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

f:id:align_centre:20131120020756p:plain

はてなブログは、カスタマイズがしやすくて使っていて気持ちがいいのですが、プロフィール欄について、次の2点が気になっていました。それは、

  1. Twitter の有無を言わさず「即フォロー」しかできないボタンがいやだ。
    できればタイムラインのページにリンクしたい。

    ↓コレ
  2. Instagram が標準で提供しているリンクボタンのデザインがイマイチ。
    さらにプロフィール欄にマッチせず、位置調整が難しい。

    ↓コレ
Instagram Instagram

という点です。

そこで、最終的にこれを、

f:id:align_centre:20131120022046p:plain

こんな感じにしてみたので、その方法をメモしておきます。

その1:Twitter のアイコンを用意する

まず、そもそも Twitter 社は公式なリンクボタンとして「ツイート」と「フォロー」と「ハッシュタグ」しか用意していないようです。

また、ロゴマークの使用についてはガイドラインがかなりこと細かく決められているようです。

アイコンの横にテキストでユーザー名を表記してリンクするのはよさそうなので、今回は、

で公開されている、f:id:align_centre:20131119215606p:plain を使うことにしました。

その2:Instagram のアイコンを用意する

Instagramの自分のフォトギャラリーのページにリンクさせるボタンは、先日の記事、
はてなブログにInstagramの画像ギャラリーを表示してみた (Webstagram編) - Fluffy white croquis」 で紹介したように、Instagram の公式サイトで作成できるようになっています。

しかしここで作成できるバナーは、テキスト入り画像だと大きくて目立ちすぎるし、アイコンが単純化されすぎていて、ぱっと見、アイコンだけでは Instagram だとわかりづらいのです。

そこで調べてみると、

ということで、公式のアイコン画像素材があるようなので、ダウンロードして Twitter のアイコンと同じ 16px に縮小し、こんな感じ f:id:align_centre:20131119232450p:plain にしました。

その3:プロフィール欄に設置する

アイコンが用意できたら、いよいよプロフィール欄に設置です。

はてなブログ管理画面 > デザイン > カスタマイズ > サイドバー > プロフィール

の「ブログの説明」の欄にHTMLコードを書き込むことはできるのですが、説明文や標準で用意されているリンクアイコンとの間隔調整が非常に難しくなります。

そこで、

はてなブログ管理画面 > デザイン > カスタマイズ > サイドバー > モジュールを追加

の「HTML」を選び、そこにリンク用の画像とコードを書き込みます。
あとは、それをプロフィールの下に移動させ、HTMLコード/スタイルでプロフィールとの間隔を調整すればOKです。

ポイントは次の2点。

  • タイトルを空のままにしておく。
  • サイドバー間の間隔が空くので、margin-top: をマイナスの値にして調節する。

コードやスタイルシートはブログの「デザインテーマ」によって異なると思いますが、現時点で「timeline-minimal」を(一部カスタマイズして)使っているこのブログでは、次のようにしました。CSSを別にするのが面倒なのでスタイルは要素内に直書きしてます。

f:id:align_centre:20131120230644p:plain

これでめでたく、「見た目上」、プロフィールの下に Twitter と Instagram へのリンクが追加された状態になりました。\(^o^)/

f:id:align_centre:20131120022046p:plain

はてなブログで Instagram をさらに楽しむ!

はてなブログには、直接 Instagram の画像を貼付けられる機能があるので、とても便利です。
自分自身、もともと「はてなダイアリー」を使っていましたが、Instagram 連携を使いたいがために「はてなブログ」に移行しました。

しかし、Instagram の画像を貼るだけでは飽き足らず、リアルタイムにブログに反映させたいと考え、あれこれ試行錯誤の末、先日の記事に書いたように、ブログタイトル下に「Instagram ギャラリーバナー」(横スクロールも可!)を設置しました。

これを設置してから、ますます Instagram に画像をアップするのが楽しくなりました。
Instargam を使っている方はぜひお試しあれ!


番外:いつも使ってる Instagram 関連アプリ

Instagram のために iPhone を買ったようなものなので、9割がた iPhone で撮った写真をアップしていますが、iPhone 標準のカメラでは露出補正ができないので、マニュアルで露出がコントロールできるカメラアプリで撮っています。
最近は、相方に教えてもらった Camera+ がとても使いやすくて重宝しています。

iPhone のカメラはとても優秀なので、ほとんどはそのまま Instagram 上に取り込んで済ませてますが、たまーに Photoshop Express で画質補正やエフェクトをかけてます。

また、Instagram は iPad 版がないので、iPad では InfinitGallery(昔は InstaGallery という名前だったような…)で見たりしています。