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

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

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

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

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

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

そこで本記事では

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

を紹介していきます。

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

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

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

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

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

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

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

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

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

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

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


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

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

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

まずは「アプリーチ」にアクセス
»アプリーチへはこちらをクリック

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

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


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

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

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

詳細を設定します

詳細を設定します
※「アイコン画像」は必ずAndroidで!

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

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

※必ず「新コード」を使用してください!
ちょっと待って!
言われた通りにしたのに、
表示がおかしなことに
なってます!
修正前のアプリーチ


そうなんです。

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



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

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

改めてアプリーチをキレイに表示させる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の知識が少しでもあればもっと自分好みの仕様にできます。

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

関連記事

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



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

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

WordPressテーマ『THE THOR』
圧倒的にSEOに強く・抜群に上位表示されやすい究極のSEO最適化テーマ『THE THOR(ザ・トール)』であなたもインターネットビジネスを本格的に始めてみませんか?