ブログにPDFをはみ出さずに貼る方法
2019/08/12
-スポンサーリンク-
こんばんは,ソフトカツゲンが美味しい,雪国のスミオです。
このブログは「プリント配布サイト」なので,当たり前ですが,ブログにPDFを張り付けてあります。
今回は,PDFをブログに貼る方法をお伝えします。
今さっき,PDFをはみ出さずに貼る方法を発見しました。
1,Google DriveにPDFをアップロード
ネット社会が進む今日では,Googleアカウントなんて誰でも持っていますね。YoutubeやAndroidで,知らず知らず作っていると思われます。

▲図1. Googleドライブの様子
ドライブを開いたら,ドラック&ドロップ,+新規から,適当にPDFをアップロードしましょう。簡単です。
2,貼り付けたいPDFの共有可能なリンクを取得する

▲図2. 共有可能なリンク
右クリックして,「共有可能なリンクを取得する」をクリックしてください。すると,URLがコピーされます。貼り付けると,↓のようになります。
https://drive.google.com/open?id=1eo-syTUkQTqHX00aqUDqwemNlzIS5rX1
このURLの内,用いるのは,idの後ろです。「太字下線部」のところです。
3,魔法のコードをidと共に入力
<iframe src="https://drive.google.com/file/d/idを入力/preview" width="801" height="534">
↑のコードをそのままFC2に張り付け,”idを入力”の所を,PDFのidに変更します。
先ほどのPDFは,以下のように表示されます。
図3. PDF(2016年度都立日比谷高校の問題)
これでひとまず貼り付けることが出来ました!
4,サイズを自動調整
↑の貼り付け方だと,スマートフォンで表示する際,はみ出して,見栄えが悪くなります。スマートフォンで無くても,画面サイズ小さいPCでは起こってしまいますね。

▲図4. はみ出すPDF
対処の方法は簡単です。今さっき見つけました。
<iframe src="https://drive.google.com/file/d/idを入力/preview" width="100%" height="534">
width(横のサイズ)の数値を100%としてあげるだけでいいです!すると,
▲図5. ぴったりPDF
ご覧のとおり,ブログにぴったり貼り付けることが出来ましたね。
以上,ライフハックでした。
追伸:画像においても,「100%」とするだけで,サイズを自動調整してくれます。コンピューターって便利!
このブログは「プリント配布サイト」なので,当たり前ですが,ブログにPDFを張り付けてあります。
今回は,PDFをブログに貼る方法をお伝えします。
今さっき,PDFをはみ出さずに貼る方法を発見しました。
1,Google DriveにPDFをアップロード
ネット社会が進む今日では,Googleアカウントなんて誰でも持っていますね。YoutubeやAndroidで,知らず知らず作っていると思われます。

▲図1. Googleドライブの様子
ドライブを開いたら,ドラック&ドロップ,+新規から,適当にPDFをアップロードしましょう。簡単です。
2,貼り付けたいPDFの共有可能なリンクを取得する

▲図2. 共有可能なリンク
右クリックして,「共有可能なリンクを取得する」をクリックしてください。すると,URLがコピーされます。貼り付けると,↓のようになります。
https://drive.google.com/open?id=1eo-syTUkQTqHX00aqUDqwemNlzIS5rX1
このURLの内,用いるのは,idの後ろです。「太字下線部」のところです。
3,魔法のコードをidと共に入力
<iframe src="https://drive.google.com/file/d/idを入力/preview" width="801" height="534">
↑のコードをそのままFC2に張り付け,”idを入力”の所を,PDFのidに変更します。
先ほどのPDFは,以下のように表示されます。
図3. PDF(2016年度都立日比谷高校の問題)
これでひとまず貼り付けることが出来ました!
4,サイズを自動調整
↑の貼り付け方だと,スマートフォンで表示する際,はみ出して,見栄えが悪くなります。スマートフォンで無くても,画面サイズ小さいPCでは起こってしまいますね。

▲図4. はみ出すPDF
対処の方法は簡単です。今さっき見つけました。
<iframe src="https://drive.google.com/file/d/idを入力/preview" width="100%" height="534">
width(横のサイズ)の数値を100%としてあげるだけでいいです!すると,
▲図5. ぴったりPDF
ご覧のとおり,ブログにぴったり貼り付けることが出来ましたね。
以上,ライフハックでした。
追伸:画像においても,「100%」とするだけで,サイズを自動調整してくれます。コンピューターって便利!