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

StudioでPDFを埋め込む方法を徹底解説

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

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

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

本記事の内容

・StudioでPDFをダウンロードする方法
・1クリックで直接ダウンロードする方法
・サイトにPDFを埋め込む方法

社内でサイト制作ができずに、お困りではありませんか?

自社で運用できるWebサイトが欲しい方へ
スタートアップや広告代理店の方へ

・Web知識が少ないスタッフでも管理・更新できるWebサイトが欲しい

・1ヶ月以内&限られた予算内でWebサイトを制作したい

・ノーコードでのサイト制作を丸投げできるパートナーを探している

Webサイト制作・運用のコストを抑えたい方は、ぜひ以下のフォームからお問い合わせください。

ホームページ経由でお問い合わせをいただいた方には、StudioでWebサイトを運用して、売上を数倍に上げるために押さえるべきチェック項目をまとめた限定資料をお渡しさせていただきます。

目次

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にアクセスできてしまうので、注意が必要です。

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リファレンス」もご覧ください。

STUDIO制作見積もりシミュレーション画像

執筆者
松永勇樹
ノーコード専門メディア「ノクステック」運営。STUDIO Experts加盟。
Web講座の事業責任者を経て、ノクステックを設立。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次