どうも、ぶちくまです。
ままはっくの「アプリーチ」という、アプリ紹介ツールが使いやすいですよ。
時間に余裕があればカスタマイズやっちゃいます。
テーマがCocoonの方、AMPだと表示が崩れている可能性があるのでコード追記しておきましたよ。
今日はかなり短めの記事になります。
アプリーチとは
「ままはっく」が提供している、スマホアプリを紹介するブログパーツを簡単に作ってくれるツールになります。
簡単に言えば、アプリの「カエレバ」みたいなもんです。
何がいいって、iPhoneとAndroidの、どちらも表示できること、さらに、ブログパーツ自体がすっきりとしたデザインで、使いやすいこと。
これにつきます。
http://mama-hack.com/app-reach/
アプリーチを使ってアフィリエイトとも連携
今回はアフィリエイトを利用してみました。
アプリーチのいいところは、各アフィリエイトのリンクに差し替えることができることですね。
今回はアンドロイドにはアフィリエイトリンクに、iPhoneの方にはトークンコードを入れてみました。
とても簡単ですね！
実際にアプリーチを表示する
では、実際にアプリーチを表示していきたいと思います。
デザインをカスタマイズしたいときは
「JIN」というテーマを作っている、最強アフィリエイターのひつじさんがCSSを配布してくれています。
ぜひ、ご利用ください！（私がいうことではない）
ぶちくま流カスタマイズ
ほぼひつじCSSと同じですね（苦笑）いや、もとが優秀すぎて手の加えようがないと言いますか（言い訳）。
ぶちくま風にボタンだけは光らせてみましたが、いかがでしょうか。
クリック、したくなりますか？
「絶対クリックしねぇよ」という方であれば、「点滅する」以下を消してしまえばOK。
あるいは、これは透明度をいじって光っているようにみせているだけなので、「opacity」という項目をいじると、光具合を調整することができます。
50％のところを変えるだけでいいので、かなり楽チンな光らせ方になっています。
/**** アプリーチ ****/
.appreach{
border-top:5px solid #043d78; /*上線の色*/
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.33);
text-align: left;
padding: 25px;
margin:20px;
border-radius:4px;
overflow: hidden;
}
.widget .appreach {
margin: 0;
}
.appreach:after {
content: "";
display: block;
clear: both;
} .appreach img, .appreach p {
margin: 0;
padding:0;
}
.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%;
}
.appreach__detail:after {
content: "";
display: block;
clear: both;
}
p.appreach__name {
font-size: 16px;
color:#555;
padding-bottom:10px;
font-weight:bold;
line-height: 1.5em !important;
max-height: 3em;
overflow: hidden;
}
.appreach__info {
font-size: 12px !important;
color:#888;
}
.appreach__info a{
color:#aaa;
}
.appreach__developper, .appreach__price {
margin-right: 0.5em;
}
span.appreach__price {color: #fb7272}
.appreach__posted a {
margin-left: 0.5em;
}
.appreach__links {
float: left;
margin-top: 15px;
}
.appreach__aslink img {
margin-right: 10px;
height: 40px;
width: 135px;
}
.appreach__gplink img {
height: 40px;
width: 134.5px;
}
@media only screen and (max-width: 786px){
.appreach{
margin:20px 0;
}
.appreach__info {
font-size: 11px !important;
}
p.appreach__name {
font-size: 15px;
}
}
/*アプリーチbutton点滅させる*/
.appreach__aslink img,.appreach__gplink img{
animation: blink2 4s ease-in-out infinite normal;
-webkit-animation: blink2 4s ease-in-out infinite normal;
-moz-animation: blink2 4s linear ease-in-out normal;
-o-animation: blink2 4s linear ease-in-out normal;
}
.appreach__aslink img:hover,.appreach__gplink img:hover{
animation:none;
-webkit-animation:none;
}
@keyframes blink2{
0%{ opacity: 1; }
50%{ opacity: 0.7;}
100%{ opacity: 1; }
}
@-webkit-keyframes blink2{
0%{ opacity: 1; }
50%{ opacity: 0.7;}
100%{ opacity: 1; }
}
@-moz-keyframes blink2{
0%{ opacity: 1; }
50%{ opacity: 0.7;}
100%{ opacity: 1; }
}
@-o-keyframes blink2{
0%{ opacity: 1; }
50%{ opacity: 0.7;}
100%{ opacity: 1; }
}
JIN仕様がベースなのでいらないコード多い
わたし自身はCocoonユーザーなので、JINの詳細な仕様は把握していませんが、わたしがみる限りではいらないコードが多くみられています。
上のコードは大きくヒツジカスタマイズから変更していないので、JINユーザーでも利用できると思います。
ボタンって光らせる意味あるの
ボタンって光らせると何かいいことあるの？
個人的には無い方が目がチカチカしなくていいんだけど。
最近はユーザーはほぼスマホ利用者なので、リンクなのかどうかがわかりづらくなったんだよね。PCみたいにホバー（カーソルを合わせる）だけでわかるといいんだけど。
つまり、「これはリンクですよ」っていう合図っていうこと？
そうなることを期待して導入してみたけど、「光ってると、強引に誘導されているようで、逆に踏みたくなくなるわ！」とか、「なにこれ、怪しいサイトに連れてかれるんじゃないの」って感じる人もいるみたいよ。
つまり、好みの問題ってわけね。
アプリーチをAMP対応させてみた
AMP対応も何も、AMP.CSSに貼り付けるだけではあるのですが。
いつだかのCocoonアップデートに巻き込まれて表示が一部崩れていたので修正しがてら、AMPコードに関してはかなりシンプルに書き直しました。
晴れてぶちくまオリジナルコードになったわけですね！
まぁ、個人的諸事情により、AMPのCSSコードは少しでも短くしたい都合があっただけなので胸を張っていうほどのことではないのですが。。。
コピペで簡単！AMP用アプリーチCSSコード
.appreach{border-top:5px solid #043d78;box-shadow:0 3px 5px rgba(0,0,0,.33);text-align:left;padding:15px;margin:10px;border-radius:4px;overflow:hidden}.appreach img,.appreach p{margin:0;padding:0}.appreach__icon{float:left;border-radius:10%;margin:0 3% 0 0}.appreach__detail{display:inline-block;line-height:1.5;width:67%;max-width:67%}span.appreach__price {color: #fb8b66}p.appreach__name{font-size:15px;color:#555;padding-bottom:10px;font-weight:700;line-height:1.5em;max-height:3em;overflow:hidden}.appreach__info{font-size:11px;color:#888}.appreach__info a{color:#aaa}.appreach__developper,.appreach__price{margin-right:.5em}.appreach__posted a{margin-left:.5em}.appreach__links{float:left;margin-top:15px}.appreach__aslink img{margin-right:10px;height:40px;width:135px}.appreach__gplink img{height:40px;width:134.5px}.appreach a{margin-right:5px}
だいぶぎゅっとしたコードなのはみていただければわかるかと思います。
カスタマイズするなら価格表示の色
一応、ポイントだけ解説します。
【span.appreach__price】というのが、価格表示のセレクタになっています。この部分に【color:好きな色】を入れると、価格表示を赤にしたりできます。
創作ベースでは文字のグレーに合わせて、薄い赤にしていますね。
色など調整したいときは、初心者でもわかるディベロッパーツールの使い方として見出しのカスタマイズを紹介した記事がわかりやすいかと思います。
周囲を囲うならborderの調整を
今回のカスタマイズでは、上側だけを太めのborderの実線を引いてみました。
囲いたい方は【.appreach】以下の【border-top】を【border】に変えることで四角く囲うことができます。線の太さなどは以下のプロパティの値を変更することで調整できます。
刺繍みたいな可愛い感じにしたい
たまに見かける、点々だけ色を変えて刺繍みたいな可愛い感じにしたいんだけど
この記事で言うなら、CSSコード表示ボタンみたいな感じですね。見出しなんかでもよく使われている、汎用性の高いカスタマイズ事例ですね。
これはbox-shadowというプロパティとの合わせ技でつくります。
- borderで刺繍の糸部分の色を指定します。
- borderの外側の部分はbox-shadowで影を引くことで追加します。
- box-shadowの影の色を、backgroundと同じ色に指定します。
- box-shadowの影を好きなながさに調整します。
だいたい、こんな感じでつくっています。コードは、いつかカルーセルのCSSを載せた時に紹介しますね。（だいたいいつも後回し）
アプリーチに出会えて個人的に思ったこと
戯言ですが。
もともと少しでも集客に役立てばいいなぁ、と思って、先月からTwitter始めてみました。
詳しいことは別記事で書きますが、Twitterの世界には、とにかくたくさんのブロガーがいて、今回の「アプリーチ」のように、存在も知らなかったものに気づけることができたのは、Twitterと、情報提供してくれたひつじさん、開発・提供してくれている、「ままはっく」のおかげなんだなぁ、としみじみ感じました。
なんでわざわざこんなことを書くかというと、結論から言うと、ぶちくまのTwitter進出は失敗に終わったからです。
どうにもTwitterは肌に合いませんでした
細かいことはいつか記事にします。
とはいえ、情報収拾の場として、あるいはブロガー同士の交流の場として、Twitterってのはいいもんだ、と最近染み入るように感じたところでありました。
記事の分量水増し大作戦でした（照れ隠し）。
ではでは。
コメント