LINE@のQRコードとバナーをアメブロなどのブログに貼る方法

LINE@のQRコードとバナーをアメブロなどのブログに貼る方法

LINE@へ誘導するQRコードや友達追加ボタンをどうやってブログに貼ったらいいですか?と質問をいただいたのでお答えします!

LINE@管理画面からHTMLコードをコピーする

まずLINE@管理画面を開き、必要なHTMLコードをコピーします。

「管理画面」→「アカウント設定」→「基本設定」を開きます。

ページ下の方にQRコードと友達追加ボタンのHTMLコードがあるので、それぞれコピーをします。

ブログにペーストする(貼り付ける)

先ほどコピーしたHTMLコードをブログの好きな場所にペーストします。

アメブロの場合、サイドバーに貼る時は「フリースペース」か「フリープラグイン」にペーストします。

また、記事内にもペーストすることができますが、その際には記事の編集画面を「HTML表示」にしてからペーストします。

QRコードが表示されない場合

アメブロに貼り付けた場合、QRコードが表示されない場合があります。

その時は貼り付けたHTMLコードの「http://」部分を「https://」に変更してみてください。

アメブロは去年の仕様変更でSSL対応となったので、「https://」ではない画像だと表示されないようです。

QRコードが大きすぎる場合

そのままペーストしただけだと、QRコードが大きすぎる場合があります。

その時は、QRコードのHTMLに幅の指定を追加します。

HTMLコードの最後「>」の手前に一つスペースを開けて、「width=”好きな幅の数”」を入れます。

例:幅100pxの場合

※URLアドレスの部分はご自分のものに変更してお使いください。

ボタンに対してこのくらいの大きさになります。

友達ボタンが大きすぎる場合

アメブロの記事内に入れた時など、友達ボタンが大きすぎる場合があります。

その時は、友達ボタンのHTMLに幅の指定を追加します。

HTMLコードの最後「>」の手前に一つスペースを開けて、「width=”116″」を入れます。

※URLアドレスの部分はご自分のものに変更してお使いください。

装飾をする

無事に貼り付けることができたら、さらに文字を追加したり、装飾すると効果的です。

枠をつけて、文字を追加した場合の例です。

このように目立たせることによって、LINE@への誘導がしやすくなります。

 

装飾する方法ですが、以下のHTMLコードをアメブロのフリースペース内に入れてください。

文字や色などお好きなように変更していただいてもOKです!

※URLアドレスの部分はご自分のものに変更してお使いください。

 

まとめ

LINE@から提供されたコードをコピペすればいいだけなのですが、ちょっとした事に気をつけるだけでとっても見やすく表示させることができます。

ぜひ試して見てくださいね!

お役立ちカテゴリの最新記事