でも、iTunesアフィリエイトプログラム（PHG）というものがあって、しかもアプリーチ製作者さんは親切にPHGコードを入力する欄まで用意してくれていらっしゃいます。
ならば、もったいないの一言に尽きるのかなぁとも思ったりもします。
スマホにはそんなに興味がなかったので、
iTunesアフィリエイトプログラム（PHG）には登録申請すらしていませんでした。
しかし、
昨日書いた記事にあるようにこれからはできる限りスマホネタの記事も書いていきたいなぁと思っています。
なのでiTunesアフィリエイトプログラム（PHG）に申請してみました。
その結果、
5時間後くらいには承認結果がメールにて送信されてきました。
o(・∇・o)(o・∇・)o ヤッタ!ー
これで、
少しはスマホのアプリ紹介からも・・・・・・。
そして、アプリーチのお陰でリンクコードの作成はメチャクチャ簡単にできます。
ままはっくの旦那さんに感謝です。(o*。_。)oペコッ。
アプリーチのコードそのままでもデザイン的には問題ないのですが、
これまでにブログなどをCSSによってカスタマイズしてきた経験を活かしてアプリーチのデザインCSSを幾つか紹介したいと思います。
現在の私のブログにおいてのアプリーチのCSSデザインスタイルは以下のような感じになっています。
CSSは以下になります。
#appreach-box {
background: #ccc;
background-image: -webkit-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
background-image: -moz-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
background-image: -o-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
background-image: linear-gradient(to bottom,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
border-top: 1px solid #ccc;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #ddd;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
color: #333;
margin: 2rem 0;
padding: 1rem;
text-shadow: -1px 1px 0 rgba(255,255,255,.8);
}
#appreach-box p,
#appreach-box br {
display: none;
}
.appreach-info {
overflow: hidden;
}
.appreach-info a {
color: #333;
}
#appreach-appname {
font-size: 1.1em;
font-weight: bold;
}
.appreach-powered {
background-color: rgba(0, 0, 0, .1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .2) inset;
color: #111;
display: block !important;
font-size: 65% !important;
margin: 1em 0;
padding: .2em .5em .2em 0;
text-align: center;
text-shadow: -1px 1px 0 rgba(255,255,255,.2);
}
.appreach-powered a {
color: #111;
}
シンプルに背景色のみを装飾するのであれば以下のCSSで可能です。
#appreach-box {
background-color: #fdf1fc;
margin: 2rem 0;
padding: 1rem;
}
#appreach-box p,
#appreach-box br {
display: none;
}
.appreach-info {
overflow: hidden;
}
#appreach-appname {
color: #a4199d;
font-weight: bold;
}
#appreach-developer {
margin-bottom: 1.5rem;
}
上記のCSSの場合には以下のような表示になります。
その他にはシンプルな背景がピンク色の薄めで影をつけたデザインCSSは以下になります。（ただ単にbox-shadowを付けただけですが…。）
/*アプリーチ*/
#appreach-box {
background-color: #fdf1fc;
margin: 2rem 0;
padding: 1rem;
box-shadow: 0 0 0 2px #6c1e60;
}
#appreach-box p,
#appreach-box br {
display: none;
}
.appreach-info {
overflow: hidden;
}
#appreach-appname {
color: #a4199d;
font-weight: bold;
}
#appreach-developer {
margin-bottom: 1.5rem;
}
一番初めのデザインは非常にシンプルな感じで非常に良いのですが、
私の場合見出しの色と若干被ってしまうのでbox-shadowをつけてみました。
すると以下のような感じに表現されます。
このCSSは、上記のシンプル・イズ・ベスト（Simple is Best）なデザインの#appreach-box内にbox-shadowを1行加えるだけです。σ(^_^;)
/*アプリーチ*/
#appreach-box {
background-color: #fdf1fc;
margin: 2rem 0;
padding: 1rem;
box-shadow: 0 0 0 2px #6c1e60;
}
#appreach-box p,
#appreach-box br {
display: none;
}
.appreach-info {
overflow: hidden;
}
#appreach-appname {
color: #a4199d;
font-weight: bold;
}
#appreach-developer {
margin-bottom: 1.5rem;
}
他に上記のスタイルで背景色のみ変更するのであれば、background-colorを変更するだけで色々な色にすることができます。
例えば黒色にするにはカラーコードでは#000000が黒なので、
background-color: #6c1e60;
を
background-color: #000000;
に上記のように変更するだけです。
背景色が黒色のCSS
#appreach-box {
background-color: #000000;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #6c1e60;
color: #fff;
margin: 2rem 0;
padding: 1rem;
}
#appreach-box p,
#appreach-box br {
display: none;
}
.appreach-info {
overflow: hidden;
}
.appreach-info a {
color: #fff;
}
#appreach-appname {
color: #fff;
font-weight: bold;
}
.appreach-powered {
background-color: rgba(255, 255, 255, .4);
display: block !important;
margin: 1em 0;
padding: .2em .5em .2em 0;
text-align: right;
}
その際の表示のされ方は以下のようになります。
追伸）
最終的には私のブログにおいてのアプリーチのCSSデザインは以下のようにしてみました。
#appreach-box {
background: #ccc;
background-image: -webkit-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(210, 210, 204, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(109, 104, 104, 1.0)
);
background-image: -moz-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(210, 210, 204, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(109, 104, 104, 1.0)
);
background-image: -o-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(210, 210, 204, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(109, 104, 104, 1.0)
);
background-image: linear-gradient(to bottom,
rgba(220, 220, 220, 1.0),
rgba(210, 210, 204, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(109, 104, 104, 1.0)
);
border-top: 1px solid #ccc;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #ddd;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
color: #333;
margin: 2rem 0;
padding: 1rem;
text-shadow: -1px 1px 0 rgba(255,255,255,.8);
}
#appreach-box p,
#appreach-box br {
display: none;
}
.appreach-info {
overflow: hidden;
}
.appreach-info a {
color: #333;
}
#appreach-appname {
font-size: 1.1em;
font-weight: bold;
}
.appreach-powered {
background-color: rgba(0, 0, 0, .1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .2) inset;
color: #111;
display: block !important;
font-size: 65% !important;
margin: 1em 0;
padding: .2em .5em .2em 0;
text-align: center;
text-shadow: -1px 1px 0 rgba(255,255,255,.2);
}
.appreach-powered a {
color: #111;
}
上記CSSでの表示例は以下のようになります。
まとめ…。でもないかもしれません。
タイトルと内容があまり一致していないような気・が・す・る・のは私だけではありませんよねm(__)m。
iTunesアフィリエイト（PHG）の登録申請の仕方と使い方などを（も）紹介したいと思っていましたが・・・・・・。
アプリーチのCSSばっかりになっちゃいました。すまみそん。_(._.)_
iTunesアフィリエイト（PHG）の使い方や登録申請の方法などは以下のサイトさんを参考にしてみてください。（丸投げしてしまいました。）
iTunesアフィリエイト（PHG）の登録申請で承認された後の使い方などは以下のサイト様がわかりやすいかと思われます。
本当の最後にアプリーチの表示例です。
マンガワン-毎日更新！最新話まで全話読める無料漫画アプリ
無料
comment