SANGOでアプリーチを使用する時のCSSカスタマイズ

アプリーチCSSカスタマイズ

MEMO
このページのカスタマイズは、2018年4月9日以降の新コード用CSSについて行っています。旧コードについては触れておりませんのでご注意下さい。

スマホアプリを紹介する際にはアプリーチが便利ですが、アプリーチのCSSをSANGO上でそのまま使用するとデザインが崩れてしまいます。

私の場合、普段の確認をOperaで行っておりましたので、最初にOperaでプレビュー確認をしました。その時はサンプル通りに表示されたので大丈夫だと思ってしまいましたが、GoogleChrome、Firefoxのブラウザから確認すると完全に崩れてしまっています。RESIZERで確認すると、Operaから見たためかもしれませんが、PC、タブレット、スマホともにきちんと表示されています。けれど、スマホ実機で確認するとやはりデザインが崩れてしまっています。

アプリーチ崩れ画面
こちらはスマホ実機の画面です。

左はiphone用アプリアイコンを使用、右はAndroid用に替えています。
画像に関するCSSが無視されているようで、左だとスマホの一画面に2種のリンクアイコンが入りきれないぐらいにアプリアイコンが大きく表示されてしまっています。右はアプリアイコンが少し小さくなってリンクアイコンまで一画面に入るようにはなりましたが、どちらにしてもアイコンの元サイズが表示されているためサイズが揃っていません。PCで見た場合も同様で画像サイズがCSSの指定を完全に無視して表示されていました。

MEMO
アプリーチのiphone版のアプリアイコンはHttpsに完全対応しておらず、httpsサイトでは表示されないものがあるようですので、両方のアプリがある場合はAndroid版のアイコンを選択した方が良いようです。

以下のカスタマイズはSANGOのサイドバーのウィジェットに貼り付けた際にちょうど良く収まるように小さめにデザインにしています。小さすぎると感じる場合はCSSを訂正してご利用ください。また、サイドバーでなく、記事本文中に挿入した場合に、.appreachにサイズ指定をしないと大変大きい画像が表示されてしまいますので、その対策としてmax-widthを使用しています。環境に合わせて変更して下さい。

利用の際には子テーマのstyle.cssに以下のソースコードを追加して下さい。

style.css

.appreach {
	max-width: 400px;
	text-align: left;
	padding: 10px;
	border: 10px solid lightblue;
	overflow: hidden;
}
.appreach:after {
	content: "";
	display: block;
	clear: both;
}
.appreach p {
	font-size: calc(80% + 0.2vw);
	margin: 0;
}
.appreach a:after {
	display: none;
}
.appreach__icon {
	float: left;
	width:30%;
	height:auto;
}
.appreach__detail {
	margin-left: 2%;
	display: inline-block;
	line-height: 1.5;
	width: 67%;
	max-width: 67%;
}
.appreach__detail:after {
	content: "";
	display: block;
	clear: both;
}
.appreach__name {
	padding-bottom:0.5em;
	line-height: 1.5em !important;
	font-weight: bold;
	max-height: 3em;
	overflow: hidden;
}
.appreach__info {
	font-size: calc(60% + 0.2vw)!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;
	max-height: 40px;
	width: auto;
}
.appreach__gplink img {
	max-height: 40px;
	width: auto;
}

 
  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です