AMS使い方マニュアル

簡単ホームページ作成ツール「AMS」のマニュアルサイト

ホーム ≫ ブログ本文内に画像リンクを作成したい ≫

[ケーススタディ]
ブログの本文内に画像リンクを作成する

ケーススタディ

ブログページの本文内に「お問い合わせバナー」画像を設置し、画像をクリックしたら、ホームページ内「お問い合わせページ」に飛ぶように設定したい。

事前準備

設置する画像は、ファイル管理にアップロードしておいてください。

1.リンク先のファイル名を取得する

ページ管理10_コピー

リンク先に指定したいファイル名を取得します。「ページ管理」メニューを選択し、「自由ページ一覧」をクリックします。

ブログに画像リンク挿入01

表示された一覧の中から、画像のリンク先に指定したいページ、ここでは「お問い合わせ」ページを探します。「ページ名」の枠にあるURLのドメイン以下から最後までをコピーします。

ページ名がhttps://amsstudio.jp/contact.htmlだった場合、コピーするファイル名は/contact.htmlになります。

リンク先のファイル名は、独自ドメインの後ろのスラッシュ(/)から.htmlまでになります。
※スラッシュ(/)も含めます。

リンク先のサイトURLは必ずコピー&ペーストしてください。スペルミスなどの誤りがあると、正しく表示されません。

2.画像を挿入してリンクを設定する

ブログに画像リンク挿入02

画像(ここではお問い合わせバナー)を挿入したいところをクリックします。
ここでは、「お問い合わせはこちら」の下の行をクリックしています。

ブログに画像リンク挿入03

エディタ上部にある「イメージ」ボタンを押します。

画像情報

ブログに画像リンク挿入04

ファイルマネージャから選択」ボタンをクリックします。

ブログに画像リンク挿入05_コピー

挿入する画像をクリックします。

ブログに画像リンク挿入06

リンク」タブをクリックします。

リンク

ブログに画像リンク挿入07

リンク」タブのURLには、「/xxxxx.html」の形式で、必ず半角英数字で入力します。

コピーしておいたファイル名が「/contact.html」なので、URLは

/contact.html

になります。

リンク先のファイル名は必ずコピー&ペーストしてください。スペルミスなどの誤りがあると、正しく表示されません。

OK」ボタンを押します。

3.画像リンクの設定完了

ブログに画像リンク挿入10

「お問い合わせはこちら」の下に「お問い合わせバナー」画像が挿入されました。

4.ブログ記事を更新する

ブログに画像リンク挿入08_コピー

ブログ編集ページの一番下にある「記事を更新」ボタンをクリックします。

5.リンク動作を確認する

ブログに画像リンク挿入09_コピー

ブログ一覧画面に戻り、「プレビュー」をクリックして確認します。

「お問い合わせバナー」をクリックしたときに、お問い合わせページが表示されれば、リンク設定は完了です。

otukaresamadesita

こちらのページも見られています