HTMLのリンクタグにPDFの3ページ目へ飛ぶように設定したいんだけどこれってどうすればいいんだろう？
本日は上記のお悩みについてご回答します。
企業系のサイトなどを作っているとたまに出くわすごとがあるのですが、意外と忘れてたり知らなかったりしますよね。
なので今回はリマインド的な意味も込めて記事を書いておきます。
それでは早速見ていきましょう。
とある文言をURLの後ろにつければ解決
PDFは基本的にデフォルトの状態では1ページ目から表記されますが、とある文言をURLの後ろにつければ特定のページを指定してリンクを設定する事ができます。
HTMLのリンクにPDFの特定のページを指定したい場合は以下のように記載すればOKです。
例えば、sample01というPDFファィルの3ページ目に飛んで欲しい場合は
https://◯◯◯.com/pdf/sample01#page=ページ番号
このように記載します。
ポイントは以下の部分で、3というのは何ページかを表しています。
#page=3
いかがでしょうか。非常に簡単ですね。
実際に設定してみた
では実際にリンク先が特定のページになるように設定してみましょう。
以下のリンクをクリックしてみてください。
こちらは以下のようにリンクを設定しています。
<p><a href="https://webstyle.work/wp-content/uploads/2021/06/sample.pdf" target="_blank">1ページ目に飛びます</a></p>
このままですと通常通り１ページ目にリンクされます。
では以下はどうでしょうか。
はい、２ページ目にリンクされましたね。
こちらは以下のコードとなっています。
<p><a href="https://webstyle.work/wp-content/uploads/2021/06/sample.pdf#page=2" target="_blank">2ページ目に飛びます</a></p>
いかがでしたでしょうか。
非常に簡単に特定のページにリンクさせることが出来たと思います。
是非機会があれば上記の方法で試してみてくださいね。
それではまた次の記事でお会いしましょう。