スマホとPC両対応のホームページ作成、ご予約フォームの作成、
メルマガ配信、顧客管理機能までがまるっと一つになったリウムスマイル!

電話番号:06-6484-5445

営業時間:平日 9:00〜18:00

  1. ホームページへリンクするボタンをアメブロなどの外部ブログに貼り付ける方法

ホームページへリンクするボタンをアメブロなどの外部ブログに貼り付ける方法

リウムスマイル!で作成したホームページへリンクするボタンを、外部のブログなどに簡単に貼り付けることができます。

例えば、お店のお休み情報や予約状況のカレンダー、イベントやキャンペーン告知ページ、お問い合わせWEBフォームなど、各個別のページへ直接遷移するリンクボタンを簡単に外部のブログ本文内に埋め込むことができます。


基本的にはHTMLソース編集ができるブログであればどんなブログでも貼り付け可能ですが、ここでは利用者の多いアメブロを例としてリンクボタンを貼り付ける手順をご説明します。


リウムスマイル!側のプレビュー画面でリンクの飛び先にしたいページを開き、貼り付け用コードを取得する

まず、リウムスマイル!のプレビュー画面で、リンクの飛び先にしたいページを開きます。例としてご予約カレンダーへのリンクボタンをブログに貼り付ける手順をご説明します。

(1) リウムスマイル!管理画面にログインし、画面左上の「ホームページ編集/プレビュー」ボタンをクリック

(2) 「ご予約カレンダー」をクリック(ここでは例としてカレンダーをクリックしていますが、リンクボタンを作成したいページを表示させてください)



リンクボタンを作成したいページを表示したら、画面上部中央にある鎖ボタンをクリックします。



「リンクを作る」ボタンをクリックします。

 

 

リンク作成画面が表示されますので、

(1)リンクタイプを「リンクボタン」にチェック

(2)レイアウトタイプを選択
(3)コード表示部をコピー(コピーは、インターネットエクスプローラーの場合、マウスの右クリック→コピーで行えます)

 

 

 

アメブロの本文にリンクボタンを埋め込む手順

以降は、アメブロ側での作業になります。

アメブロで通常通り、ブログ記事を書きます。書いたら、ブログ編集エリア末尾の「HTML表示」タブをクリックします。

 

すると、HTMLコードという内部のコードが表示されますが、ここでは意味を理解する必要はありませんのでご安心ください。本文エリアの最下部をクリックしてカーソルを置き、先ほどコピーしておいたリンクボタンのコードを貼り付けます。(マウスの右ボタンで「貼り付け」を選択)

うまくコードが貼り付けられたら、画面下部の「通常表示」タブをクリックします。

 

以上で、リンクボタンの貼り付けが完了です。ブログ記事を保存して公開して、このリンクボタンをクリックすると、ホームページ側のページへ遷移するか確認しましょう。

 

また、この「予約受付カレンダー」ボタンのラベルテキストは自由に変更することができます。

(1) ラベルテキストを編集したいリンクボタンをクリック

(2) 「変更」ボタンをクリック

 

(1) ラベルテキストを自由に編集

(2) 「決定」ボタンをクリック

 

以上で、上記のようにラベルテキストが変更されます。

※上記アメブロの操作手順は、「最新版エディタ(標準) 」というエディタでの手順となります。旧エディタなどをお使いの場合は、手順が異なる場合がございますのでご注意ください。

 

上記操作例はご予約カレンダーへのリンクボタンの貼り付け手順ですが、最初にリンクボタンにしたいページを表示させてから、同じ手順で操作していただきますと、キャンペーン案内でも、お問い合わせフォームでも、自由にリンクボタンを作成することができます。