AMS使い方マニュアル

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

ホーム ≫ テキストのリンク先にPDFを指定する ≫

[ケーススタディ]
リンク先にPDFを指定する
(テキストリンク編)

ケーススタディ

商品の詳細はこちら」というテキストをクリックしたら、「商品詳細.pdf」が表示されるように設定したい。

事前準備

  • PDF(商品詳細.pdf)をファイル管理にアップロードしておく。

1.記事にテキストを入力する

リンクにPDFを指定02_コピー_コピー

リンクを付けたいテキストを入力しておきます。

2.PDFのファイル名を取得する

リンク先に指定するPDFのファイル名を取得します。

例)/materials/157769157975101.pdf
※materialsの前にあるスラッシュ(/)も含めてコピーします。

 

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

3.リンクを設定する

リンクにPDFを指定04_コピー

リンクを指定したいテキストを入力した記事に戻り、リンクを付けるテキストを選択します。
この場合は、「商品の詳細はこちら」を選択します。

テキストを選択した状態で、エディタ上部にある「リンク挿入/編集」ボタンを押します。

ハイパーリンク情報

リンクにPDFを指定05_コピー

ハイパーリンク情報」タブのURLに、コピーしておいたファイル名(/materials/157769157975101.pdf)を貼り付けます。

プロトコル」には自動的に「その他」が表示されます。

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

ターゲット

PDFをリンク先に指定する場合は、こちらも設定してください。
リンクにPDFを指定13_コピー_コピー

次に、「ターゲット」タブをクリックします。

ターゲットの「<なし>」の横にある下向きの三角アイコンをクリックします。

選択肢の中から、「新しいウィンドウ(_blank)」を選択します。

高度な設定

PDFをリンク先に指定する場合は、こちらも設定してください。
リンクにPDFを指定12_コピー_コピー

高度な設定」タブをクリックし、関連リンクnoopenerと記入します。

記入する文字列:noopener

OK」ボタンを押します。

4.リンクの設定完了

リンクにPDFを指定10

テキスト「商品の詳細はこちら」にリンク先の設定が完了しました。

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

プレビュー_コピー

編集画面右上の「プレビュー」ボタンにマウスを乗せると、「パソコン」と「スマートフォン」メニューが表示されます。

ここでは、パソコンで確認します。

テキスト「商品の詳細はこちら」をクリックしたときに、新しいウィンドウでPDFファイルが表示されれば、リンク設定は完了です。

otukaresamadesita