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

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

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

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

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

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

スポンサーリンク

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

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

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

このコードのままブログに反映させても状況は変わらないので、「@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つです。

  • appreach__detail
    アプリ名・制作者・金額・著作権表示(posted with アプリーチ)の横幅を広げる。
    アプリ名が長い場合、半端すぎるところで改行されてしまうため。
    100%でも大丈夫だと思います。
  • appreach__links
    アプリリンク部分。
    上のように表記することで、リンクが2つあっても隠れず、ちゃんと表示されるようになる。
    本来なら横に並んで表示されるっぽいのだが、当ブログの環境では改行されてしまうのでこうするほかなかった。。

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

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

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

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

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

まとめ

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

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

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

1+

脚注   [ + ]

1. スクリーンショットを撮り忘れましたが、Android版・iPhone版両方のリンクを貼ると、片方のリンクが隠れてしまう状態になってしまいました。
スポンサーリンク