Twitterにてブログの新着記事更新情報をお届けしてます!(ここをクリックするとTwitterへ)

ままはっくの「アプリーチ」がシンプルで使いやすい【カスタマイズ】

どうも、ぶちくまです。

ままはっくの「アプリーチ」という、アプリ紹介ツールが使いやすいですよ。
時間に余裕があればカスタマイズやっちゃいます。
テーマがCocoonの方、AMPだと表示が崩れている可能性があるのでコード追記しておきましたよ。

今日はかなり短めの記事になります。

スポンサーリンク

アプリーチとは

「ままはっく」が提供している、スマホアプリを紹介するブログパーツを簡単に作ってくれるツールになります。

ぶちくま
ぶちくま

簡単に言えば、アプリの「カエレバ」みたいなもんです。

何がいいって、iPhoneとAndroidの、どちらも表示できること、さらに、ブログパーツ自体がすっきりとしたデザインで、使いやすいこと。

これにつきます。

http://mama-hack.com/app-reach/

アプリーチを使ってアフィリエイトとも連携

今回はアフィリエイトを利用してみました。

アプリーチのいいところは、各アフィリエイトのリンクに差し替えることができることですね。

今回はアンドロイドにはアフィリエイトリンクに、iPhoneの方にはトークンコードを入れてみました。

とても簡単ですね!

スポンサーリンク

実際にアプリーチを表示する

では、実際にアプリーチを表示していきたいと思います。

【新作】ブラウンダスト(Brown Dust)

【新作】ブラウンダスト(Brown Dust)

NEOWIZ無料posted withアプリーチ

デザインをカスタマイズしたいときは

「JIN」というテーマを作っている、最強アフィリエイターのひつじさんがCSSを配布してくれています。

ぜひ、ご利用ください!(私がいうことではない)

【コピペで完成】アプリーチのデザインCSS配布!全7種類用意したのでお好みをどうぞ | アフィリエイトの始め方|初心者が月5万稼ぐ方法をすべて公開!
ここでは「アプリーチ」のデザイン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:好きな色】を入れると、価格表示を赤にしたりできます。

しろくまさん
しろくまさん

創作ベースでは文字のグレーに合わせて、薄い赤にしていますね。

色など調整したいときは、初心者でもわかるディベロッパーツールの使い方として見出しのカスタマイズを紹介した記事がわかりやすいかと思います。

【Cocoonカスタマイズ】超初心者でも自分好みに「見出し」を変える!
今回は無料のWordPressテーマで国内最高峰のクオリティの 「Cocoon」を使った見出しのカスタマイズ方法を、 これでもかってくらいに画像を使って説明してみました。 ほぼ何もできない状態の初心者の方でも、きっと自由にカスタマイズできるくらいの わかりやすさを目指したつもりです。 まずはその第一段階、Google Chromeのデベロッパーツールの使い方も説明しました。

周囲を囲うならborderの調整を

今回のカスタマイズでは、上側だけを太めのborderの実線を引いてみました。

囲いたい方は【.appreach】以下の【border-top】を【border】に変えることで四角く囲うことができます。線の太さなどは以下のプロパティの値を変更することで調整できます。

刺繍みたいな可愛い感じにしたい

ぶちくま
ぶちくま

たまに見かける、点々だけ色を変えて刺繍みたいな可愛い感じにしたいんだけど

この記事で言うなら、CSSコード表示ボタンみたいな感じですね。見出しなんかでもよく使われている、汎用性の高いカスタマイズ事例ですね。

これはbox-shadowというプロパティとの合わせ技でつくります。

  1. borderで刺繍の糸部分の色を指定します。
  2. borderの外側の部分はbox-shadowで影を引くことで追加します。
  3. box-shadowの影の色を、backgroundと同じ色に指定します。
  4. box-shadowの影を好きなながさに調整します。

だいたい、こんな感じでつくっています。コードは、いつかカルーセルのCSSを載せた時に紹介しますね。(だいたいいつも後回し)

スポンサーリンク

アプリーチに出会えて個人的に思ったこと

戯言ですが。

もともと少しでも集客に役立てばいいなぁ、と思って、先月からTwitter始めてみました。

詳しいことは別記事で書きますが、Twitterの世界には、とにかくたくさんのブロガーがいて、今回の「アプリーチ」のように、存在も知らなかったものに気づけることができたのは、Twitterと、情報提供してくれたひつじさん、開発・提供してくれている、「ままはっく」のおかげなんだなぁ、としみじみ感じました。

なんでわざわざこんなことを書くかというと、結論から言うと、ぶちくまのTwitter進出は失敗に終わったからです。

ぶちくま
ぶちくま

どうにもTwitterは肌に合いませんでした

細かいことはいつか記事にします。

とはいえ、情報収拾の場として、あるいはブロガー同士の交流の場として、Twitterってのはいいもんだ、と最近染み入るように感じたところでありました。

記事の分量水増し大作戦でした(照れ隠し)。

ではでは。

コメント