AppPartsで両ストアの紹介パーツを作る

App StoreとGoogle Playの両方を載せるには、検索結果で各ストアから1件ずつ選び、「両ストアで作る」を押します。作成後はデザインを選び、HTMLをコピーしてブログへ貼り付けられます。

アプリ名で検索し、両ストアから選ぶ

最初の1件を選んだ段階では、まだ作成を確定しません。片方だけでよい場合は「App Storeだけで作る」または「Google Playだけで作る」へ進めます。

選び直すには「選択を外す」、作成後に候補へ戻るには「検索結果から選び直す」を使います。名前や開発元の違いを知らせる確認文が出た場合は、意図した組み合わせか確かめてください。

「アプリ情報・ペアを編集」の「名前・アイコン・開発元の採用元」で、App Storeの情報、Google Playの情報、現在の編集内容から選べます。切り替わるのは名前・アイコン・開発元で、補足文と各ストアのリンクは保持されます。

名前や開発元を直したい場合は、同じ欄で編集してください。アイコンのURLや紹介文は「アイコン・補足文を編集」から入力できます。

「デザイン」では、選んだアプリを使った6種類の見本を比べられます。使いたいデザインを選び、必要に応じて色や表示項目を調整します。

「リンク設定」の「ストアボタンの表示状況」も確認してください。「表示OFF」になっている場合は、「App Storeボタンを表示」または「Google Playボタンを表示」で戻せます。

「ライブプレビュー」で「記事の中」を選ぶと、サンプル文章の間に紹介パーツを表示できます。「本文幅（px）」は320〜1200pxの範囲で指定し、ブログの本文に近い幅で確認してください。

背景は白・アイボリー・薄いグレーから選べます。サンプル文章と背景は出力コードに入りません。パーツだけを確認するときは「パーツだけ」に戻し、「PC」「スマホ」を切り替えます。

「すぐコピー」はHTMLとCSSを一緒にコピーします。「コード生成」からコピーする場合は「そのまま貼れる HTML ＋ CSS」を選び、「HTMLコードをコピー」を押してください。

コピーしたコードは、ブログのHTMLを入力できる欄へ貼り付けます。WordPressでは「カスタムHTML」ブロックを使います。

CSSを別に管理する場合は「HTML / CSS分離」を選び、HTMLとCSSをそれぞれコピーしてください。画面の案内どおり、HTMLは「カスタムHTML」へ、CSSはテーマの「追加CSS」へ貼り付けます。

自動コピーができなかった場合は、表示されたコードを選択してコピーできます。名前やURLの修正を求めるメッセージがある場合は、該当箇所を直してからコピーしてください。

ブログ側のプレビューでも、紹介パーツの見え方を確認してください。AppPartsのプレビューとブログでは、本文幅やテーマのCSSが異なります。

片方だけ取得できた場合は、そのストアだけで作成してから、「アプリ情報・ペアを編集」の「App Store URL」または「Google Play URL」に不足する公式URLを追加できます。

検索結果を取得できない場合は、検索欄の近くにある「URLを手入力して作成」を使います。アプリ名、各ストアの公式URL、必要な開発元やアイコンのURLを入力して作成してください。「Google Playを手入力」からも編集を始められます。

URLを追加したら、「ストアボタンの表示状況」とプレビューを確認します。表示したいボタンがOFFなら、該当ストアの表示ボタンを押してください。

編集画面に反映したアプリ情報・リンク・デザインは、使っているブラウザーに自動保存されます。次に画面を開いたとき、「編集途中の下書きがあります」から「編集を再開」を選べます。下書きは1件で、新しく作成すると置き換わります。

検索中の候補選択や、入力しただけでまだ適用していないカスタムリンクは下書きに含まれません。保存できない旨の案内が表示された場合は、その画面でコードをコピーしてください。

色や表示設定を次のアプリでも使うには、「マイデザイン」で名前を付けて「新規保存」します。再利用するときは「保存したデザイン」から選び、「適用」を押します。

コピー済みのパーツを直すには「既存コードを取り込む」に1パーツ分のHTMLを貼り、「取り込み内容を確認」から「取り込んで編集」へ進みます。AppPartsやアプリーチのコードから読み取った内容を確認し、欠けている公式URLなどを補ってください。