- アメブロの本文内にLINE公式アカウントの友だち追加ボタンを設置したい
- アメブロのサイドバーにLINE公式アカウントの友だち追加ボタンを設置したい
- 友だち追加ボタンの大きさ（サイズ）を変更したい
この記事では、LINE公式アカウントの友だち追加ボタンをアメーバブログ（アメブロ）に設置する方法を初心者にわかりやすく解説します。
この記事を読むと、アメブロ訪問者にLINEの友だちになってもらうための導線を作ることができます。
また、友だち追加ボタンの大きさの変更（サイズ変更）や位置の変更もできるようになりますよ。
LINE公式アカウントの友だち追加ボタンをアメブロに設置する流れ
LINE公式アカウントの友だち追加ボタンをアメーバブログ（アメブロ）に設置するおおまかな流れは以下のとおりです。
アメブロにLINE公式アカウントの友だち追加ボタンを設置する流れ
- 友だち追加ボタンのHTMLソースコードを取得する
- 友だち追加ボタンのHTMLソースコードを表示させたい場所に貼り付ける
アメブロにLINE公式アカウントの友だち追加ボタンを設置するためには、LINE公式アカウントの管理画面から友だち追加ボタンのHTMLソースコードを取得する必要があります。
友だち追加ボタンのHTMLソースコードをコピーしたものを、アメブロで友だち追加ボタンを表示させたい場所に貼り付けると、友だち追加ボタンを表示させることができます。
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
LINE公式アカウントの友だち追加ボタンをアメブロに設置する方法
友だち追加ボタンのHTMLソースコードを取得・コピーできたら、アメーバブログ（アメブロ）に設置します。
ここでは、友だち追加ボタンを表示させる場所にわけて解説します。
友だち追加ボタンをアメブロの本文内に表示させる方法
友だち追加ボタンを投稿内に表示させる方法を、スマホとPC（パソコン）で操作する場合にわけて解説します。
スマホで操作する場合
アメブロのアプリを開いて「鉛筆マーク」をタップします。
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
パソコンで操作する場合
「ブログを書く」の下部にある「HTML表示」をクリックして、テキストエディタに切り替えます。
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
なお、「通常表示」をクリックすると、友だち追加ボタンの表示を確認することができます。
友だち追加ボタンをアメブロのサイドバーに表示させる方法
友だち追加ボタンをサイドバーに表示させると、以下のようになります。
友だちボタンをサイドバーに設置するためには、アメブロのパソコン版でサイドバーに「フリースペース」を配置してから、「フリースペース」に友だち追加ボタンのHTMLソースコードを入力する必要があります。
友だちボタンをサイドバーに設置する流れ
サイドバーに「フリースペース」を配置する
【使用しない機能】にある「フリースペース」を、【使用する機能】にドラッグ＆ドロップします。
とうこ「フリースペース」を選択して、【使用する機能】の友だち追加ボタンを設置したい場所に移動してください。
「フリースペース」に友だち追加ボタンのHTMLソースコードを入力する
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
なお、「プレビュー」をクリックすると、友だち追加ボタンの表示を確認することができます。
とうここの記事では、プロフィールの下に「フリースペース」を設置しています。
LINE公式アカウントの友だち追加ボタンの大きさ（サイズ）を変更する方法
友だち追加のボタンのアイコンが大きい（または小さい）と感じる場合は、HTMLソースコードにある「height=”◯◯○”」を変更します。
「height=”◯◯○”」の◯◯◯には半角数字を入れてください。
友だち追加ボタンの大きさ（サイズ）の違い
- height=”36″ の時（友だち追加ボタンの初期値）
- height=”72″ の時（友だち追加ボタンの初期値の2倍の大きさ）
- height=”100″ の時
LINE公式アカウントの友だち追加ボタンの位置を変更する方法
友だち追加のボタンのHTMLソースコードを貼り付けると、以下のように友だち追加ボタンの位置が「左寄せ」に表示されます。
ここでは、友だち追加のボタンの位置を「中央揃え」または「右寄せ」にしたい場合にわけて解説します。
友だち追加ボタンの位置を「中央揃え」にする場合
友だち追加ボタンの位置を「中央揃え」にすると、以下のように表示されます。
友だち追加のボタンの位置を「中央揃え」にする場合は、HTMLソースコードに「centerタグ（センタータグ）」を追加します。
centerタグを使うと、<center>と</center>に囲まれた部分を画面の中央に表示することができます。
友だち追加ボタンのHTMLソースコードの「前に<center>」、「後ろに</center>」を追加します。
「プレビュー」をクリックすると、以下のように友だち追加ボタンが中央に表示されます。
友だち追加ボタンの位置を「右寄せ」にする場合
友だち追加ボタンの位置を「右寄せ」にすると、以下のように表示されます。
友だち追加のボタンの位置を「右寄せ」にする場合は、HTMLソースコードに「divタグ（ディブ（またはディヴ）タグ）」と「align属性（アライン属性）」を追加します。
divタグとalign属性を使うと、<div align=”right”>と<div>に囲まれた部分を画面の右側に寄せて表示することができます。
友だち追加ボタンのHTMLソースコードの「前に<div align=”right”>」、「後ろに</div>」を追加します。
「プレビュー」をクリックすると、以下のように友だち追加ボタンが右に寄せられて表示されます。
まとめ
この記事では、アメーバブログ（アメブロ）にLINE公式アカウントの友だち追加ボタンを設置する方法を解説しました。
友だち追加ボタンのHTMLソースコードをコピーして貼り付けるだけなので、簡単に設置できることがおわかりになったかと思います。
友だち追加ボタンを設置する際は、友だち追加と同時にプレゼントを渡せるようにすると、友だち追加のハードルを下げることができますよ。
関連記事
