ブログでのiPhone、Androidアプリの綺麗な紹介バナー作成方法

2018年8月12日

iPhone、Androidアプリの綺麗な紹介バナーを作るには？
いちいちCSSを編集する必要ある？
こんな疑問に答えていきます。

本記事の内容

アプリの紹介って、綺麗にバナーが貼ってあった方がわかりやすいですよね。

しかしApple公式のバナーは、使いづらいんですよね。
Apple公式のiPhoneアプリのアフィリエイトは終了するようですが、まだURLを編集する需要はありますよね。

今回は、綺麗にブログにアプリのバナーを貼る方法を紹介していきます。

アプリーチを使う

アプリーチというサービスを使うのが手軽そうです。

まず、こちらのサイトで、アプリのバナーを作成し、コードをコピペします。

新バージョンと旧バージョンがあります。

新バージョンは自分のブログにCSSを書き加える必要があります。
（デザインの定義をスタイルシシートのファイルの中に、このアプリーチ専用の、線幅や色などの命令を書いてあげる作業）

こんな感じ

Luminous Calculator - 11 Colors and Button Sounds

無料

簡単にうまくいきました。

きれいですね。

自由に編集して良いとのことなので、ツールの文字部分は灰色にさせてもらいました。

しかし、僕の１つのサイトではうまくいきましたが、もう１つでは何度やっても上手くいきません。

同じ条件なのに原因不明です。
強いて言えば、サーバーが違うことくらい…

仕方ないので旧バージョンを使いました。
旧バージョンに枠を追加したかったので、こちらのサイト様を参考にさせていただきました。

外枠を表示させるには生成されたコードの先頭に<fieldset>、末尾に</fieldset>（すべて半角）を追加します。
http://wp-lecture.com/pc/tool/387/より引用

これで完成。

Apple公式のリンクメーカーですが、横幅を自由に作成できないのが致命的です。
デザインもなんか古い…

最後に、コードをいちいち自分でID入れて、改変するのもめんどいです。

これはプラグインを使う方法です。
正サイトが重くなるのを防ぐためにプラグインは極力使わないようにしたので、やめました。

というわけで今回は以上です。

CSS編集は慣れると抵抗ありますが、アプリーチを使うのは時短でおすすめです。
ただし、ブログテーマをアップデートした時に、CSSが消えた場合、CSSを再度入れ直すのを忘れないようにしたいです。