えんやこらブログ

☆目標【まずは月1万円】自分の理想のブログを作って生活できるようになるのだ☆

ブログでアプリを綺麗に表示する方法【アプリーチ】が簡単でした。

f:id:chiyohapi:20201004135017j:image

こんにちは。はぴです。

 

 

『ブログでアプリを紹介したい』

『「AppleStore」と「GooglePlay」の両方のリンクを同時に貼りたいんだけど』

『簡単で、しかも綺麗に表示できる方法ないかなぁ』

 

っていう人この指とまれ~!

はい! 1週間前の私ですよ!

 

調べてみると、下のようなリンクを、とっても簡単に、無料で作れる【アプリーチ】というツールを提供してくれている方がおりました。

本当にありがとうございます!

 

アイビスペイントX

アイビスペイントX

ibis inc.無料posted withアプリーチ

 

まぁ~きれい。(*´ω`)

 

では早速「アプリーチ」の使い方を、初心者なりにご説明いたしますよ!

(この記事は、はてなブログを使って書いています)

 

 

 

アプリーチの使い方

参考にさせていただきました。ありがとうございます!

agousa.com

 

ブログパーツを作成する 

まず、アプリーチの公式サイトへ行きます。

下の方に少しスクロールすると、下のようなブログパーツ作成画面になりますので、

 

f:id:chiyohapi:20200930055624p:plain

 

①検索窓で目的のアプリ名を入力

②〔検索〕をクリック

③目的のアプリか確認

 

と進んでいきます。

 

表示されたアプリが目的のものでなかった場合は、

 

f:id:chiyohapi:20201001043829p:plain

 

②の〔検索〕を〔複数検索〕に切り変えて、③に出てきたアプリの中から目的のものを選んでください。

 

 

選択したら、下にスクロールします。

f:id:chiyohapi:20201001044537p:plain

オレンジの枠線で囲ったところが選択できる 項目です。

 

他の方の記事を読むと、ほとんどそのままでOKみたいなんですが、

「開発元」は「非表示」にしている方が多いみたいです。

 

「target="_blank"の付与」では、クリックしたら別のタブで開くかどうかを選択できます。

 

私は、とりあえず今は全てそのまんまで作成しました。

(・∀・)そのうち、こうした方が良いとか分かってくるかな。

 

その下にいくと、アフィリエイトするときに使用する画面が出てきます。

 

f:id:chiyohapi:20201001050211p:plain

今回私はアフィリエイトしないのでスルーしました。

コードをコピーしてブログに貼り付ける

さらに下の方へスクロールすると、コードが出てきます。

 

f:id:chiyohapi:20201001050422p:plain

ここでは、「新コード」と「旧コード」が選択できます。

 

 旧コードの貼り付け方

「旧コード」を選択した場合、コードをコピーしたら、そのままHTML編集画面に貼り付けるだけでリンクが作成されます。

f:id:chiyohapi:20201001051549p:plain

簡単なのですが、枠はありません。

 

新コードの貼り付け方

枠を付けるには「新コード」を選択します。

 

①〔こちらのCSS〕をクリックして、サンプルのCSSをGETします。

 

f:id:chiyohapi:20201001053755p:plain

 

 ②〔コピーする〕をクリック

f:id:chiyohapi:20201001054356p:plain

 

③はてなブログを使用している方は、はてなブログの管理画面で、

〔 デザイン〕→〔カスタマイズ〕→〔{}デザインCSS 〕をクリック。

 

WordPressの場合は、

〔外観〕→〔カスタマイズ〕→〔追加CSS〕をクリックするとのことです。

 

④既に書かれてあるCSSの一番後ろの方に、コピーしたCSSを貼り付けると、枠がつきます。

f:id:chiyohapi:20201004050910p:plain

「枠」のカスタマイズ

このままでもシンプルで良いのですが、CSSを変えると、枠のデザインが変えられるとのこと。

おお~(・∀・)☆

しかし、CSSをいじるのは私にはハードルが高いので、すでにカスタマイズ完了コピペOKの記事から頂きました。ありがとうございます!

hituji-affiliate.com

 

私は、こちらの記事で1番目に紹介されているものをコピペさせてもらいました。

f:id:chiyohapi:20201004052827p:plain

少し影が入るデザインです。

コピペだけでアプリの紹介リンクがカッコ良いものに。。ありがたや。

(*‘ω‘ *)

「自分でもCSS触れるよ」って方は自分好みにカスタマイズできるそうなしてみて下さい☆

 

終わりに

HTMLやCSSのことをほとんど知らない私でも、すごく簡単に見栄えよくアプリを貼り付けることが出来ました☆

 

しかもリンクは、アフィリエイトリンクに差し替えることも出来るみたいです。

そのうち挑戦してみたいなぁ。

 

ということで、ほぼ、先人の方々の恩恵にあずかって書いた記事ではありましたが、

「ブログで見栄えよくアプリを紹介したいな」という方の参考になればこれ幸い☆

(/・ω・)/

 

それではまた、お時間のあるときに~!