【コピペで完成】アプリーチ（旧コード）のデザインCSS配布！
ひつじ
<景品表示法に基づく表記> 当サイトのコンテンツ内には商品プロモーションを含みます。
ここでは「アプリーチ」のデザインCSS（旧コード版）を無料配布しています！
アプリーチってめちゃくちゃ便利なんですが、デフォルトデザインが少し簡素なので、「もっとオシャレに仕上げたい！」という人も多いのではないでしょうか？
そこで、当ページではアプリーチ（旧コードver）のデザインを変更できるCSSを無料配布したいと思います！
各ブログスタイルに合わせやすいよう全7種類用意しておいたので、好きなものを持っていってください（なお「アプリーチ新コードのデザインCSS」はこちらです。）
ブログデザインを想いのままに！
アプリーチ（旧コード）のデザインCSS配布！
デザインスタイル１
↓ 以下のCSSをコピペ ↓
#appreach-box{
box-shadow:0px 2px 5px 1px #e5e5e5;
border-radius:2px;
}
#appreach-box{
padding:10px 20px;
margin:20px;
}
#appreach-box img,
#appreach-box p{
margin:0;
padding:0;
}
#appreach-appname{
font-weight:bold;
font-size:16px;
color:#555;
padding-bottom:5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
color:#aaa;
font-size:12px;
margin-bottom:10px;
}
.appreach-powered a{
color:#aaa;
}
.appreach-links{
margin-top:8px;
}
@media only screen and (max-width: 786px){
#appreach-box{
margin:20px 0;
padding:10px 5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
font-size:11px !important;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
margin-bottom:10px;
}
#appreach-appname{
font-size:15px;}
}
デザインスタイル２
↓ 以下のCSSをコピペ ↓
#appreach-box{
border-top:5px solid #043d78;/*上線の色*/
box-shadow:0px 2px 5px 1px #e5e5e5;}
#appreach-box{
padding:10px 20px;
margin:20px;
}
#appreach-appname{
font-weight:bold;
font-size:16px;
color:#555;
padding-bottom:5px;
}
#appreach-box img,
#appreach-box p{
margin:0;
padding:0;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
color:#aaa;
font-size:12px;
margin-bottom:10px;
}
.appreach-powered a{
color:#aaa;
}
.appreach-links{
margin-top:8px;
}
@media only screen and (max-width: 786px){
#appreach-box{
margin:20px 0;
padding:10px 5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
font-size:11px !important;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
margin-bottom:10px;
}
#appreach-appname{
font-size:15px;}
.appreach-links{
margin-top:0px;}
}
デザインスタイル３
↓ 以下のCSSをコピペ ↓
#appreach-box{
border:3px solid #eee;/*線の色*/
border-radius:2px;
}
#appreach-box{
padding:10px 20px;
margin:20px;
}
#appreach-box img,
#appreach-box p{
margin:0;
padding:0;
}
#appreach-appname{
font-weight:bold;
font-size:16px;
color:#555;
padding-bottom:5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
color:#aaa;
font-size:12px;
margin-bottom:10px;
}
.appreach-powered a{
color:#aaa;
}
.appreach-links{
margin-top:8px;
}
@media only screen and (max-width: 786px){
#appreach-box{
margin:20px 0;
padding:10px 5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
font-size:11px !important;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
margin-bottom:10px;
}
#appreach-appname{
font-size:15px;}
.appreach-links{
margin-top:0px;}
}
デザインスタイル４
↓ 以下のCSSをコピペ ↓
#appreach-box{
border-top:3px solid #043d78;/*上線の色*/
border-bottom:3px solid #043d78;/*下線の色*/
}
#appreach-box{
padding:10px 20px;
margin:20px;
}
#appreach-appname{
font-weight:bold;
font-size:16px;
color:#555;
padding-bottom:5px;
}
#appreach-box img,
#appreach-box p{
margin:0;
padding:0;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
color:#aaa;
font-size:12px;
margin-bottom:10px;
}
.appreach-powered a{
color:#aaa;
}
.appreach-links{
margin-top:8px;
}
@media only screen and (max-width: 786px){
#appreach-box{
margin:20px 0;
padding:10px 5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
font-size:11px !important;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
margin-bottom:10px;
}
#appreach-appname{
font-size:15px;}
.appreach-links{
margin-top:0px;}
}
デザインスタイル５
↓ 以下のCSSをコピペ ↓
#appreach-box{
border-top:1px dashed #043d78; /*上線の色*/
border-bottom:1px dashed #043d78; /*下線の色*/
}
#appreach-box{
padding:10px 20px;
margin:20px;
}
#appreach-appname{
font-weight:bold;
font-size:16px;
color:#555;
padding-bottom:5px;
}
#appreach-box img,
#appreach-box p{
margin:0;
padding:0;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
color:#aaa;
font-size:12px;
margin-bottom:10px;
}
.appreach-powered a{
color:#aaa;
}
.appreach-links{
margin-top:8px;
}
@media only screen and (max-width: 786px){
#appreach-box{
margin:20px 0;
padding:10px 5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
font-size:11px !important;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
margin-bottom:10px;
}
#appreach-appname{
font-size:15px;}
}
デザインスタイル６
↓ 以下のCSSをコピペ ↓
#appreach-box{
border-top:5px double #043d78; /*上線の色*/
border-bottom:5px double #043d78; /*下線の色*/
}
#appreach-box{
padding:10px 20px;
margin:20px;
}
#appreach-appname{
font-weight:bold;
font-size:16px;
color:#555;
padding-bottom:5px;
}
#appreach-box img,
#appreach-box p{
margin:0;
padding:0;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
color:#aaa;
font-size:12px;
margin-bottom:10px;
}
.appreach-powered a{
color:#aaa;
}
.appreach-links{
margin-top:8px;
}
@media only screen and (max-width: 786px){
#appreach-box{
margin:20px 0;
padding:10px 5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
font-size:11px !important;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
margin-bottom:10px;
}
#appreach-appname{
font-size:15px;}
.appreach-links{
margin-top:0px;}
}
デザインスタイル７
↓ 以下のCSSをコピペ ↓
#appreach-box{
padding:10px 20px;
margin:20px;
}
#appreach-appname{
font-weight:bold;
font-size:16px;
color:#555;
padding-bottom:5px;
}
#appreach-box img,
#appreach-box p{
margin:0;
padding:0;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
color:#aaa;
font-size:12px;
margin-bottom:10px;
}
.appreach-powered a{
color:#aaa;
}
.appreach-links{
margin-top:8px;
}
@media only screen and (max-width: 786px){
#appreach-box{
margin:20px 0;
padding:10px 5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
font-size:11px !important;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
margin-bottom:10px;
}
#appreach-appname{
font-size:15px;}
.appreach-links{
margin-top:0px;}
}
アプリーチデザインCSSの使い方
なお当デザインCSSは、WordPressの「カスタマイズ」>「追加CSS」に配布コードを貼付するだけで適用されます。
あとはいつも通りに「アプリーチ」からアプリのHTMLタグを取ってきて紹介するだけ！簡単ですね！
ぜひブログのタイプに合わせてお好みのデザインを選んで使ってみてください！