JimdoのAIビルダーでLINEの友達追加ボタンを設置する方法

JimdoのAIビルダーでホームページを作成しているとき、LINEの友達追加ボタンを簡単に設置する方法を知りたいという方も多いのではないでしょうか。この記事では、LINEボタンの設置方法について分かりやすく解説します。

1. LINE公式アカウントを作成する

LINEの友達追加ボタンをホームページに設置するには、まずLINE公式アカウントを作成する必要があります。まだ作成していない場合は、LINE公式アカウントを作成し、LINEアカウントにログインして、友達追加リンクを取得しましょう。

LINE公式アカウントを作成後、友達追加用のURLを取得します。このURLは後でJimdoに埋め込むために必要となります。

2. Jimdoの管理画面にアクセスする

Jimdoの管理画面にログインしたら、作成中のサイトの編集画面に移動します。AIビルダーを使用している場合でも、エディタ内で簡単にボタンを追加することができます。

ページ編集モードに入ったら、友達追加ボタンを設置したい場所を選び、適切なウィジェットやテキストボックスを選んで追加します。

3. LINEボタン用のHTMLコードを埋め込む

LINE公式アカウントで取得した友達追加用URLを使って、Jimdoのサイトにボタンを設置します。Jimdoでは、HTMLコードを埋め込むウィジェットを使うことができます。

以下のHTMLコードをコピーし、JimdoのHTMLウィジェットに貼り付けます。

<a href="https://line.me/R/ti/p/@あなたのLINEID" target="_blank"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/en.png" alt="Add Friend" /></a>

このコードを貼り付けることで、LINEの友達追加ボタンが表示されます。

4. カスタマイズとデザイン調整

LINEボタンを追加した後、デザインが自分のウェブサイトに合っているかを確認しましょう。ボタンのサイズや配置を調整することも可能です。Jimdoのエディタで簡単に位置を変更したり、テキストを加えたりすることができます。

もし、よりカスタマイズを加えたい場合は、CSSを使ってボタンのスタイルを変更することもできます。例えば、ボタンの色や形を変更したい場合は、以下のCSSを利用します。

button { background-color: #00b900; border-radius: 10px; padding: 10px 20px; color: white; }

まとめ

JimdoでLINEの友達追加ボタンを設置するのは簡単で、公式アカウントから取得したURLをHTMLコードとして埋め込むだけで完了します。ボタンのデザインや配置を調整し、さらに便利な機能を追加することができるので、ぜひ試してみてください。