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

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

パチパチパチパチ・・・

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

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

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

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

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

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

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

• 国内シェアNo.1の高速サーバーなのでストレスフリー！
• 自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！ またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！ またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

デフォルトの状態

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

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

スマホ

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

style.cssにコピペする！

以下のコードをstyle.cssにコピペをするだけでＯＫです！

/*--アプリーチカスタマイズ--*/
#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

無料

posted with アプリーチ

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

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

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