編集

アプリーチのレイアウトが気に入らないのでCSS変更

2024/10/02

アプリ紹介でアプリーチを使うんだけど

レイアウトが、、、

と思ってたらCSSをHTML編集で追加していませんでした(^^;

しかしアプリーチが公開しているCSSが気に入らない

F-Light(Bloggerテーマ)に合うようにCSS変更しました

アプリーチ

アプリの紹介・リンクを貼る時にカード風に出来ます

まぁ、ウチは殆ど使ってなくて３記事だけでした

レイアウトが気に食わなかったんですが、どうやってやるかも知らないし、調べもせず放置してたんですが見てるとイライラしてきて、、、

Google先生に聞くと CSS？？？

気がついてなかった(^^;

CSSに関係なくアプリーチのレイアウトが崩れる問題は結構あるようで、Google先生に聞くと、すぐ出てきました

CSS

アプリーチが公開しているCSSだと、、、

アプリーチ利用する時のコード表示される上にCSSあります

ここクリックするとCSSが表示されます

こんな感じ

枠が無駄にデカいよ

参考にさせて頂いたサイトのCSS

枠が小さくなり良い感じ

背景色はクリアです

『アプリーチ』CSSをコピペでカスタマイズ〈はてなブログ〉 - イロイロひとりごと

これの枠を実線にして使おうかな、、、

と思ったんですが、、、

変更しました

F-Light風CSS

F-Light”風”って言い方も変ですがF-Lightのブログカード等と同じ感じにしました

こんな感じに変更
自動でセンターに来るようにして
背景色もテーマカラーで設定した色になります
アプリーチが公開しているCSS、参考にしたCSSはセンターにきません

CSSはコチラ

/*==== ユーザー カスタム CSS ====*/
/* アプリーチ */
.appreach {
  text-align: left;
  padding: 10px;
  position: relative;
  width: 100%;
  max-width: 600px;/* 最大横幅 */
  margin: 0 auto 30px;
  border-radius: 2px;
  box-shadow: 0px 20px 40px var(--shadow);
  background: var(--light-bg);
  transition: .2s;
}
.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;
}

F-Lightを使っている方は
/*==== ユーザーカスタム CSS ====*/

の下にCSS追加してください

参考にさせて頂いたCSSをベースにして
赤字の部分だけ変更しました