wpadminアプリーチの使い方の説明とコピペで使えるCSSデザインを用意しましたツイートシェアはてブGoogle+Pocketどうも、ゴトーだ。アプリの紹介記事を書こうとして、アプリーチを使ってみたらCSSデザインが崩れてしまったのだが、それをカスタマイズした時に、その内容を共有したほうがいいのではないかと思って記事を書いてみた。アプリーチの導入方法とコピペですぐに使えるサンプルを用意したので、ぜひ参考にしてみてくれ。HTMLをコピーしてブログに貼るCSSカスタマイズはてなブログだとなぜ崩れるのかベーシックパターンブラックスタイルサンプルはこちらまとめアプリーチとはブログなどでスマホアプリを紹介したいのならアプリーチがおすすめだ。アプリーチを使うことで、簡単に下の画像のようなアプリ紹介のボックスを作成することができる。Storeのリンクが自動で作成されて、アフィリエイトリンクに差し替えることもできるので、ブロガーのために作られたと言っても過言ではない。アプリーチの使い方について紹介したい。アプリの検索まずは上の画像のように、入力ボックスに検索したいアプリ名を入力して検索ボタンをクリックする。すると最も適合したアプリのデータが表示される。ここでは「白猫」と入力したら白猫プロジェクトが表示されている。データのカスタマイズこのSTEP2はアフィリエイトリンクに差し替えたり、データのカスタマイズをしなくても良いという場合は飛ばしても良い。カスタマイズをしたい場合は、まずは「追加機能」というボタンをクリックしよう。すると上の画像のように様々なメニューが表示される。それぞれどのようなものかは以下の通り。なし...ボックスに開発元を表示するかどうか。なし...有料アプリの場合のみ価格と表示するかどうか。タイトル...アプリのタイトルに何に準拠するかどうか。基本的にデフォルトで良い。Playどちらの画像に準拠するかどうか。アフィリエイト設定ここで重要なのがアフィリエイトの設定だ。「Gamefeat」や「SmartC」のような成約型のアフィリエイトリンクを埋め込む場合は、「リンク差し替え」と書かれているところにアフィリエイト用のURLを貼る。左にある「PHGコード」とはiTunesのアフィリエイト用IDのことだ。iTunesのアフィリエイトIDを仕込んだURLから読者がアプリを購入すると、その7%が報酬として入る仕組みになっている。これは有料アプリを購入した場合のみで、無料アプリがダウンロードされても報酬は入らないらしい。意味がないかというとそうではなく、無料アプリのURLを踏んでから有料アプリを購入した場合はAmazonと同様に報酬になるとのこと。HTMLをコピーしてブログに貼る生成されているHTMLタグをコピーして、それをブログやウェブサイトに貼れば終了だ。CSSカスタマイズ使い方が自体は直感的に扱えるので難しくはないが、最も厄介なのがCSSのカスタマイズだ。生成されたHTMLを貼ってもアプリーチのようにボーダーは表示されないし、特にはてなブログの場合は盛大にデザインが崩れる。これをカスタマイズするにはCSSを書かなくてはならないが、CSSが分からない人に取ってはかなり障壁になるだろう。そんなわけで俺が2パターンのコピペですぐに使えるデザインパターンを用意したので参考にして欲しい。はてなブログだとなぜ崩れるのかはてなブログの「はてな記法」で書いていて、HTMLタグをそのまま挿入すると勝手に「brタグ」(=改行)が仕込まれてしまって、デザインがおかしくなってしまう。そのため次に紹介するCSSではアプリーチ内のbrタグのみ無効にしている。ベーシックパターンボーダーや軽いシャドーで枠を作って、アプリ名を強調、その他の属性を控えめに表示。全体的に余白も大きめにとっているので、ほとんどのブログで違和感なく表示できるように調整した。0.8;}ブラックスタイル黒い。そんな中二病精神をくすぐるデザインになっている。0.8;}サンプルはこちら実際にブラウザでどんな感じになっているか確かめたい人のためにサンプルを用意している。アプリーチデザインのサンプルまとめ以上がアプリーチの使い方およびCSSカスタマイズのサンプルだ。デフォルトだと味気ないし、はてなでは崩れてしまうので、カスタマイズしたものを使ってもらえればありがたい。こんなスタイルのものがほしいという場合はコメントでリクエストしてもらって、暇だったら使ってみようかと思うので、要望があればコメント欄までどうぞ。アプリーチのカスタマイズデザインを探していたところ、ゴトーさんが作成されたものが1番気に入ったので使わせていただきました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト錦織がATPツアーファイナルで決勝トーナメント進出するためには?チリッチやその先のジョコビッチとの戦績を紹介UFC史上最高のスター、コナー・マクレガーとは何者なのか。メイウェザー戦の噂や二階級制覇に至るプロセスを紹介。RECOMMENDこちらの記事も人気です。ブログ2017.1.112月のPV報告と2016年の振り返り。3ヶ月目で47万PV突破。ブログ投稿を完璧にSEO対策するための...SEO2016.11.27新規ドメインのSEO対策について。はてなブログを独自ドメインにしてから1...CSS2016.11.29コピペで簡単、はてなブログにSNSフォローボタンを実装するカスタマイズSEO2016.12.111月のPV・運営報告。ブログ開始2ヶ月目で月間11万PV突破しました。Huntからゴトーのブログに変更しました著者プロフィールゴトースポーツと英語とプログラミングが三度の飯より好きなブロガーです。高校時代に陸上で全国入賞を果たし、スポーツ推薦で大学に進学。海外でのトレーニング経験から、海外志向が強くなり英語学習にハマりました。25才の時に目標だったTOEIC満点を達成しています。最近の投稿ブロックチェーンやAIの過大評価が凄まじく、信用できない理由とは?イメージだけが先行したバズワードに。VPSって何?という人に日本一分かりやすく解説。レンタルサーバー、クラウドとの違いも紹介。人生の一発逆転を狙うなら、英語を必ず勉強すべきシンプルな理由【海外で働くエンジニアが語る】プログラミング初心者が最初に覚えるべき言語は?海外で働く現役エンジニアが解説。日本人は英語が苦手なのか?ドラゴン桜の英語学習法では上達しない理由を解説。