【非公式】インスタグラムの虹色フォローボタンの設置方法
↑これは、
非公式のインスタグラムの虹色フォローボタンです。
<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>
「自分のインスタグラムのアカウント」は、赤丸で囲んだ所です。
メモ帳アプリの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>
②はてなに画像をアップする
スマホは↑の画像を長押しして、
「画像をダウンロードする」。
パソコンだと右クリックで出ます。
はてなフォトライフへ行く。
画面上のバー「マイフォト」を
クリック。
「アップロード」をクリック。
赤丸内をクリック。
画像を選択して、「完了」クリック。
虹色バナーボタンの画像を選択。
リンクをクリック。
赤丸内の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全体を「コピー」。
③ブログの記事上に虹色フォローボタンを設置する
「デザイン」をクリック。
「スパナ」クリック。
「記事上」の下の白い囲い部分を
クリック。
「１」の行にカーソルを当て、
「貼り付け」。
※ピンク色がhtml内外に付いてたら、
ピンク色部分だけ削除して下さい。
「変更を保存」クリック。
画像無しの方が、
分かりやすい人も居ると思います。
・デザイン
・スパナ
・記事上の白い囲い部分クリック
・「１」の行にカーソルを当て、
「貼り付け」。
・「変更を保存」
以上です！
※追記
メールでhtmlをコピーして、とある方に、
お知らせしようと思ったのですが、
何故か、
メールからhtmlをコピーして、
設定画面に貼り付けても、
上手く表示出来ませんでした。
…………………
スマホで、はてな設定画面を
いじる時の、
コピー&ペーストのやり方は、
下の記事を参照して下さい。
大変参考になりました〜！
凄く丁寧で、とてもわかり易かったです(*^_^*)
PC版ではボタンが表示されるのに、スマホ版では表示されない…って困った時、最後にけつまずいた時です、本当に助かりました。
簡潔でかっちりしていて、見事な中級編といった印象です。
何より虹色ボタンは公式には存在しないということと、非公式の綺麗な虹色ボタンのありかを教えてくれたのが、ありがたかったです。
虹色ボタンが凄く綺麗で、憧れです…！
