【プロが解説】StudioでPDFを埋め込む方法を徹底解説

「Studioで制作したサイトにPDFを埋め込みたい」「ダウンロードボタンをカスタマイズしたい」

そんな悩みを持つ方も多いのではないでしょうか。

この記事では、StudioでPDFを埋め込む方法を解説していきます。

StudioでPDFをダウンロードする方法

StudioでPDFをダウンロードする方法は以下の通りです。

1. Studio内にPDFをアップロードする
2. PDFをStudioの画面上に配置する
3. テキストを変更する
4. テキストクリックでダウンロードする

それぞれ詳しく解説します。

参考：Studioの制作代行を利用する際の流れや費用とは？

1.Studio内にPDFをアップロードする

まずはStudio上にPDFをアップロードしましょう。

アップロード画面にある画像をPDFに変更することでPDFをアップロードできるようになります。

これでPDFのアップロードが完了しました。

2.PDFをStudioの画面上に配置する

続いては先程アップロードしたPDFを画面上に配置しましょう。

PDFをクリックする方法とPDFをドラッグ&ドロップする方法があるので、お好みで選ぶと良いでしょう。

この段階ではPDFのファイル名がテキストとして表示されます。

3.テキストを変更する

Studio上にPDFを配置した後は、テキストを変更しましょう。

デフォルトでは、テキストがファイル名となってしまうので「資料ダウンロード」などの文言に変更すると良いでしょう。

余裕がある方は、ボタンのような見た目にするとユーザーにクリックしてもらいやすくなるでしょう。

4.テキストクリックでダウンロードする

3で作成したテキストをクリックすることでPDFを開くことができます。

PDFをダウンロードするには、PDFを開いた状態で右上のダウンロードアイコンからPDFをダウンロードすることになります。

Googleドライブを使って直接ダウンロードする方法

Googleドライブを使用して、PDFを開くことなく直接ダウンロードできるようにする方法を解説します。

設定方法は以下の通りです。

1. GoogleドライブにPDFをアップロードする
2. Googleドライブの権限を共有に変更
3. 共有リンクをコピー
4. URLを変更
5. Studio内で設定する

それぞれ詳しく解説します。

1.GoogleドライブにPDFをアップロードする

まずはGoogleドライブにPDFをアップロードしましょう。

お好みに合わせてフォルダを作成すると良いでしょう。

2.Googleドライブの権限を共有に変更

PDFのアップロードが完了したら、アップロードしたPDFを選択します。

その後、アクセス権を「制限付き」から「リンクを知っている全員」に変更します。

この操作を行うとURLを知っていれば誰でもアップロードしたPDFにアクセスできてしまうので、注意が必要です。

3.共有リンクをコピー

Googleドライブの権限を「リンクを知っている全員」に変更できたら、共有リンクをコピーを選択します。

ここでコピーしたURLの一部を使用して直接ダウンロードできる機能を実装するので、コピーしたURLは必ず忘れないようにメモをしておきましょう。

4.URLを変更

共有リンクがコピーできたら、ダウンロード用のURLを変更します。

その際、個別idをダウンロード用のURLに追加する必要があるため、ダウンロード用URLを作成する前に、3で取得したURLの個別idをメモしておきましょう。

3で取得したURL
https://drive.google.com/file/d/個別id/view?usp=sharing\

ダウンロード用URL
https://drive.google.com/uc?export=download&id=ここに個別idが入る

ダウンロードURLに個別idを追加できたら、次のステップに進みます。

5.Studio内で設定する

URLが変更できたら、Studio内にボタンやテキストのリンク部分にURLを設定しましょう。

お好みでテキストを変更すると良いでしょう。

StudioでPDFを埋め込む方法

StudioでPDFを埋め込む手順は以下の通りです。

1. GoogleドライブにPDFをアップロードする
2. Googleドライブの権限を変更
3. URLをコピーする
4. Studio内にPDFのコードを埋め込む

それぞれ詳しく解説します。

GoogleドライブにPDFをアップロードする

まずはGoogleドライブにPDFをアップロードしましょう。

アップロードするPDFは外部に公開しても問題ないものを選ぶようにしましょう。

Googleドライブの権限を共有に変更

PDFのアップデートが終わったら、アップデートしたPDFを選択し、ドライブの共有権限を変更しましょう。

今回は「制限付き」から「リンクを知っている全員」に変更します。

URLをコピーする

Googleドライブの権限を変更できたら、「リンクをコピー」をクリックしましょう。

ここでコピーしたリンクの個別idを使ってStudio内へのPDFの埋め込みを行うので必ず個別idをメモしておきましょう。

サンプルURL
https://drive.google.com/file/d/個別id/view?usp=sharing\

Studio内にPDFのコードを埋め込む

リンクがコピーできたら、Studio内でPDFの埋め込み作業を行います。

Studioの画面上にBlankというパーツを配置し、以下のコードを挿入し、個別idを設定します。

<iframe src="https://drive.google.com/file/d/個別id/preview" width="横幅" height="高さ"></iframe>

横幅と高さはお好みで設定しましょう。

以下のように埋め込むことができれば無事、完成です。

まとめ

この記事では、StudioでPDFを埋め込む方法を解説しました。

ノクステックは、StudioExpertsに加盟しているため、高品質なWebサイトをご提供いたします。

また、Studioについてその他にも気になる点がある方は「Studioリファレンス」もご覧ください。