【プロが解説】StudioでPDFを埋め込む方法を徹底解説
「Studioで制作したサイトにPDFを埋め込みたい」「ダウンロードボタンをカスタマイズしたい」
そんな悩みを持つ方も多いのではないでしょうか。
この記事では、StudioでPDFを埋め込む方法を解説していきます。
本記事の内容
・StudioでPDFをダウンロードする方法
・1クリックで直接ダウンロードする方法
・サイトにPDFを埋め込む方法
社内でサイト制作ができずに、お困りではありませんか？
スタートアップや広告代理店の方へ
・Web知識が少ないスタッフでも管理・更新できるWebサイトが欲しい
・1ヶ月以内&限られた予算内でWebサイトを制作したい
・ノーコードでのサイト制作を丸投げできるパートナーを探している
Webサイト制作・運用のコストを抑えたい方は、ぜひ以下のフォームからお問い合わせください。
Studioの指導者数100名超えの代表が納品時に操作レクチャーを行いますので、自社で活用できるか不安な方でもご安心ください。
ホームページ経由でお問い合わせをいただいた方には、StudioでWebサイトを運用して、売上を数倍に上げるために押さえるべきチェック項目をまとめた限定資料をお渡しさせていただきます。
目次
StudioでPDFをダウンロードする方法
StudioでPDFをダウンロードする方法は以下の通りです。
それぞれ詳しく解説します。
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をアップロードする
まずは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を埋め込む手順は以下の通りです。
それぞれ詳しく解説します。
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 Experts加盟。
100名規模のノーコードコミュニティ「ノーコードサロン」代表。