【WordPress】アプリーチリンクのデザインをカスタマイズする方法【テーマ開発】

今回は、WordPressでアプリーチリンクのデザインをカスタマイズする方法を解説します。

【WordPress】アプリーチリンクのデザインをカスタマイズする方法【テーマ開発】

アプリーチは、iPhone/Androidアプリのリンクを簡単に作成できるツールです。

アプリーチを使えば、簡単にアプリのリンクが作れるのでとても便利です。

CSSを追加すればデザインを自由にカスタマイズできます。今回は実際にCSSを追加してデザインをカスタマイズしていきます。

アプリーチリンクを挿入する

記事内にアプリーチリンクを挿入する方法は、下記の記事をご覧ください。

【WordPress】アプリーチリンクのデザインをカスタマイズする方法【テーマ開発】 今回は、WordPressでアプリーチリンクのデザインをカスタマイズする方法を解説します。 【WordPress】アプリーチリンクのデザインをカ…

アプリーチのデザインをカスタマイズする

アプリーチにはデフォルトのデザインが用意されています。今回はデフォルトのCSSを改良してオリジナルのデザインを作成していきます。

デフォルトのデザイン

デフォルトのデザインは、下記のような感じです。

下記のCSSを追加すれば、デザインを適用できます。このコードは、アプリーチのサイトから取得できます。

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

今回作成するオリジナルのデザイン

今回作成するデザインは、デフォルトのデザインを少し改良したものになります。

パズル＆ドラゴンズ

GungHo Online Entertainment, Inc.無料posted withアプリーチ

下記のCSSを適用すれば、デザインを適用できます。

.appreach {
	text-align: left;
	padding: 20px;
	overflow: hidden;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	margin-bottom: 20px;
	background: #fff;
}

.appreach:after {
	content: "";
	display: block;
	clear: both;
}

.appreach p {
	margin: 0 !important;
}

.appreach > p {
	display: none;
}

.appreach a:after {
	display: none;
}

.appreach__icon {
	float: left;
	border-radius: 10%;
	overflow: hidden;
	margin: 0 3% 0 0 !important;
	width: 25% !important;
	height: auto !important;
	max-width: 120px !important;
}

.appreach__detail {
	display: inline-block;
	font-size: 20px;
	line-height: 1.5;
	width: 72%;
	max-width: 72%;
}

.appreach__detail:after {
	content: "";
	display: block;
	clear: both;
}

.appreach__name {
	font-size: 16px;
	line-height: 1.5em !important;
	max-height: 3em;
	overflow: hidden;
	font-weight: bold;
	padding-bottom: 10px;
}

.appreach__info {
	font-size: 11px !important;
	color: #808080 !important;
	line-height: 20px !important;
}

.appreach__developper, .appreach__price {
	margin-right: 0.5em;
}

.appreach__posted a {
	margin-left: 0.5em;
	text-decoration: underline !important;
	color: #808080;
}

.appreach__links {
	float: left;
	height: 40px;
	margin-top: 8px;
	white-space: nowrap;
	display: flex;
}

.appreach__links img {
	margin-bottom: 0;
}

.appreach__aslink img {
	margin-right: 10px;
	height: 40px;
	width: 135px;
	max-width: 100%;
}

.appreach__gplink img {
	height: 40px;
	width: 134.5px;
	max-width: 100%;
}

.appreach__star {
	position: relative;
	font-size: 14px !important;
	height: 1.5em;
	width: 5em;
}

.appreach__star__base {
	position: absolute;
	color: #737373;
}

.appreach__star__evaluate {
	position: absolute;
	color: #ffc107;
	overflow: hidden;
	white-space: nowrap;
}