NFTを始めるなら日本円で始められるHEXA

【SANGO】アプリーチのデザインが崩れる時にするべきこと(実体験を元に解説)

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

ブログでアプリを紹介したいけどデザインが崩れる…なんとかしたい!

SANGOのテーマを使っていてデザインが崩れてしまう人は是非見てください。

出典:アプリーチ
この記事でわかること
  • Sangoを使っている人がアプリーチを使える
  • 画像が崩れた場合の対処法がわかる
  • ブログでアプリがキレイに表示できる

結論を先に言うと、僕の場合は

必要なCSSを入れていなかった

・HTMLで入力していなかった

編集画面で見ていた

この3つが原因で正しく表示していませんでした。基本的な問題ばかりなのでこれが原因だった方はすぐに解決できます!画像を使って紹介していきますね。

誰でも簡単にアプリの紹介ができる「アプリーチ」

ブログをしていてアプリの紹介をしたい人にとっては必須のツールなのが「アプリーチ」です。

これは【Apple ・Android】の両方のアプリをキレイに表示させるとても沢山の人に愛されているツールとなります。

Baby panda
Baby panda

アプリ紹介のアフィリエイト【Smart-C】をしている方にとっても必須のツールとなっています

使い方は超簡単!アプリ選択してコードを貼り付けるだけ

アプリーチは紹介したいアプリの名前を入力して選びます。そうすると「コード」がでてきますのでそれをコピーして貼り付けると完了です。検索画面は下の画像

出典:アプリーチ

サイトのデザインもとてもシンプルで誰もが迷わずに使用できますよ。

アプリーチをおすすめしたい理由

アプリーチの良い所は、

誰が見ても不快を感じないスタイルで思わずクリックしたくなる

ということです。ブログ初心者でもこれを使うだけで記事が読みやすなるという点がすごくおすすめできる点です。

  • 読者が不快を感じない
  • 説明文もひと目でわかるので記事が読みやすくなる

というのはブログの書き手からしても助かるのではないでしょうか。

それではアプリーチの画面が崩れてしまう理由と対処方法を詳しく解説してきます。

【Sango】でアプリーチが正しく表示されないときの対処法

アプリーチで説明している通りに

アプリ選択してコードを記事に貼り付けたんだけどダメだ…

画像が大きく出てしまう等の崩れた画面がでてしまう人は

必要なCSSを入れていなかった

・HTMLで入力していなかった

編集画面で見ていた

という僕の失敗を見て解決してください。一つづつ丁寧に解説しますね。

手順1 必要なCSSを入れていなかった

タック
タック

僕の場合早とちりして説明分を読まずにコードを貼り付けたことが一つの原因でした。

サイトのページにしっかり書かれている内容ですが解説します。

「ブログページ(Wordpress)」→「外観」→「テーマファイルエディター」→「スタイルCSS」に決められたCSSを入力する必要があります。

[こちらはSANGOの子テーマ用CSSです]という下にコードを貼り付けます。

下記のコードを貼り付けます。アプリーチで掲載されているコードと同じものになります、


.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;
}

入力完了すれば【更新】を押します。

※更新をしないと反映されませんので問題は正しく画像が表示されません。

これで第一ステップは【完了】です!

手順2 HTMLで入力していなかった

次も初歩的なミスなのですが、

アプリのコードをそのまま記事本文に貼り付けました。

これだとうまく反映していないようで、下記のように崩れたままの表示でした。

解決策としてはブロック挿入ツールの「カスタムHTML」を使うということです。

手順3 プレビューで確認してみましょう

【手順1】と【手順2】をしたからOK!と思っていたらまだこの画面が表示されていました…

これはもうお手上げだな…

と思っていた時に「プレビュー」→「新しいタブでプレビュー」を押しました。

すると…

バッチリとこの画面がでていました!!

なんとか解決することが出来ました。

もしこれでも解決できない場合は以下のやり方もあるそうです

  • CSSがきちんと貼り付けられていない
  • CSS入力後に「更新」していない
  • キャッシュ削除をしてみる

CSSの貼り付け位置とコピーしたコードが別の物をコピーしていないかを確認!

キャッシュ削除は使っているブラウザによって違いますが、macの場合だと画面右上の「︙」マークの「設定」→「プライバシーセキュリティ」→「閲覧履歴の削除」で期間を選択して削除します。

キャッシュの削除をすると今までの閲覧履歴が消えることによって、ログインしたりするパスワードをまた求められたりします。削除は悪いことでは無いですが、少し手間がかかるということも理解しておきましょう。

記事まとめ【アプリーチで素敵なサイトを作りましょう】

僕の失敗した内容は

必要なCSSを入れていなかった

・HTMLで入力していなかった

編集画面で見ていた

初歩的ですがこの3つの事ができていませんでした。基本的に「アプローチ」の説明文を読んでもらえると解決しますので一度よく読み返してもう一度チャレンジしてください。

アプローチは本当に素敵なデザインを提供してくれており、使う人も見る人もストレスを感じません。

ぜひ活用して素敵なサイト作りをしていきましょう。

−−−やっぱりBlog執筆は楽しいね−−−
最後まで見ていただきありがとうございました。

※この記事は筆者の【SANGO】を使った実体験を元に書いています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA