いつからか天気予報で梅雨入りがはっきりしなくなったような気がしているたいちちです。
梅雨に入ったなーと誰しもが思ったころに梅雨入り、梅雨が明けたなーってみんな思う頃に梅雨明けってテレビから聞いても、「そんなことはわかっとる！」と突っ込みたくなるような、あまり気にしていないような。。。
さて、今日はキャンプネタではなくブログネタを書こうかと。
多くの方がやっているInstagramですが、ナチュログにInstagramのバナーを埋め込む人が多いと思います。
そういう私も先ほどやったばかりなんですけどねｗｗ
.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; } }
どうやって埋め込むのかわからず、自分なりに調べてみて、Tryしたら出来ました。
いざと言うときの直し方の備忘録＆やり方を探している方のために、記録しておきます。
バナー設置しようとしていた方の一助になれば幸いです。。。
ちなみにここではナチュブロのサイドバーに入れる方法です。
もし本文中に入れたい場合は、バナーのコードコピーまで行って、それをブログ本文に張り付ければOKです。
１．自分のInstaのバナーデータ取得
ナチュログに張り付けるバナーデータを、ご自身のInstaのサイトからデータを取ってくるのですが、PCじゃないとできないのかな。
Androidのスマホから探してみましたが、わからなかったです。
PCで自分のInstaのページに入って、上部にあるご自身の
ユーザーネームをクリック
続いて
プロフィールを編集のところをクリック
左のメニューにある
バナーをクリック
貼り付けたい
バナーデザインをクリック。私は右の横長のタイプをチョイス
出力されたコードをすべてコピーしてください
ここで、Instaからのバナーデータ取得は終了です。
２．取得したバナーデータを、ナチュログのサイドバーに組み込みをします
管理画面の左にあるブログの設定の下にある
ブログ環境設定をクリック
カスタムプラグインの設定のタグをクリック
カスタムプラグイン１(私はカスタムプラグインの１は、ナチュログではないお気に入りのプラグインを使用しておりますので、ここではカスタムプラグイン２)の箱のなかに先ほどコピーしたコードを貼り付け。
貼り付けたあとは、
保存ボタンを忘れずに押してくださいね。
続いて、再びサイドバーのブログの設定に戻り、
サイドバーをクリック
先ほど追加したカスタムプラグイン１(私の場合は、カスタムプラグイン２)を
サイドバーに登録します。
右側でも、左側でも、上部でも好きなところに入れてくださいね。
いれたあとは再び
保存ボタンを押してください。
これで、作業は終了です。
画面上部にある
ブログを表示するをクリックして、ちゃんとサイドバーに表示されているかどうか確認ができます。
さて、どうでしょう。うまくいきましたか？
わからないことがあれば、、、がんばってください。
ウソです。コメント欄で相談いただければ、わかる範囲でサポートします。
ちなみにここまで書いたのは
ナチュブロのサイドバーに入れる方法です。
もし本文中に入れたい場合は、バナーのコードコピーまで行って、それをブログ本文に張り付ければOKです。
さぁ、Let's Try！
ちなみに私のInstaは、海の写真3割、出かけたときの写真3割、食べ物2割、その他2割です。
キャンプネタは。。。正直多くないです(汗
.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; } }