App Store内のアプリを埋め込むサンプルコードと、ダウンロードバッジを埋め込むソースコード

下記3種類の埋め込みサンプルコードをご紹介します。

参考リンク:
App Storeからダウンロードバッジのダウンロード|Apple
App Storeからアプリを検索する | Apple
Link Maker | Apple

目次[閉じる][開く]

アプリの埋め込み

埋め込み見本

Numbers4+

印象的なスプレッドシートの作成

2.3、190件の評価
無料

HTMLコード

<table class="app_table">
	<th>
		<img src="img/post/app-badge/numbers.jpg" width="651" height="651">
	</th>
	<td>
		<h1 class="product_header_title">Numbers<span class="badge">4+</span></h1>
		<h2 class="app_header_subtitle">印象的なスプレッドシートの作成</h2>
		<h2 class="apple_link"><a class="" dir="auto" href="https://apps.apple.com/jp/developer/apple/id284417353?mt=12">Apple</a></h2>
		<div class="star_wrap">
			<span class="we_star_rating_stars"><span class="we_star_rating_stars_in"></span></span><span class="star_rating_count">2.3、190件の評価</span>
		</div>
		<div class="price">無料</div>
		<div class="we_button_outlined">
			<a href="https://apps.apple.com/jp/app/numbers/id409203825?mt=12">こちらで表示: <span class="">Mac App Store</span></a>
		</div>
	</td>
</table>

CSSコード

.app_table {
	display: table;
	width: 100%;
	height: auto;
	border-collapse: separate;
	font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Apple WebExp Icons Custom","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"MS Pゴシック","Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #000000;
	margin: 0;
	border: 1px solid #EEEEEE;
	border-spacing: 0;
}
.app_table a {
	color: #0070c9;
	text-decoration: none;
}
.app_table a:hover {
    color: #0070c9;
	box-shadow: none;
	text-decoration: underline;
}

.app_table th {
	width: 230px;
	vertical-align: top;
	padding: 20px;
}
.app_table th img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
}
.app_table td {
	width: auto;
	vertical-align: top;
	padding: 20px 20px 20px 0px;
}
.product_header_title {
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: .023em;
}
.badge {
	display: inline-block;
	border: 1px solid #8e8e93;
	border-radius: 3px;
	color: #8e8e93;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	font-size: 6.5px;
	font-weight: 700;
	padding-left: 3px;
	padding-right: 3px;
  	margin-left: 10px;
}
.app_header_subtitle {
	font-size: 14px;
	font-weight: 400;
	color: #8e8e93;
}
.apple_link {
	font-size: 18px;
	font-weight: 400;
}
.star_wrap {
	margin: 12px 0;
}
.we_star_rating_stars {
	width: 50px;
	background-position: 0 9.5px;
	line-height: 9.5px;
	display: inline-block;
	height: 9.5px;
	background-image: url(img/post/app-badge/stars.svg);/*ここは任意のパスを指定(素材は下からダウンロードしてください)*/
	background-size: 10px 19px;
	vertical-align: middle;
}
.we_star_rating_stars_in {
	width: 35px;/*ここで星評価の数を調節(例えば星4.2なら42px)*/
	background-position: 0 0px;
	line-height: 9.5px;
	display: inline-block;
	height: 9.5px;
	background-image: url(img/post/app-badge/stars.svg);/*ここは任意のパスを指定(素材は下からダウンロードしてください)*/
	background-size: 10px 19px;
	vertical-align: middle;
}
.star_rating_count {
	font-size: 12px;
	display: inline-block;
	white-space: nowrap;
	color: #8e8e93;
	font-weight: 400;
	margin-left: 4px;
}
.price {
	font-size: 12px;
	font-weight: 400;
	margin-bottom: 4px;
}
.we_button_outlined {
	padding: 7px 8px 5px;
	font-size: 11px;
	font-weight: 400;
	display: inline-block;
	border: 1px solid #0070c9;
	border-radius: 4px;
	text-align: center;
	white-space: nowrap;
}
@media screen and (max-width: 768px) {
	.product_header_title {
		font-size: 16px;
		font-weight: 400;
	}
	.app_header_subtitle {
		font-size: 10px;
	}
	.apple_link {
		font-size: 12px;
	}
	.star_wrap {
		margin: 2px 0;
	}
	.star_rating_count {
		font-size: 10px;
	}
	.price {
		font-size: 10px;
	}
	.we_button_outlined {
		padding: 4px 8px;
		font-size: 10px;
	}
}

上記サンプルコードの説明と編集方法です。

  • 1.使用画像データはこちらからダウンロードしてください。
  • 3.css内で画像している2箇所に上でダウンロードした素材のパスを入れてください。
  • 2.埋め込みたいアプリのURLはこちらから確認できます。

バッジ

バッジ見本

HTMLコード

<a href="ここにアプリのリンク先URL" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2012-05-16&amp;kind=iossoftware&amp;bubble=ios_apps) no-repeat;width:135px;height:40px;" target="_blank" rel="noopener noreferrer"></a>

アプリリンク先URLはこちらから検索
App Storeからアプリを検索する | Apple

スモールバッジ

バッジ見本

HTMLコード

<a href="ここにリンク先URL" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-sm.svg) no-repeat;width:60px;height:15px;"></a>

アプリリンク先URLはこちらから検索
App Storeからアプリを検索する | Apple

コメントを残す