せいかつ ブログ

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

この記事は約8分で読めます。

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

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

「アプリ―チ」の基本的な使い方については、【ブログ初心者】「アプリ―チ」でスマホアプリを紹介!作成手順と使い方を丁寧に解説にまとめています。ご参考にしてください。

 

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

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

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

vimosoft無料posted withアプリーチ

 

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

「新コード」を使うための5つの手順
  • STEP1
    CSSコードをコピー
  • STEP2
    CSSコードを貼り付ける
  • STEP3
    アプリを検索
  • STEP4
    コードを取得、コピー
  • STEP5
    ブログ記事に貼り付ける

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

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

まちゃりさ
まちゃりさ

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

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

 

CSSコードをコピー

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

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

 

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

こちらの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]と進みます。

[外観]→[カスタマイズ]
[追加CSS]をクリック

 

①下の枠の中に、 コピーしたコードを貼り付けます。

②貼り付け後、右上の「公開」をクリックします。

コピーしたコードを貼り付け、「公開」をクリック

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

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

コメントを上部に記載しておくと便利です

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

アプリを検索

アプリ―チを開きます。

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

アプリ名を入力し、検索

検索したいアプリと違うアプリが表示された場合は・・

  1. さらに、検索キーワードを絞る
  2. 「複数検索」をクリックする

上記どちらかを試してみてください。

「2.複数検索」では、検索候補が複数表示されるので、リンクに使用したいアプリをそれぞれ選択します。

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

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

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

特に設定しておくとよい22箇所

 

①「表示リンク」

iPhone、Androidいずれかのみのアプリである場合、表示したい方を設定できます。

①「表示リンク」の設定

②「target=”_blank”の付与」

  • 「なし」を選択:同じウィンドウ
  • 「あり」を選択:別のウィンドウ(新規タブ)
②「target=”_blank”の付与」の設定

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

まちゃりさ
まちゃりさ

あと少しですよ~

 

コードを取得、コピー

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

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

「新コード」にタブをあわせ、「コピーする」

ブログ記事に貼り付ける

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

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

「ブロックの追加」>「カスタムHTML」をクリック

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

コピーしたコードを貼り付け

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

アプリ紹介ブロックが表示される

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

実際のプレビュー表示では
レイアウト崩れていないはず

 

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

「HTML挿入」ボタン>コピーしたコードを貼り付け
まちゃりさ
まちゃりさ

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

 

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

いかがでしたか?

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

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

 

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

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

 

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

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

おわり。

コメント

タイトルとURLをコピーしました