スマホアプリの紹介ツール「アプリーチ」の使い方とCSSの設定・カスタマイズ方法

ブログノウハウ

このブログでは、ときどきスマホアプリの紹介をすることがあります。

その際「アプリーチ」というツールを使っているので、今回はアプリーチの使い方やCSS(デザイン)のカスタマイズ方法について解説します。

アプリーチを使えばこんな風に↓

RoomClip 部屋のインテリア・家具・DIYの写真を共有

RoomClip 部屋のインテリア・家具・DIYの写真を共有
開発元:Tunnel Inc.
無料
posted withアプリーチ

ブログでスマホアプリを紹介するとき、

  • Android用
  • iPhone用

両方のアプリを一度に表示できるうえに見た目を整えることができます。

ブログでスマホアプリを紹介している方は参考にしてください。

アプリーチの使い方と注意点

まずはアプリーチにアクセスします。

使い方は簡単で、紹介したいアプリ名を検索するだけです。

f:id:matomepro:20180326170617j:plain

別々のアプリが表示される場合

ごくたまに、AndroidとiPhoneで別々のアプリが表示される場合がありますが、その場合は「複数検索」で検索してください。

f:id:matomepro:20180326172124j:plain

複数検索をすると候補がいくつか出てきますので、目的のアプリをクリックして左右で同じアプリになるようにします。

f:id:matomepro:20180326172137j:plain

下の方にスクロールすると出力イメージが表示されるので、タイトルや表示画像、価格表示などを調整しましょう。

f:id:matomepro:20180326172245j:plain

画面をさらに下までスクロールすれば、ブログに記載するためのコードがコピーできます。

f:id:matomepro:20180326172539j:plain

ブログの記事編集画面をHTMLモードにして、該当する箇所に貼り付ければ完了です。

f:id:matomepro:20180326172841j:plain

アプリーチのCSSカスタマイズと注意点

アプリーチはそのままでも十分使えますが、

「もっと見た目をカッコよくしたい」

「背景の色を変えて目立たせたい」

という場合は、CSSをカスタマイズします。

CSSのカスタマイズは使っているブログサービスのCSS編集画面を開き、以下のコードを書き加えるだけです。

/* アプリーチ */
#appreach-box {
max-width: 500px;
border: 1px solid #ddd;
background: #fff;
padding: 4px 6px;
border-radius: 4px;
line-height: 1.4;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06);
}

#appreach-box br {
display: none;
}

#appreach-image {
margin-right: 15px !important;
margin-bottom: 0 !important;
}

#appreach-appname {
color: #3a3a3a;
font-size: 1.35em;
font-weight: bold;
}

#appreach-developer, #appreach-price, .appreach-powered {
color: #888;
font-size: 11px !important;
}

#appreach-box .appreach-links {
margin-top: 10px;
}

#appreach-itunes-link {
margin-right: 10px;
}

#appreach-box .appreach-links img:hover {
opacity: 0.8;
}

はてなブログの場合だとブログの管理画面から「デザイン」⇒「カスタマイズ」⇒「デザインCSS」と進み、

f:id:matomepro:20180319215247j:plain

f:id:matomepro:20180326175038j:plain

「デザインCSS」にHTMLコードをコピペで貼り付けて保存すればOKです。

文字の大きさや背景の色を変えたい場合は、font-size や color の数値を色々いじってみてください。

ブログサービスによって反映されないこともある

このブログは【はてなブログ】で運営しているのですが、ワードプレスなど他のブログサービスを使う場合はCSSの設定方法が異なる場合があるようです。

さきほどのHTMLコードをCSSに貼り付けてもデザインが反映されない場合は、検索エンジンで

「アプリーチ ワードプレス CSS」

「アプリーチ はてなブログ CSS」

などのキーワードで検索し、自分のブログにも適合するCSSコードを探してみてください。

旧コードでブログに投稿する

CSSには問題が無くても、各記事に使うHTMLコードに問題がある場合もあります。

アプリーチは「新コード」と「旧コード」があるのですが、新コードでダメだった場合は旧コードでも試してみてください。

f:id:matomepro:20180326180322j:plain

ちなみに僕のブログは新コードではデザインがうまく反映されなかった ので、旧コードを使っています。

まとめ

ということで、スマホアプリを紹介するときに便利なツール「アプリーチ」の使い方とCSSカスタマイズ方法でした。

細かい部分ですが、見た目が変わるだけでブログ全体の印象が変わることもあります。

ブログをやっている方は色々アレンジしてみてください。

コメント

  1. matomepro より:

    >>まる (id:money_game)さん
    お役に立てて良かったです。
    あと、ご指摘ありがとうございます。
    さっそくアプローチ⇒アプリーチに直しておきました。

タイトルとURLをコピーしました