まねき猫日記

預かり猫と預かり主の日常を届けます。

【非公式】インスタグラムの虹色フォローボタンの設置方法

Instagram twitter

↑これは、
非公式のインスタグラムの虹色フォローボタンです。

<a href="https://www.instagram.com/tsupiccoro?ref=badge" target="new"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gin-huku/20190930/20190930063423.jpg" alt="非公式インスタグラム フォローボタン informal banner:Instagram" width="180" height="41"></a>

 ※つぴころ さま宛てのhtml

 

設置方法の内容も書きますが、

上手く行かなかったら、すみません(大汗)

 

もっと簡単に設置出来る方法があるように思うのですが、これが私の知識の限界です…(*_*)

 

 

 

 

 ①自分のインスタグラムへのリンクを作る

メモ帳アプリを開いて、

下記の文言とhtmlをコピペして下さい。

 

 【虹色フォローボタンhtml】

 <a href="https://www.instagram.com/自分のインスタグラムのアカウント?ref=badge" target="new"><img src="自分のブログやサイトにアップした虹色フォローボタンの画像URL" alt="非公式インスタグラム フォローボタン informal banner:Instagram" width="180" height="41"></a>

 

 「自分のインスタグラムのアカウント」は、赤丸で囲んだ所です。

f:id:gin-huku:20191129191056j:plain

メモ帳アプリのhtmlにはめ込むと、

 <a href="https://www.instagram.com/gin.huku?ref=badge" target="new"><img src="自分のブログやサイトにアップした虹色フォローボタンの画像URL" alt="非公式インスタグラム フォローボタン informal banner:Instagram" width="180" height="41"></a>

 

②はてなに画像をアップする 

 Instagram

スマホは↑の画像を長押しして、

「画像をダウンロードする」。

パソコンだと右クリックで出ます。

 

 

はてなフォトライフへ行く。

画面上のバー「マイフォト」を

クリック。

 

f:id:gin-huku:20191130120354j:plain

「アップロード」をクリック。

 

 

f:id:gin-huku:20191130113720j:plain

赤丸内をクリック。

 

 

f:id:gin-huku:20191130113758j:plain

画像を選択して、「完了」クリック。

 

虹色バナーボタンの画像を選択。

 

f:id:gin-huku:20191130113907j:plain

リンクをクリック。

 

 

f:id:gin-huku:20191202114417j:plain

赤丸内のHTMLを選択して、

「コピー」します。

 

 

メモ帳アプリに戻ります。

 

さきほどのHTMLをメモ帳アプリに

「貼り付け」。

 

<a href="http://f.hatena.ne.jp/gin-huku/20190930063423"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gin-huku/20190930/201909300623.jpg(見本アドレス)" alt="20190930063423"></a>

メモ帳アプリ内の

下線(画像アドレスURL)に

該当する部分を「コピー」。

【img src="画像アドレスURLをコピー" alt…以下略】

 

 

メモ帳アプリのhtmlの日本語部分に「貼り付け」します。

 <a href="https://www.instagram.com/gin.huku?ref=badge" target="new"><img src="自分のブログやサイトにアップした虹色フォローボタンの画像URL" alt="非公式インスタグラム フォローボタン informal banner:Instagram" width="180" height="41"></a>

 ↓

 <a href="https://www.instagram.com/gin.huku?ref=badge" target="new"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gin-huku/20190930/20190930063423.jpg(見本アドレス)" alt="非公式インスタグラム フォローボタン informal banner:Instagram" width="180" height="41"></a>

 

 メモ帳アプリにある、

ご自身で作った虹色フォローボタンhtmlを

「コピー」して下さい。

 

②のまとめ(画像なしの方が良い人向け)→メモ帳にコピペした方が便利かも

・はてなフォトライフ

・マイフォト

・アップロード

・画像を選択→完了

・リンク 

・HTMLタグを選択して「コピー」。

・メモ帳アプリにHTMLタグを「貼り付け」。

・HTMLタグ内の画像アドレスだけを「コピー」。

 ・メモ帳アプリの虹色フォローボタンhtmlの日本語部分に「貼り付け」。

・メモ帳アプリの虹色フォローボタンhtml全体を「コピー」。

 

③ブログの記事上に虹色フォローボタンを設置する


f:id:gin-huku:20191130161106j:image

「デザイン」をクリック。

 


f:id:gin-huku:20191130161219j:image

「スパナ」クリック。

 


f:id:gin-huku:20191130161305j:image

「記事上」の下の白い囲い部分を

クリック。

 


f:id:gin-huku:20191130161422j:image

「1」の行にカーソルを当て、

「貼り付け」。

 

※ピンク色がhtml内外に付いてたら、

ピンク色部分だけ削除して下さい。

 


f:id:gin-huku:20191130161606j:image

「変更を保存」クリック。

 

 

 

 

画像無しの方が、

分かりやすい人も居ると思います。

 

・デザイン

・スパナ

・記事上の白い囲い部分クリック

・「1」の行にカーソルを当て、

「貼り付け」。

・「変更を保存」

 

 

以上です!

 

※追記

メールでhtmlをコピーして、とある方に、

お知らせしようと思ったのですが、

何故か、

メールからhtmlをコピーして、

設定画面に貼り付けても、

上手く表示出来ませんでした。

 …………………

 

スマホで、はてな設定画面を

いじる時の、

コピー&ペーストのやり方は、

下の記事を参照して下さい。

www.gin-huku.work

 

 

 

大変参考になりました〜!

tsupiccoro.hatenablog.com

 凄く丁寧で、とてもわかり易かったです(*^_^*)

PC版ではボタンが表示されるのに、スマホ版では表示されない…って困った時、最後にけつまずいた時です、本当に助かりました。

 

ryke.jp

簡潔でかっちりしていて、見事な中級編といった印象です。

何より虹色ボタンは公式には存在しないということと、非公式の綺麗な虹色ボタンのありかを教えてくれたのが、ありがたかったです。

 

saruwakakun.com

虹色ボタンが凄く綺麗で、憧れです…!