【レスポンシブ対応】アプリーチをカスタマイズしたのでコピペしてみて下さい!

便利ツール

今回の記事は、なんと!
記念すべき100記事目です!!

パチパチパチパチ・・・

記念すべき100記事目ということでなにか特別な記事にしようかと思いましたが、考えていると全然前に進まなかったので、とりあえず普通の記事を書くことにしました。

そのうち100記事を書いた今、どのような状況か?ということを記事にしたいと思います。

ちなみに今回はアプリーチのカスタマイズ記事です。

アプリーチが上手く使えなかったため、ずっと使っていませんでしたが、最近なんとか使えるようになったので、そのカスタマイズ記事を書いてみようと思います。

そんなに劇的な変化はないので、あまり期待をしないでください。
シンプルイズベストです!

アプリーチの場合はスマホでの表示がデフォルトの状態だと個人的にはあまり好きではないので、自分好みの表示にしたいと思います。
一応レスポンシブ対応です。

スポンサーリンク

デフォルトの状態

基本的にはコピペで出来るのでお気軽にお試しください。

ちなみにデフォルトの状態であればこのような感じです。
PC

スマホ

これをカスタマイズしていきます。

style.cssにコピペする!

以下のコードをstyle.cssにコピペをするだけでOKです!

/*--アプリーチカスタマイズ--*/
#appreach-box{
	border:1px solid #ddd;
	box-shadow:0 2px 5px #999;
	padding:10px;
}
/*--ここまで--*/

/*--アプリーチスマホ--*/
@media screen and (max-width: 480px) {
#appreach-box{
	width:90%;
	margin:0 auto;
}
img#appreach-image{
	display:block;
	max-width:none;
	width:50% !important;
	margin:0 auto !important;
	float:none !important;
}
#appreach-appname{
	margin-bottom:10px;
}
#appreach-price{
	margin-left:15px;
}
.appreach-powered{
	display:block !important;
	margin-top:5px;
}
#appreach-itunes-link,
#appreach-gplay-link{
	width:48%;
}
}
/*--ここまで--*/

このように表示されます

PC

スマホ

実物

Runtastic GPS ランニング&ウォーキング距離測定

Runtastic GPS ランニング&ウォーキング距離測定
開発元:runtastic
無料
posted with アプリーチ

カスタマイズした点としては、PCでは枠を書いたことで他のコンテンツとの境目を作ることで、リンクがあることを分かりやすくしました。
スマホでの表示では配置を整え、コンパクトに見やすく見えるようにしました。

大きく変わってはいませんが、見やすくはなったと思います。

コピペででいるので是非お試しあれ!

コメント