読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

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

Web制作 CSS
スポンサーリンク

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

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

f:id:ftmaccho:20160503145013p:plain

アプリーチ

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

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

実装図

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

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

f:id:ftmaccho:20160503145008p:plain

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

Pinterest(ピンタレスト)
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>

これでバランスも良い感じになります。

まとめ

イメージとしては、前回書いた「カエレバ・ヨメレバ」と統一感が出るようにしました。

www.yukihy.com

合わせて設定していただくと、綺麗に見れるんじゃないかと思います。不具合・質問・改善などありましたらお問い合わせからお願いします。

www.yukihy.com