ちょっとばかりお久しぶりな更新です。管理人(@sh_rainbow295)です。
いつからそうなっていたのか、単に私がチェックを忘れていたのか。
アプリ紹介に使わせていただいている、アプリーチのスマホ版リンクのデザインが崩れておりました。。
公式で用意されているCSSコード(新コードVer)を貼り直してみても状況は変わらず*1 … Continue reading、意外に手こずったので備忘録としてまとめておくことにしました。
なお、記事執筆時に使用している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__detai
アプリ名・制作者・金額・著作権表示(posted with アプリーチ)の横幅を広げる。
アプリ名が長い場合、半端すぎるところで改行されてしまうため。
100%でも大丈夫だと思います。
appreach__links
アプリリンク部分。
上のように表記することで、リンクが2つあっても隠れず、ちゃんと表示されるようになる。
本来なら横に並んで表示されるっぽいのだが、当ブログの環境では改行されてしまうのでこうするほかなかった。。
修正&カスタマイズした結果
スクリーンショット中のアプリーチのデザインが今と異なっていますが、修正を入れた部分は全く一緒です。
崩れなくなりましたし、アプリのリンクも全部表示されています!
アプリ名は3行になったことで表示が途切れていますが、これくらいならまあいいかなと。
アプリのリンクを1つだけにしてみても問題ありません。
ちなみに、PC版は修正前も修正後も変わらず問題ありませんでした。
まとめ
DigiPressのテーマって使っている方が少ないのか、検索してもあまり情報が引っかからないので、こういう時は結構時間がかかってしまって困るなー、とちょいちょい思います?
ちょっぴりHTMLやらCSSをかじっただけの人間にはいろいろ辛いところです。
ともかく、何とかなったのでよかったです。無理やり感ハンパないですが←
脚注