白兎のまじメモ:略してウサメモ!

いや...俺だって言いたい事沢山あるし!

【コピペでOK】アプリーチのカスタマイズテンプレート。

f:id:shiro-usagi:20190515212930j:plain

最近、自分のブログのカスタマイズに凝っているしろうさぎです^^。今日はアプリーチのちょっとしたカスタマイズをご紹介するよ。前提としてアプリーチを知っている人向けなので…知らない人はごめんなさい。

 

アプリーチとはアプリのダウンロードリンクを簡単に作れるサービス!特にブロガーさんはアプリアフィリエイトで使えるよ!

 

mama-hack.com

 

ちなみに僕のブログではこんな感じでカスタムしているよ~。

PC版だとこんな感じ...▼

f:id:shiro-usagi:20190515213012j:plain

 

スマホ版だとこんな感じ...▼

f:id:shiro-usagi:20190515213153j:plain

 

このカスタマイズのポイント

  •  SEOを意識してタイトル文字大きく
  •  枠線をグレーの点線
  •  全体を中央寄せ
  •  枠線の上と下にスペース

 

今日は僕のテンプレートをさらに改良したものをご紹介するね!

 

 

【コピペでOK】アプリーチのカスタマイズテンプレート①

 

僕のサイトのアプリーチデザインCSS

f:id:shiro-usagi:20190515213351j:plain

.appreach { text-align: left; padding: 20px; border: 1px dashed #ddd; overflow: hidden; width:80%; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px; } .appreach:after { content: “”; display: block; clear: both; } .appreach p { margin: 0; float:left; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0 3% 0 0 !important; width: 25% !important; height: auto !important; max-width: 120px !important; } .appreach__detail { display: inline-block; font-size: 20px; line-height: 1.5; width: 72%; max-width: 72%; float:left; } .appreach__detail:after { content: “”; display: block; clear: both; } .appreach__name { font-size: 30px; font-weight:bold; line-height: 1.5em !important; max-height: 3em; overflow: hidden; display:block; width:100%; padding:4px; } .appreach__info { font-size: 12px !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; float:left; } .appreach__aslink img { margin-right: 10px; height: 40px; width: 135px; } .appreach__gplink img { height: 40px; width: 134.5px; }

 

 枠線を点線かつ、太く!

f:id:shiro-usagi:20190515213837j:plain

.appreach { text-align: left; overflow: hidden; width:80%; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px; border:5px dashed #ddd; padding:20px; } .appreach:after { content: “”; display: block; clear: both; } .appreach p { margin: 0; float:left; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0 3% 0 0 !important; width: 25% !important; height: auto !important; max-width: 120px !important; } .appreach__detail { display: inline-block; font-size: 20px; line-height: 1.5; width: 72%; max-width: 72%; float:left; } .appreach__detail:after { content: “”; display: block; clear: both; } .appreach__name { font-size: 30px; font-weight:bold; line-height: 1.5em !important; max-height: 3em; overflow: hidden; display:block; width:100%; padding:4px; } .appreach__info { font-size: 12px !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; float:left; } .appreach__aslink img { margin-right: 10px; height: 40px; width: 135px; } .appreach__gplink img { height: 40px; width: 134.5px; }

 

枠線自体を無くす 

f:id:shiro-usagi:20190515214114j:plain

.appreach { text-align: left; overflow: hidden; width:80%; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px; padding:20px; } .appreach:after { content: “”; display: block; clear: both; } .appreach p { margin: 0; float:left; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0 3% 0 0 !important; width: 25% !important; height: auto !important; max-width: 120px !important; } .appreach__detail { display: inline-block; font-size: 20px; line-height: 1.5; width: 72%; max-width: 72%; float:left; } .appreach__detail:after { content: “”; display: block; clear: both; } .appreach__name { font-size: 30px; font-weight:bold; line-height: 1.5em !important; max-height: 3em; overflow: hidden; display:block; width:100%; padding:4px; } .appreach__info { font-size: 12px !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; float:left; } .appreach__aslink img { margin-right: 10px; height: 40px; width: 135px; } .appreach__gplink img { height: 40px; width: 134.5px; }

 

タイトル文字を少し小さく背景色を

f:id:shiro-usagi:20190515214043j:plain

 

.appreach { text-align: left; overflow: hidden; width:80%; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px; border:5px dashed #ddd; padding:20px; } .appreach:after { content: “”; display: block; clear: both; } .appreach p { margin: 0; float:left; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0 3% 0 0 !important; width: 25% !important; height: auto !important; max-width: 120px !important; } .appreach__detail { display: inline-block; font-size: 20px; line-height: 1.5; width: 72%; max-width: 72%; float:left; } .appreach__detail:after { content: “”; display: block; clear: both; } .appreach__name { font-weight:bold; line-height: 1.5em !important; max-height: 3em; overflow: hidden; display:block; width:100%; padding:4px; font-size:20px; background-color:#eee; padding-left:20px; margin-bottom:10px; } .appreach__info { font-size: 12px !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; float:left; } .appreach__aslink img { margin-right: 10px; height: 40px; width: 135px; } .appreach__gplink img { height: 40px; width: 134.5px; }

 

や…やってておもったけど、無限にありすぎるから今日はこんな感じ!

 

まとめ 

特にデザイン部分は読み手側の心情に立った時に本当に大事な事だから自分のサイトにあったデザインにしたいよね。アプリーチはとても便利なので後は使い方だよね。今後、この手のカスタマイズネタもドンドン書いて行こうかな?ちなみに今回はアプリーチの新デザインの方なので旧デザインではダメですよ。気を付けて!

 

www.shirousagi.site