【はてなブログカスタマイズ】初心者がはてなブログ無料版でインスタ連携してみた！

飽きっぽい性格で、常に新しいことをしていないと退屈してしまいます。。

梅雨の時期はやる気も低迷しがちですが、ふと思い立ち、インスタグラムを始めることにしました。

ゆる～く投稿していきますので、よろしかったら覗いてみてください (´▽｀*)

もちろん、フォロー大歓迎です♪

そういう訳で、ブログからインスタにジャンプするためのカスタマイズを実行しました！

いつも通りコピペ専門です (｀･ω･´)ゞ

もくじ

はてなブログPC版の場合

はてな無料版でも、サイドバーにインスタウィジェットの埋め込みが可能です。

☟「つなろっく」さんの解説がわかりやすいです。

実際に埋め込んだウィジェットがこちらです。

私はかなりシンプルにしましたが、プロフィールを表示したり、画像の枚数を変えたり、お好みで設定が可能です。

画像にカーソルを合わせると、投稿画像のキャプションとハッシュタグが表示されます。

f:id:tsupiccoro:20190703104807j:plain

さて、はてな無料会員は、スマホ版でできることが限られています( ；∀；)

でも、インスタ連携するなら、PC版よりスマホ版のほうが大事なので、諦められず…。

何とか頑張って、記事上にインスタグラム公式バッジを貼り付けることができました。

☟これです。

本当は、例のすてきな虹色バッジにしたかったけど、何だかうまくいかなかったので、また後日がんばることにします（インスタ公式のフォローバッジには虹色がないのだそうです）。

☟このあたりの事情は「Ryke」さんの記事で勉強しました。

さて、上のフォローバッジをはてなスマホ版に表示させる手順は以下の通りです。

※この方法だと、各記事にフォローバッジが表示されますが、トップページには表示されません。

①「管理画面＞デザイン＞カスタマイズ＞記事＞記事上下のカスタマイズ」のところで、記事上または記事下のどちらか（または両方）の枠内に、以下のコードを貼り付けます。

※コード内の赤字の部分は、ご自身のインスタのアカウント名にしてください。

f:id:tsupiccoro:20190703105004j:plain

②「管理画面＞デザイン＞スマートフォン＞記事＞記事上下のカスタマイズ」のところで、「PCと同じHTMLを表示する」にチェックします。

f:id:tsupiccoro:20190703105022j:plain

③変更を保存して終了です。

インスタグラムとブログで同じ記事を投稿するわけではないので、ちょっと違和感もありますが、まあ、しかたない。。

ご参考になれば幸いです！