- ホームページにLINE公式アカウントの友だち追加ボタンを設置したい
- 友だち追加ボタンをヘッダーやサイドバーに設置したい
- 友だち追加ボタンの大きさ（サイズ）を変更したい
この記事では、LINE公式アカウントの友だち追加ボタンをWordPress（ワードプレス）のブログやホームページ、自社サイトに設置する方法を初心者にわかりやすく解説します。
この記事を読むと、ホームページ訪問者にLINEの友だちになってもらうための導線を作ることができます。
また、友だち追加ボタンの大きさの変更（サイズ変更）や位置の変更もできるようになりますよ。
LINE公式アカウントの友だち追加ボタンをWordPressに設置する流れ
LINE公式アカウントの友だち追加ボタンをWordPress（ワードプレス）に設置するおおまかな流れは以下のとおりです。
WordPressにLINE公式アカウントの友だち追加ボタンを設置する流れ
- 友だち追加ボタンのHTMLソースコードを取得する
- HTMLソースコードをWordPressで友だち追加ボタンを表示させたい場所に貼り付ける
WordPressにLINE公式アカウントの友だち追加ボタンを設置するためには、LINE公式アカウントの管理画面から友だち追加ボタンのHTMLソースコードを取得する必要があります。
友だち追加ボタンのHTMLソースコードをコピーしたものを、WordPressで友だち追加ボタンを表示させたい場所に貼り付けると、友だち追加ボタンを表示させることができます。
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
LINE公式アカウントの友だち追加ボタンをWordPressに設置する方法
友だち追加ボタンのHTMLソースコードを取得・コピーできたら、WordPress（ワードプレス）に設置します。
ここでは、友だち追加ボタンを表示させる場所にわけて解説します。
なお、この記事では、WordPressテーマ「SWELL」
を使って設定します。
友だち追加ボタンをWordPressで表示させる場所
友だち追加ボタンをヘッダーに表示させる方法
友だち追加ボタンをヘッダーに表示させると、以下のようになります。
管理画面の左側に表示されるメインナビゲーションの「外観」>「ウィジェット」を選択します。
「カスタムHTML」を選択すると、以下のような画面が表示されます。
「ヘッダー内部」にチェック✔︎を入れて「ウィジェットを追加」をクリックしてください。
「カスタムHTML」を「ヘッダー内部」にドラッグ&ドロップしてもできます。
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
「保存」ボタンをクリックすれば、友だち追加ボタンがヘッダーに表示するようになります。
友だち追加ボタンを投稿内に表示させる方法
友だち追加ボタンを投稿内（投稿ページ・固定ページ）に表示させる方法を、「ブロックエディタ」と「クラシックエディタ（Classic Editor）」を使っている場合にわけて解説します。
ブロックエディタを使っている場合
「カスタムHTML」ブロックを追加すると、以下のように表示されます。
検索窓に「html」と入力すると「カスタムHTML」が出てきます。
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
クラシックエディタを使っている場合
「テキスト」をクリックして、テキストエディタに切り替えます。
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
友だち追加ボタンをサイドバーに表示させる方法
友だち追加ボタンをサイドバーに表示させると、以下のようになります。
管理画面の左側に表示されるメインナビゲーションの「外観」>「ウィジェット」を選択します。
「カスタムHTML」を選択すると、以下のような画面が表示されます。
「ヘッダー内部」にチェック✔︎を入れて「ウィジェットを追加」をクリックしてください。
「カスタムHTML」を「共通サイドバー」にドラッグ&ドロップしてもできます。
友だち追加ボタンのHTMLソースコードを取得・コピーする方法は、以下の記事をご参照ください。
LINE公式アカウントの友だち追加ボタンの大きさ（サイズ）を変更する方法
友だち追加のボタンのアイコンが大きい（または小さい）と感じる場合は、HTMLソースコードにある「height=”◯◯○”」を変更します。
「height=”◯◯○”」の◯◯◯には半角数字を入れてください。
友だち追加ボタンの大きさ（サイズ）の違い
- height=”36″ の時（友だち追加ボタンの初期値）
- height=”72″ の時（友だち追加ボタンの初期値の2倍の大きさ）
- height=”100″ の時
LINE公式アカウントの友だち追加ボタンの位置を変更する方法
ここでは、友だち追加のボタンの位置を「中央揃え」または「右寄せ」にしたい場合にわけて解説します。
友だち追加ボタンの位置を「中央揃え」にする場合
友だち追加ボタンの位置を「中央揃え」にすると、以下のように表示されます。
友だち追加のボタンの位置を「中央揃え」にする場合は、HTMLソースコードに「centerタグ（センタータグ）」を追加します。
centerタグを使うと、<center>と</center>に囲まれた部分を画面の中央に表示することができます。
友だち追加ボタンのHTMLソースコードの「前に<center>」、「後ろに</center>」を追加します。
「プレビュー」をクリックすると、以下のように友だち追加ボタンが中央に表示されます。
友だち追加ボタンの位置を「右寄せ」にする場合
友だち追加ボタンの位置を「右寄せ」にすると、以下のように表示されます。
友だち追加のボタンの位置を「右寄せ」にする場合は、HTMLソースコードに「divタグ（ディブ（またはディヴ）タグ）」と「align属性（アライン属性）」を追加します。
divタグとalign属性を使うと、<div align=”right”>と<div>に囲まれた部分を画面の右側に寄せて表示することができます。
友だち追加ボタンのHTMLソースコードの「前に<div align=”right”>」、「後ろに</div>」を追加します。
「プレビュー」をクリックすると、以下のように友だち追加ボタンが右に寄せられて表示されます。
まとめ
この記事では、WordPress（ワードプレス）にLINE公式アカウントの友だち追加ボタンを設置する方法を解説しました。
友だち追加ボタンのHTMLソースコードをコピーして貼り付けるだけなので、簡単に設置できることがおわかりになったかと思います。
友だち追加ボタンを設置する際は、友だち追加と同時にプレゼントを渡せるようにすると、友だち追加のハードルを下げることができますよ。
関連記事
