ブログにPDFをはみ出さずに貼る方法

2019/08/12

-スポンサーリンク-

こんばんは,ソフトカツゲンが美味しい,雪国のスミオです。

このブログは「プリント配布サイト」なので,当たり前ですが,ブログにPDFを張り付けてあります。
今回は,PDFをブログに貼る方法をお伝えします。
今さっき,PDFをはみ出さずに貼る方法を発見しました。

1,Google DriveにPDFをアップロード

ネット社会が進む今日では,Googleアカウントなんて誰でも持っていますね。YoutubeやAndroidで,知らず知らず作っていると思われます。
B1.png
▲図1. Googleドライブの様子

ドライブを開いたら,ドラック&ドロップ,+新規から,適当にPDFをアップロードしましょう。簡単です。

2,貼り付けたいPDFの共有可能なリンクを取得する
B2.png
▲図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では起こってしまいますね。

Screenshot_20190812-184904.png
▲図4. はみ出すPDF

対処の方法は簡単です。今さっき見つけました。

<iframe src="https://drive.google.com/file/d/idを入力/preview" width="100%" height="534">

width(横のサイズ)の数値を100%としてあげるだけでいいです!すると,


▲図5. ぴったりPDF

ご覧のとおり,ブログにぴったり貼り付けることが出来ましたね。

以上,ライフハックでした。

追伸:画像においても,「100%」とするだけで,サイズを自動調整してくれます。コンピューターって便利!
関連記事


comment (-) @ 未分類
ベクトルのありがたみPart2 【2011年度札幌光星高校】 | 【正答率0%!?】2010年度北海道高校入試 軌跡の問題