【WordPress】アプリを紹介するならアプリーチ

こんにちは、のっくん(@yamagablog)です。

ブログでアプリを紹介するのに使えるブログパーツを紹介したいと思います。

「アプリを紹介したいけど何か良いブログパーツない?」

と思っている方にオススメの記事です。

アプリを紹介する時にURLを貼っても良いのですが、それだと画像が含まれていませんし

記事を読んだ人はクリックするかも分かりません。

せっかくならアプリのアイコンやアプリ名を紹介したいですよね。

アプリーチを使うと以下のようなブログパーツを作成することができます。

写真なのでクリックはできませんが、実際にはAppStoreやGooglePlayへジャンプすることができます。

iPhoneやAndroidを使っているユーザ両方に紹介できるのも大きなメリットです。

さて、このブログパーツですが、WordPressで使用する場合には、CSSの設定が必要です。

(私はこの設定方法が分からず、最初は諦めました。)

CSSをきちんと設定できていないと、記事にブログパーツを掲載した時に、スタイルが崩れます。

スタイルが崩れると、アイコンが大きすぎたり、各パーツの幅が崩れたりします。

順番にCSSの設定方法を解説していきます。

コードをコピーする

まずはアプリーチのサイトに行ってコードをコピーしましょう。

 

コピーするコードは「こちらのCSS」と記載されているものです。

貼り付け先

WordPressにログイン後、

外観➡︎テーマ➡︎カスタマイズ➡︎追加CSS

で、先ほどコピーしたコードを貼り付けます。

これで準備完了です。

ブログパーツ作成

あとはアプリーチのサイトに記載の通りに、

  1. 紹介したいアプリ名を検索
  2. コードを生成してコピペ
  3. コピペしたコードをワードプレスの記事にテキストモードで貼り付ける

で完了です。

終わりに

最初「style.css」を直接編集してしまいました。

その結果、スタイルシートは反映されずプロポーションが崩れたまま。

ちゃんとテーマを選んでカスタマイズしないと駄目ってことに気づきました。

多分他のブログパーツでも同じだと思うので、CSSを追加する場合には気をつけましょう。