「アプリーチ」をCSSでカスタマイズ iPhoneアプリとAndroidアプリを同時に紹介できるブログパーツ

アプリを紹介するサービス「アプリーチ」

ブロガーであるまなしばさんのご主人が作成したアプリを紹介するサービス「アプリーチ」。

f:id:ftmaccho:20160503145013p:plain

アプリーチ | iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。

上の方の検索窓にアプリの名前を入れることで、綺麗なリンクを、しかもiPhoneとアンドロイド両方つくることができます。とっても便利なので僕も使わせていただいています。ありあとうございます！

アプリーチをCSSでデザインを変更！

実装図

そんなアプリーチを、ほんの若干ですがCSSを書いて若干デザインを変更してみました。

イメージとしてはこんな感じです。

f:id:ftmaccho:20160503145008p:plain

ほんの若干ですが統一感を出せるようにしました。今後変わるかもしれませんが実際にはこんな感じ。

Pinterest（ピンタレスト）

開発元:Pinterest, Inc.

無料

posted with アプリーチ

はてなブログ以外でも使えます。

コード

コードはこんな感じです。

PC

以下のものを「デザインCSS」に。

/*アプリーチカスタム*/
#appreach-box {
    border-radius: 5px;
    border: double 3px #ececec;
    margin-bottom: 10px;
}
.appreach-links{
    margin-bottom: 10px;
}
.appreach-footer{
    margin-bottom: 0;
    line-height: 0;
}

スマホ

以下のものを「記事上」に貼り付けてください。（トップページなど記事部分以外にも設置する方は「ヘッダー」に貼り付けてください）

<style>
/*アプリーチカスタム*/
#appreach-box {
    border-radius: 5px;
    border: double 3px #ececec;
    margin-bottom: 10px;
}
.appreach-links{
    margin-bottom: 10px;
}
.appreach-footer{
    margin-bottom: 0;
    line-height: 0;
}
</style>