アプリーチでデザインが崩れるときの対処法|新コードとカスタマイズ方法

アプリーチ

アプリーチの表示が崩れて困っている方へ。

アプリーチとは、ままはっくを運営しているブロガーさんが開発・提供しているアプリを紹介するブログパーツです。ブロガーなら誰もがお世話になっています。

無料でカスタマイズCSSを公開している人も多く、その使い勝手の良さは秀逸です。

ただ私も初めて導入したとき、デザインが崩れるという問題が起こったので、その対処法をご紹介します。

当記事では、アプリーチの表示がうまくいかないときの解決方法をお話しします。どうぞご覧ください。

アプリーチの使い方

アプリーチの使い方はシンプルで分かりやすいです。

STEP.1
アプリ名を入力
検索ボックスに検索ワード(アプリ名)を入力
iphoneとAndroid両方で目的のアプリが表示されるようにする。上手く目的のアプリが表示されないときは、「複数検索」をクリック
STEP.2
出力イメージを決める
アイコン・アプリ名など自分好みのものを選ぶ 
STEP.3
コードを貼り付け
表示されたコードを自分のブログに貼り付ける

アフィリエイトを導入する方法

アプリのアフィリエイトをアプリーチに導入する方法です。

STEP.1
広告コードをゲット
ASPでアプリの広告コード(URL)を入手する。テキストコードの「http://”~”」の部分。
ASPによって、iphoneとAndroidでコードが共通だったり、別だったりする
STEP.2
アプリ名をに入力
アプリーチでブログパーツを作る
STEP.3
出力イメージを決める
アイコン・アプリ名など自分好みのものを選ぶ
STEP.4
広告コードを入力
「iphoneリンク」「Androidリンク」の欄に、広告コード(URL)をコピペする
STEP.5
コードを貼り付ける
表示されたコードに入力したURLが自動で挿入される。コードを自分のブログに貼り付ける

新コードと旧コードの違い

アプリーチには、新コードと旧コードの2つのコードがあります。

新コード

アプリーチのブロブパーツをHTMLとCSSの2つで表示させています。カスタマイズしたい人は、新コードを使いましょう。

旧コード

アプリーチのブログパーツをHTMLだけで表示させています。そのため、新コードよりコードが長いです。


デフォルトのデザインで構わない(カスタマイズしない)という人は、旧コードを利用しましょう。表示されたコードを、自分のブログの表示したいところに貼り付けるだけで利用できます。

新コードの使い方

アプリーチのデザインをカスタマイズしたい・HTMLコードをスッキリ表示させたい人は新コードを使いましょう。

  1. コードの上に表示されている「こちらのCSS」をクリックすると、別ウィンドウでCSSコードが表示される
  2. CSSコードを自分のブログのスタイルシートにコピペする

あとは新コードを自分のブログの表示させたいところに貼り付けるだけです。

アプリーチのデザインが崩れるときの対処法

デザインが崩れるのは、新コードを利用したときだと思われます。

原因

  • CSSコードをスタイルシートにコピペしていない
  • CSSコードをコピペしたけど反映されていない

対処法1

CSSコードがちゃんとコピペされているか確認しましょう。保存(更新)をクリックし忘れると、反映されません。

対処法2

確かにコピペできているのに反映されていない場合。WordPressを使っている人は、コピペする場所を間違っている可能性があります。

「外観」→「カスタマイズ」→「追加CSS]

「追加CSS」にコピペして、「公開」をクリックしてください。

カスタマイズ方法

カスタマイズするには新コードを使います。

アプリーチ方式で公開しているCSSコードをいじって、自分好みにカスタマイズすることができます。

無料でカスタマイズコードを公開している人もいるので、そちらから拝借してコピペするだけでも素敵なカスタマイズが完成します。


以上、「アプリーチでデザインが崩れるときの新コードとカスタマイズ方法」でした。

参考記事も合わせてご覧ください。