PDF ダウンロード リンク

簡単なダウンロードリンク | 整形したダウンロードリンク | PDFファイルを読むためのプラグインの入手先表示

PDFファイルをダウンロードさせるリンク

簡単なダウンロードリンク

ダウンロードはこちらから (PDF：624KB) 


<a href="path/to/PDF_file.pdf" download="PDF_file.pdf">
    ダウンロードはこちらから
    <img src="path/to/images/Adobe_PDF_file_icon_32x32.png">  (PDF：624KB)
</a>

整形したダウンロードリンク


  <div class="pdfbox">
      <ul>
          <li><a href="Path/to/images/PDF_file.pdf" download="PDF_file.pdf"><div>&nbsp;</div></a></li>
          <li><a href="Path/to/images/PDF_file.pdf" download="PDF_file.pdf">
              <span>こちらからリーフレットを<br class="spOnly">ダウンロード</span>（PDF : 624kB）</a>
              <p>※PC ： 閲覧のみはリンクを右クリック。<br>※スマホ ： リンクを長押し。</p></li>
      </ul>
  </div>


.pdfbox {
	width: 90%;
	min-width: 70rem;
	margin: 3rem auto 2rem;
	padding: 0;
	background-color: #fffdea;
	border: 2px solid #ee7836;
	line-height: 1.8;
	}
.pdfbox ul {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	}
.pdfbox li:nth-child(1) {
	width: 30%;
	overflow: hidden;
	background: url("/Path/to/sample.png") no-repeat center center / cover;
	}
.pdfbox li:nth-child(1) div {
	width: 100%;
	height: 100%;
	}
.pdfbox li:nth-child(2) {
	width: 70%;
	text-align: center;
	padding: .5rem 1rem 2rem;
	}
.pdfbox li:nth-child(2) span {
	font-size: 1.8rem;
	font-weight:bold;
	white-space: nowrap;
	}
@media screen and (max-width: 767px) {
	.pdfbox {
		width: 95vw;
		margin: 2rem auto;
		line-height: 1.4;
		}
	.pdfbox ul {
		width: 100%;
		}
	.pdfbox li:nth-child(2) {
		width: 70vw;
		text-align: left;
		}
	.pdfbox span {
		display:block;
		font-size: 3vw;
		}
	}
@media screen and (max-width: 480px) {
	.pdfbox span{
		display:block;
		}
	}

Adobe Reader関係

PDFファイルを読むためのプラグインの入手先表示

今どきのPCならプレインストールされてるのが常識なのでほとんど必要ないですが…

Get Adobe Reader

PDF形式のファイルをご覧いただくためには、Adobe Readerが必要です。
Adobe Reader（無償）をダウンロードしてご利用ください。


<div class="aareader">
  <p><a href="http://get.adobe.com/jp/reader/" target="_blank">
  	<img src="Path/to/images/Get_Adobe_Acrobat_Reader_DC_web_button_158x39.fw.png" alt="Get Adobe Reader"></a></p>
  <p>PDF形式のファイルをご覧いただくためには、Adobe Readerが必要です。<br>
  	Adobe Reader（無償）をダウンロードしてご利用ください。</p>
</div>


.aareader {
	display: flex;
	font-size: .85em;
	}
.aareader p {
	padding-left: 1rem;
	line-height: 1.5;
	}

TOP