【コピペで完成】アプリーチ(旧コード)のデザインCSS配布!

ここでは「アプリーチ」のデザインCSS(旧コード版)を無料配布しています!

アプリーチってめちゃくちゃ便利なんですが、デフォルトデザインが少し簡素なので、「もっとオシャレに仕上げたい!」という人も多いのではないでしょうか?

Canva - 画像加工 & デザイン

Canva – 画像加工 & デザイン
開発元:Canva
無料
posted withアプリーチ

そこで、当ページではアプリーチ(旧コードver)のデザインを変更できるCSSを無料配布したいと思います!

各ブログスタイルに合わせやすいよう全7種類用意しておいたので、好きなものを持っていってください(なお「アプリーチ新コードのデザインCSS」はこちらです。)

ブログデザインを想いのままに!

アプリーチ(旧コード)のデザインCSS配布!

デザインスタイル1

Canva - 画像加工 & デザイン

Canva – 画像加工 & デザイン
開発元:Canva
無料
posted withアプリーチ
↓ 以下の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;}
}

デザインスタイル2

Canva - 画像加工 & デザイン

Canva – 画像加工 & デザイン
開発元:Canva
無料
posted withアプリーチ
↓ 以下の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;}
}

デザインスタイル3

Canva - 画像加工 & デザイン

Canva – 画像加工 & デザイン
開発元:Canva
無料
posted withアプリーチ
↓ 以下の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;}
}

デザインスタイル4

Canva - 画像加工 & デザイン

Canva – 画像加工 & デザイン
開発元:Canva
無料
posted withアプリーチ
↓ 以下の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;}
}

デザインスタイル5

Canva - 画像加工 & デザイン

Canva – 画像加工 & デザイン
開発元:Canva
無料
posted withアプリーチ
↓ 以下の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;}
}

デザインスタイル6

Canva - 画像加工 & デザイン

Canva – 画像加工 & デザイン
開発元:Canva
無料
posted withアプリーチ
↓ 以下の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;}
}

デザインスタイル7

Canva - 画像加工 & デザイン

Canva – 画像加工 & デザイン
開発元:Canva
無料
posted withアプリーチ
↓ 以下の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タグを取ってきて紹介するだけ!簡単ですね!

ぜひブログのタイプに合わせてお好みのデザインを選んで使ってみてください!

この記事が気に入ったら
いいね ! しよう

Twitter で