【2020最新版】アプリーチのデザインが崩れる問題をサクッと解決!【コピペOK!】

スポンサーリンク
【2020最新版】アプリーチのデザインが崩れる問題をサクッと解決!【コピペOK!】 ブログ
悩む女性

アプリーチを使ってアプリを紹介したいのにデザインが崩れる。。どうしたらきれいになるのかな?

こういった悩みに答えます

私もアプリを紹介したくてアプリを利用させていただいたけどパソコンで見たときにサンプルイメージのようにならなかったので解決方法をシェアします!

使い方から紹介しているのでデザインの解決方法をすぐに知りたい方はもくじから飛んでください◎

ではいきましょう!

スポンサーリンク

アプリーチとは?

まずアプリーチとは、ままはっくさんが作ったアプリを簡単に紹介できるサイトです

こんな感じ↓

Twitter ツイッター
Twitter ツイッター
開発元:Twitter, Inc.
無料
posted withアプリーチ

プレミアム版では「posted with アプリーチ」の表記を非表示にできます

スポンサーリンク

アプリーチの使い方

引用元:https://mama-hack.com/app-reach/

では、アプリーチの使い方をみていきましょう

アプリーチのサイトを開く

URL:https://mama-hack.com/app-reach/

アプリの名前を検索

今「twitter」と入っているところに自分の紹介したいアプリの名前を入れましょう

詳細設定を行う

基本的にはそのままで大丈夫ですが、私は「target=”_blank”の付与」をありに変更しています

「target=”_blank”の付与」とはクリックしたときに新規ページを開くか開かないかの違いです

なしだとそのままのページ、ありだと新規ページでリンク先のページが開かれます

コードをコピーして貼り付ける

最後にコードをコピーして自分のサイトやブログに貼り付けましょう

旧コードはCSSの追加が必要なく、このコード一つで完結するのでオススメです

スポンサーリンク

デザインが崩れた時の対処法

私はWordPressの無料テーマ「Cocoon」でブログを書いたときにパソコンで見るとこのように崩れました

Netflixの直下に開発元〜が来て欲しいのにアプリのダウンロードボタンの横に。。。

サンプルと違う!!

となってしまった時の解決方法はこちら!

※旧コードを使っています

コードの中から「style=”float:left;”」を探す

<div id=”appreach-box” style=”text-align: left;”><img id=”appreach-image” src=”https://is3-ssl.mzstatic.com/image/thumb/Purple114/v4/04/61/b4/0461b419-5b19-3851-b4b2-daaf513f766e/source/512x512bb.jpg” alt=”Netflix” style=”float: left; margin: 10px; width: 25%; max-width: 120px; border-radius: 10%;”><div class=”appreach-info” style=”margin: 10px;”><div id=”appreach-appname”>Netflix</div><div id=”appreach-developer” style=”font-size: 80%; display: inline-block;”>開発元:<span id=”appreach-developerurl”>Netflix, Inc.</span></div><div id=”appreach-price” style=”font-size: 80%; display: inline-block;”>無料</div><div class=”appreach-powered” style=”font-size: 80%; display: inline-block;”>posted with<a href=”https://mama-hack.com/app-reach/” title=”アプリーチ” target=”_blank” rel=”nofollow”>アプリーチ</a></div><div class=”appreach-links” style=”float: left;”><div id=”appreach-itunes-link” style=”display: inline-block;”><a id=”appreach-itunes” href=”https://apps.apple.com/jp/app/netflix/id363590051?uo=4″ target=”_blank” rel=”nofollow”><img src=”https://nabettu.github.io/appreach/img/itune_ja.svg” style=”height: 40px; width: 135px;”></a></div><div id=”appreach-gplay-link” style=”display: inline-block;”><a id=”appreach-gplay” href=”https://play.google.com/store/apps/details?id=com.netflix.mediaclient” target=”_blank” rel=”nofollow”><img src=”https://nabettu.github.io/appreach/img/gplay_ja.png” style=”height: 40px; width: 134.5px;”></a></div></div></div><div class=”appreach-footer” style=”margin-bottom: 10px; clear: left;”></div></div>

⌘+Fで画面内の情報の検索ができます

floatと検索すると「style=”float:left;”」が2つ見つかりました

2つ目の「style=”float:left;”」にコードを追加

2つ目の「style=”float:left;”」の後ろに「width:70%;」を追加しましょう

こんな感じ↓

<div class=”appreach-links” style=”float: left;width:70%;”>

これでアプリのインストールボタンの横にテキストが入る余裕がなくなりました

以上!

パソコンで見てもスマホで見てもデザインがキレイになったかと思います

Netflix
Netflix
開発元:Netflix, Inc.
無料
posted withアプリーチ

ぜひお試しください!

おまけ:アプリの周りに枠をつけたい

アプリの周りに枠をつけたいときは一番上にCSSコードを付け足します

<div id=”appreach-box” style=”text-align: left;”>

こいつに

border:1px solid #eee;

を追加すると

<div id=”appreach-box” style=”text-align: left;border:1px solid #eee;”>

となり見た目はこうなります↓

Netflix
Netflix
開発元:Netflix, Inc.
無料
posted withアプリーチ

#eeeの部分で他の色に変更可能です!

パソコンとスマホでそれぞれコードの指定を変えてあげるともっとキレイになるのですが、今回はサクッとということでお許しを!

ぜひお試しください!


【ランキングに参加しています】
面白かった!参考になった!という方は下のボタンをクリックしてくれると筆者が喜びます!

ブログランキング・にほんブログ村へ 人気ブログランキングへ
ブログ
スポンサーリンク
この記事をシェアする
KANONをフォローする
kanonblog

コメント

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