今週の人気記事トップ１０

{"title":"","limit":10,"offset":0,"range":"weekly","time_quantity":24,"time_unit":"hour","freshness":false,"order_by":"views","post_type":"post","pid":"","exclude":"","cat":"","taxonomy":"category","term_id":"","author":"","shorten_title":{"active":false,"length":0,"words":false},"post-excerpt":{"active":false,"length":0,"keep_format":false,"words":false},"thumbnail":{"active":true,"build":"manual","width":"100","height":"75"},"rating":false,"stats_tag":{"comment_count":false,"views":true,"author":false,"date":{"active":false,"format":"F j, Y"},"category":false,"taxonomy":{"active":false,"name":"category"}},"markup":{"custom_html":true,"wpp-start":" ","wpp-end":" ","title-start":" ","title-end":" ","post-html":" {thumb} {title} {stats} {excerpt} "},"theme":{"name":""}}

Android iPhone PC スマホツール伝えたいこと備忘録

プロモーションを含みます

アプリーチCSSデザインでiTunesアフィリエイトプログラム(PHG)を使い方法

2025年6月16日 (月曜日)本日の人気記事トップ１０

所要時間目安：約 8 分

This session is using　 IPv4 　is established in

今日は2025年6月16日です。

この記事は2017年1月17日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く･戻る

2025年6月16日 (月曜日)↓における週間月間人気記事トップ３は？↓: 本日
週間
月間

WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです 1PV
WAKO'S製品はどれも素晴らしい商品ばかりですが、その中でもハイブリッド車用の低粘度エンジンオイルに対しての添加剤です。SUPERHVは、低粘度エンジンオイルのピストンへのエンジンオイルの皮膜形成さ…
もっと読む

WordPressプレビュー出来ない。権限がありません。解決方法保存版 1PV
えー、はぁ( ´Д｀)=3良かった…。一昨日から続いていたWordPressで新規投稿記事や過去記事のプレビューが出来ないという問題・不具合について、見事（やっと）解決できたので、備忘録としての…
もっと読む

RSSフィードにアイキャッチ画像を表示させる方法Feedlyなど 1PV
WordPressでのブログ運営にして間もなく一年が経とうとしています。はじめは試行錯誤でphpって何？functionって日本語だと機能って意味だけれど何？みたいな感じでした。まぁ、今でも超有名な…
もっと読む

エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 25PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。そんな車でも長めにお気に入りの愛車となれば長…
もっと読む

車のキーナンバー確認方法。キーレス紛失や壊れた時 23PV
初めての経験でした。（汗）…。キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
もっと読む

ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 19PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。と記載しました。ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。）その記…
もっと読む

エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 25PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。そんな車でも長めにお気に入りの愛車となれば長…
もっと読む

車のキーナンバー確認方法。キーレス紛失や壊れた時 23PV
初めての経験でした。（汗）…。キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
もっと読む

ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 19PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。と記載しました。ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。）その記…
もっと読む

もうアフィリエイトをしている人には知れ渡っているかもしれませんが、アプリーチというままはっくさんの旦那さんが作ったツール？サイトがあります。

同じような便利なツールとしてカエレバブックマークレットなどで有名なかん吉さん謹製のポチレバなどもあります。

今のところ私はカエレバしか使ったことがないのでポチレバの使い勝手は評価のしようあありません。

それはこちらです。アプリーチ

アドセンス336pxPC閲覧記事下表示1つ目コード

メルカリ招待コード：

そこでスマホアプリの紹介とその紹介によって発生した報酬（アフィリエイト）のリンクコードを簡単に作成できるアプリーチがあります。

あることは知っていたのですが、
スマホ関係（特にiPhone関係）は知識も少なくあまり興味がなかったので放置プレイしていました。

特にiTunesアフィリエイトプログラムのPHGコードなど気にせずにそのままアプリ紹介の際には、

アプリーチで検索して該当アプリが検索結果で出てきたら、そのコードをそのまま使用していました。

iTunesアフィリエイトプログラム（PHG）に登録して初めて知ったのですが・・・・・・。

そのまま自分のPHGコードを入力しないでスマホアプリを紹介すると開発者のPHGコードが出力されている模様な感じを察知しました。

もちろん、開発者なのでそれはあって良いことだと思います。

でも、iTunesアフィリエイトプログラム（PHG）というものがあって、しかもアプリーチ製作者さんは親切にPHGコードを入力する欄まで用意してくれていらっしゃいます。

ならば、もったいないの一言に尽きるのかなぁとも思ったりもします。

スマホにはそんなに興味がなかったので、
iTunesアフィリエイトプログラム（PHG）には登録申請すらしていませんでした。

しかし、
昨日書いた記事にあるようにこれからはできる限りスマホネタの記事も書いていきたいなぁと思っています。

アクセス数を増やす方法!!それはスマホ…。

ブログやホームページなどのサイトを運営していると、やはり気になるのがアクセス数だと思いわれます。ここ2年から3年で一般人や普通の人？（表現が曖昧ですが無礼のないように）でも、はて

📅 2017.01.16 | 📂 スマホ, 伝えたいこと, 備忘録

なのでiTunesアフィリエイトプログラム（PHG）に申請してみました。

その結果、
5時間後くらいには承認結果がメールにて送信されてきました。

o(・∇・o)(o・∇・)o ヤッタ!ー

これで、
少しはスマホのアプリ紹介からも・・・・・・。

そして、アプリーチのお陰でリンクコードの作成はメチャクチャ簡単にできます。

ままはっくの旦那さんに感謝です。(o*。_。)oペコッ。

超便利！iPhoneアプリもAndroidアプリも両方紹介できるブログツール、アプリーチ

それをすべて解決してくれるのがこのツールです。「アプリーチ」

ままはっく

アプリーチのコードそのままでもデザイン的には問題ないのですが、

これまでにブログなどをCSSによってカスタマイズしてきた経験を活かしてアプリーチのデザイン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

この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背景色黒と枠線

追伸）

最終的には私のブログにおいてのアプリーチの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;
 }