【プロが解説】StudioでPDFを埋め込む方法を徹底解説
「Studioで制作したサイトにPDFを埋め込みたい」「ダウンロードボタンをカスタマイズしたい」
そんな悩みを持つ方も多いのではないでしょうか。
この記事では、StudioでPDFを埋め込む方法を解説していきます。
本記事の内容
・StudioでPDFをダウンロードする方法
・1クリックで直接ダウンロードする方法
・サイトにPDFを埋め込む方法
「ノクステック」では、StudioExpertsに加盟しているプロによるホームページ制作を行っております。
ホームページ運用でお困りではありませんか？
下記のようなお悩みをお持ちではありませんか？
✅名刺代わりのサイトが欲しいけど50~100万円も予算がない
✅WordPressからの乗り換えを検討している
✅自分で管理・更新できるサイトが欲しい
上記のようなお悩みがありましたら、お気軽にノクステックにご相談ください。
豊富な経験を持つノーコードのプロが直接サイト制作を担当いたします。
目次
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加盟。
Web講座の事業責任者を経て、ノクステックを設立。