【7月2日18時まで】エックスサーバー新規お申込みでドメイン無料キャンペーン実施中!

コピペでOK!アプリ紹介ツール【アプリーチ】の使い方と表示が崩れる時の対処法

便利ツール
スポンサーリンク

ブログでiphone、Androidのアプリの紹介をしたい時のお役立ちツール「アプリーチ」の使い方を紹介します。

 

アプリーチを使えば下記のようなiphone、Androidのアプリのリンクを簡単に作成できるので、記事でアプリを紹介したい時はぜひ利用してみましょう。

 

もちろん無料、面倒な登録作業もありません。

 

↓こんな感じのアプリ紹介リンクがコピペで作成できます↓

Chatwork

Chatwork

Chatwork Co.,Ltd.無料posted withアプリーチ

 

使用されているワードプレスのテーマ(テンプレート)によってはアプリーチの表示が崩れることもあります。その際の対処法についても合わせて説明しますね。

簡単!アプリーチの使い方

アプリーチのサイトにアクセス

 

②記事で紹介したいアプリ名を入れて「検索」をクリックします。

 

③ここでは試しに「Chatwork」のアプリを検索してみました。

 

④表示したい情報を選択します。(こだわりがなければここはいじらなくても大丈夫。私はいつもそのままです)

 

⑤表示されたコードをコピーしてワードプレスのテキストモードに貼れば完成。

、、、、なのですが!

ワードプレスのテンプレートによっては表示が崩れてしまうケースもあります。表示崩れを防ぐために「新コード」を利用できるようCSSを追加する作業の説明を以下にお伝えしますね。

 

なつこ
なつこ

※このブログのテーマは「Cocoon」なのですが、旧コードを使ったら表示が崩れたのよ、、、

アプリーチの新コード使用のためCSSを追加する方法

①上記の画像の「こちらのCSS」をクリックして以下の画面を表示させます。「コピーする」をクリックしてCSSをコピーしてください。

 

②ワードプレスの左側のメニューから「外観」から「カスタマイズ」

 

「追加CSS」をクリックします。

 

④さきほどアプリーチでコピーしたCSSを張り付けて「公開」をクリック

 

なつこ
なつこ

ここまでできたら「新コード」をワードプレスの投稿画面に貼ってみましょう

アプリーチのコードをワードプレスに貼ります

さるお
さるお

アプリーチのコードをワードプレスに貼る方法はすごく簡単だけど念のために説明してくよ。

 

①コードをコピーします。「コピーする」をクリックすると自動でコピーされます。

 

 

②ワードプレスの投稿画面で「テキスト」(赤い四角で囲ったところ)に切り替え、張り付ければOKです。

 

なつこ
なつこ

CSSを追加して新コードを使ったのにビジュアルモードに戻してみると「表示が崩れてるー!」ってなっちゃう方は、このまま読み進めてね。

アプリーチの表示が崩れてしまう時に確認すべきこと

アプリーチのコードを投稿画面のテキストモードに貼って、ビジュアルに戻して確認してみると、下記の画像のように表示が崩れてしまうことがあります。

 

なつこ
なつこ

表示が崩れてしまった時の対処法をお伝えするよ

 

対処法①プレビューで確認

プレビューボタンをクリックして実際の画面を表示させてみましょう。

 

すると、プレビュー画面ではきちんと表示されている、ってことが大半です。

 

なつこ
なつこ

投稿画面で表示が崩れていてもプレビュー画面できちんと表示されてればOK!(※この記事でも同様の現象が起きました)

 

※投稿画面での表示の崩れを修正する場合は、ワードプレスにインストールしているテーマのCSSをいじる必要があります。私はCSSはよくわからないので何をどうすればいいのかさっぱり、、、

(それでもブログで稼ぐことは可能ってことです)

 

②新コードを使う

上記でもお伝えしましたが、アプリーチには「旧コード」と「新コード」があります。旧コードを使って表示が崩れる場合は、ちょっと面倒ですがCSSを追加して新コードを使ってみてください。

 

③CSSやコードのコピー&ペーストをもう一回試す

必要なコードをちゃんとコピペできてるかもう一回確認しながら作業してみてください。1文字でも漏れがあると表示は崩れます。