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

2020年11月6日
2020年11月6日
ブログ運営
THE THOR

ブログ運営

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

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

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

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

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

そこで本記事では

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

を紹介していきます。

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

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

1 THE THORでアプリーチをキレイに表示させる方法
- 1.1 【はじめに】アプリーチの使い方
2 改めてアプリーチをキレイに表示させるCSSコード【コピペで解決】
- 2.1 ①：レイアウト崩れを修正したシンプルなバージョン
3 ②：囲い枠をカスタマイズしたオリジナルのバージョン
- 3.1 枠線を自分好みにカスタマイズしたい
4 【THE THOR】アプリーチをキレイに表示させるカスタマイズ方法「コピペで解決」｜まとめ

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

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

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

アプリーチの設定時、Android版がある場合、画像アイコンはAndroid版を使用するようにしてください。iPhone版はhttpsに完全に対応しておらず、httpsサイトでうまく表示されないものがあります。

また、Android版とiPhone版のダウンロードリンクのアイコンは、それぞれ画像のサイズが異なっているのでサイズ調整をしないと片方のアイコンだけはみ出したりしますのでご注意ください。

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

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

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

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

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

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

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

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

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

詳細を設定します

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

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

そうなんです。

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

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

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

紹介するCSSコードは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;
}