記事内でアプリを紹介する「アプリーチ」の「新コード」の使い方

こんにちは、まちゃりさです。

今回は、「アプリ―チ」で「新コード」を使用して、ブロックに枠をつける手順をご紹介します。

「新コード」を使用すると、ブロックにこのような枠をつけることができます。↓

VLLO ブロ – 簡単に動画編集できるVLOGアプリ

vimosoft無料posted withアプリーチ

アプリ―チの「新コード」を使うための手順は、下記の5ステップです。

STEP1,2は新コードを使うための事前準備になります。（旧コードを使用する際は1,2は不要です）

順番に解説していきます。

まちゃりさ

手順自体は、そこまで複雑ではないです。

最後まで頑張りましょう♪

CSSコードをコピー

まずは、アプリ―チを開きます。

アプリーチ

iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。

mama-hack.com

ページの真ん中にある、新コードを利用する方は「こちらのCSS」をご自身のブログに追加が必要です。までいきます。

「こちらのCSS」のリンクをクリックします。

新コード用のCSSが表示されます。

「コピーする」ボタンをクリックし、コピーします。

以下に同じコードを貼り付けているので、こちらをコピーしてもOKです。↓（クリックすると表示される右上のボタンをクリックするとコピーできます。）

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

CSSコードを貼り付ける

続いて、コピーしたコードを所定の場所に貼り付けます。

ワードプレス管理画面から[外観]→[カスタマイズ]→[追加CSS]と進みます。

これで記事のアプリーチで作ったパーツのデザインに反映されます。

✓コメント（日付と「アプリ―チ」のコードである旨）を上部に記載しておくと何のコードか後から見返してわかるので、おすすめです。

次からは、アプリ―チを使ってブログパーツを作成する手順です。

アプリを検索

アプリ―チを開きます。

①アプリ紹介パーツを作成したいアプリ名を入力し、②検索します。

アプリを選んだら、画面の下の方で「出力イメージを確認しましょう」まで進みます。

ここで、表示設定を行います。プレビューを確認しつつ、設定してみてください。

特に設定しておくとよい箇所は、次の2箇所です。

プレビューを確認し、問題なければ、さらに下にスクロールします。

まちゃりさ

あと少しですよ～

コードを取得、コピー

「コードをコピーしてブログに掲載しましょう」にコードが表示されています。

①「新コード」にタブをあわせ、②「コピーする」をクリックします。

ブログ記事に貼り付ける

そのまま、ブログ編集画面にいき、コードを貼り付けます。

ワードプレスの新エディタ（Gutenberg（グーテンベルク））を使用している場合は、「ブロックの追加」＞「カスタムHTML」をクリックします。

「HTML」を選択した状態で、コピーしたコードを貼り付けます。

貼り付け後、「プレビュー」をクリックすると、アプリ紹介ブロックが表示されます。

レイアウトが崩れたように見えるかもしれませんが、実際のプレビュー表示では崩れていないはず。

旧エディタを使用している場合は、記事投稿画面で右上の「HTML挿入」ボタンをクリックして、コピーしたコードを貼り付けます。

まちゃりさ

手順は以上です！お疲れ様でした！

まとめ：「アプリ―チ」新コードを使うと、枠が表示される！

いかがでしたか？

今回は、アプリ―チの「新コード」を使って、アプリ紹介パーツ枠を表示させる手順をご紹介しました。

「旧コード」より見栄えがよくなるので、私はこちらを使っています。

ただし、「旧コード」は準備不要ですぐに作成できます。

お急ぎの場合は「旧コード」を使用する手順で作成してみてください。（アフィリエイトリンクを作成するやり方もあわせて記載しています。）

【ブログ初心者】「アプリ―チ」でスマホアプリを紹介！作成手順と使い方を丁寧に解説

こんにちは、まちゃりさです。　ブログ記事の中で、iPhoneやAndroidなどの「スマホアプリ」を紹介したいという場面、ありませんか？今は、pcよりスマホが主。今後も、ブログ記事で、アプリを紹介する場面はさらに増えてくるのではと思っていま...

macharisa.com

それでは、今回は以上です。

最後までお読みいただき、ありがとうございました。

おわり。