アプリーチ・スマホ版デザインが崩れていたので修正してみた【DigiPressテーマ・COLORS使用】

ちょっとばかりお久しぶりな更新です。管理人（@sh_rainbow295）です。

いつからそうなっていたのか、単に私がチェックを忘れていたのか。
アプリ紹介に使わせていただいている、アプリーチのスマホ版リンクのデザインが崩れておりました。。

公式で用意されているCSSコード（新コードVer）を貼り直してみても状況は変わらず^*1 … Continue reading、意外に手こずったので備忘録としてまとめておくことにしました。

なお、記事執筆時に使用しているWordPressテーマは、DigiPressさんの「COLORS」です。

修正ついでに見た目もカスタマイズしてみる

使用させていただいたCSSコードは以下のサイトにある「デザインパターン1」です。

【コピペで完成】アプリーチのデザインCSS配布！全7種類用意したのでお好みをどう...

https://hituji-affiliate.com/app-reach/

ここでは「アプリーチ」のデザインCSSを無料配布しています！ アプリーチってめちゃくちゃ便利なんです...

ひつじアフィリエイト

以下に、そのコードをコピペしてみます。

このコードのままブログに反映させても状況は変わらないので、「@media only screen and (max-width: 786px)」以下のコードをちょっといじります。

@media only screen and (max-width: 786px){
   .appreach{
      margin:20px 0;
   }
   .appreach__info {
      font-size: 11px !important;
   }
   p.appreach__name {
      font-size: 15px;
   }
   .appreach__detail {
      width: 95%;
      max-width: 95%;
   }
   .appreach__links {
      height: auto !important;
   }
}

主な変更点は以下の2つです。

修正＆カスタマイズした結果

スクリーンショット中のアプリーチのデザインが今と異なっていますが、修正を入れた部分は全く一緒です。

崩れなくなりましたし、アプリのリンクも全部表示されています！
アプリ名は3行になったことで表示が途切れていますが、これくらいならまあいいかなと。

アプリのリンクを1つだけにしてみても問題ありません。

ちなみに、PC版は修正前も修正後も変わらず問題ありませんでした。

まとめ

DigiPressのテーマって使っている方が少ないのか、検索してもあまり情報が引っかからないので、こういう時は結構時間がかかってしまって困るなー、とちょいちょい思います?

ちょっぴりHTMLやらCSSをかじっただけの人間にはいろいろ辛いところです。

ともかく、何とかなったのでよかったです。無理やり感ハンパないですが←