【THE THOR】アプリーチをキレイに表示させるカスタマイズ方法「コピペで解決」

THE THORでアプリーチを使ったら
レイアウトが崩れてキレイに
表示されないんですけど…
何とかならないの？

このような問題を解決します。

スマホアプリが紹介される時にブログでよく見かけるこのボタン。

「アプリーチ」というサービスを使えばカンタンに設置することができます。

ところがTHE THOR（ザ・トール）で使用すると、どうしてもキレイに表示されません。

そこで本記事では

• CSSでアプリーチをキレイに表示させる方法
• 外枠をカスタマイズしてオリジナル感を出す方法

を紹介していきます。

コピペでカンタンに整えることができるので、レイアウト崩れが気になってこれまでアプリーチを使わなかった人もぜひ試してみてください。

それでは本編スタートです( ´∀｀ )

THE THORでアプリーチをキレイに表示させる方法

これからアプリーチをキレイに表示させる方法を解説していきます。

が、その前にアプリーチの説明を先にしておきますね。

アプリーチの使い方はすでに知っているよ！って方は、

»②改めてアプリーチをキレイに表示させるCSSコード【コピペで解決】

をクリックして先に進んでください！

【はじめに】アプリーチの使い方

ブログでスマホアプリを紹介する「アプリーチ」の使い方の手順を見ていきます。

まずは「アプリーチ」にアクセス

赤枠の中に紹介したいアプリ名を入力し➡検索ボタンをクリック

検索結果から採用する方を選びます。

※ここではAndroid版が探していたアプリだったので、右を採用します。
同じアプリが表示された時は必ずAndroid版を選択してください！

詳細を設定します

コードをコピー➡ブログに貼り付ければ作業完了です

ちょっと待って！
言われた通りにしたのに、
表示がおかしなことに
なってます！

そうなんです。

THE THOR（ザ・トール）でアプリーチを使用すると固有のCSSの影響を受けてレイアウトが崩れてしまいます。

それを調整するための追加CSSコードを2つ用意したので、お好みで使ってください。

改めてアプリーチをキレイに表示させるCSSコード【コピペで解決】

紹介するCSSコードは2つです。

1. レイアウト崩れを修正しただけのシンプルなバージョン
2. 囲い枠をカスタマイズしたオリジナルのバージョン

あなたのサイトに合ったレイアウトを選んで、コピペしてくださいね。

どちらを選ぶにせよ、まずはダッシュボードの画面から、

【外観】➡【カスタマイズ】を選択してください。

あとは『追加CSS』にコピペするだけです！

それでは1つずつ見ていきましょう。

①：レイアウト崩れを修正したシンプルなバージョン

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach p::after {
  display: none;
 }
.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: 100px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
  margin-top: 0 !important;
}
.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 !important;
  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;
}

②：囲い枠をカスタマイズしたオリジナルのバージョン

仕上がりのイメージはこんな感じ。

囲い枠をブログのオリジナルカラーの青にして、角を丸めたボックスにカスタマイズしています。

.appreach {
  text-align: left;
  padding: 10px;
  border: 5px double #1a4bd2;
  overflow: hidden;
  border-radius: 10px;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach p::after {
  display: none;
 }
.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: 100px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
  margin-top: 0 !important;
}
.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 !important;
  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にコピペしたコードを確認してください。

• 青線の5pxで枠線の太さ
• 赤線の#1a4bd2で枠線の色
• 間に挟まれたdoubleで枠線の種類

をカスタマイズすることができます。

色を決めるカラーコードは、「WEB色見本　原色大辞典」が参考になります。

自分のブログで、独自のカラーコードを指定してる人は統一しても良いかもですね。「基本スタイル設定」で確認できます。

「基本スタイル設定」の確認方法がわからない人は、
カスタマイズメニューの「基本スタイル設定」から調べる
をクリックしていただければ詳しく解説しています。

【THE THOR】アプリーチをキレイに表示させるカスタマイズ方法「コピペで解決」｜まとめ

THE THORでのアプリーチの使い方と、レイアウト崩れを修正する方法を紹介してきました。

これで見た目を気にしてアプリーチを使ってこなかった人も安心して使うことができるようになると思います！

基本的に僕のブログでは、コピペだけでカスタマイズできるようになっていますが、CSSの知識が少しでもあればもっと自分好みの仕様にできます。

興味がある方は下記の記事で「無料で始められるプログラミング学習サイト」を紹介しています。

関連記事

無料で始めるプログラミングサイトでの勉強法【5ヶ月で脱初心者】

プログラムの勉強に限らず、何か新しいことを始めるのに いきなり高額な出費からスタートするのは厳しくないですか？ それが将来に大きなリターンになるかもしれないと分かっていても、 まずは無料でどんなものか試してみたいですよね[…]

少しの勉強でできることが増えるので、ブログがもっと楽しくなりますよ！

それでは今回はここまで。
この記事が参考になったらシェアしてもらえると嬉しいです( ´∀｀ )