前回の記事で、instagramの画像をブログ内に貼り付けることは出来るようになったのですが、（といっても、はてなブログの編集画面で、連携しているinstagramの画像を選択するだけ、なのですが。）
よく他サイト様で見られる、twitterのfollow meもつけてみたいと思い、いろいろやってみました。
はてなブログのオフィシャル機能でももちろんtwitterのfollowボタンは備わっており、詳細は「はてなブログ開発ブログ」様の
サイドバーの「プロフィール」モジュールに、各種ソーシャルメディアのフォローボタン表示機能を追加しました - はてなブログ開発ブログ
に書いてあります。
要約ですが、まずははてなのアカウントとtwitterのアカウントを連携しておき、
はてなブログのダッシュボードの「デザイン」→「カスタマイズタブ」（レンチのアイコン？）→「サイドバー」→「プロフィール」→「編集」で、「モジュールの編集」がポップアップで表示されるので、SNS毎に「表示する」のチェックボックスをチェックすることで表示されます。
ですが、これだけだと、
と「読者になる」の下にあるボタンになってしまい、これはこれでいいと思うのですが、どうせやるなら、もうちょっとオシャレっぽい感じにしたいなと思い、さらに調べてみました。
まず参考にさせていただいたのは「あいうえおラボ２」様の
フォロワーさん増えて！願いをこめてソーシャルボタンのリデザイン - AIUEO Lab2
に書いてあるコード。
「あいうえおラボ２」様のサイトはいろいろなはてなブログのカスタマイズ方法とかを紹介されているので、いつも参考にさせていただいてます。（と、いっても、全然実践できていないですが･･･）
コードはまるパクリそのまま使わせていただいたのですが、その中で、表示するtwitterのアイコンのWeb上の置き場所に困ってしまったので、はてなフォトライフにアップロードして利用することにしました。
ただ、はてなフォトライフにアップロードした画像のURLを指定する必要があるため、「Banguardサイト」様の
RSSアイコンが表示されないので、画像のアップロード先を「はてなフォトライフ」にしたら解決しました - Banguardサイト
を参考にさせていただきました。
私が参考にさせていただいたのが、フォトライフに一度上げた画像（もちろん、ブログの編集時に「写真を投稿」でも可能だと思いますが）を「編集 みたまま」からブログの本文に貼り付け、「HTML編集」で表示することで、画像のURLを取得する。というところです。
上記２サイト様のおかげで、
のようになりました。
これで少しおしゃれっぽくなったのではないでしょうか。
「読者になる」ボタンとtwitterのフォローの青いバックまでの間の空白が気になりますがこちらもcssとかを見ていけばどうにかなるのかな？また時間を見つけてカスタマイズの仕方を調べたいと思います。
あとがき
いろんなサイト様を見て調べていたのですが、たまに見かける
のように（上記画像は「あいうえおラボ２」様の参考にさせてもらったコードの部分）本文中に横スクロールを出して表示する、というのをやってみたいと思ったのですが、今回探した限りでは見つけることが出来ず、css等を覚えないとできないかな？と思いました。こちらもまた調べて使えるようにしたいと思います。
