Escapeアーケインストレートオペラオムニアレストランパラダイスゲームおすすめ選テーブルサイト作りSANGOPhotoshopPCWindowsお問い合わせホームサイト作りSANGOSANGOでアプリーチを使用する時のCSSカスタマイズ2018/06/15MEMOこのページのカスタマイズは、2018年4月9日以降の新コード用CSSについて行っています。旧コードについては触れておりませんのでご注意下さい。スマホアプリを紹介する際にはアプリーチが便利ですが、アプリーチのCSSをSANGO上でそのまま使用するとデザインが崩れてしまいます。私の場合、普段の確認をOperaで行っておりましたので、最初にOperaでプレビュー確認をしました。その時はサンプル通りに表示されたので大丈夫だと思ってしまいましたが、GoogleChrome、Firefoxのブラウザから確認すると完全に崩れてしまっています。RESIZERで確認すると、Operaから見たためかもしれませんが、PC、タブレット、スマホともにきちんと表示されています。スマホ実機で確認するとやはりデザインが崩れてしまっています。こちらはスマホ実機の画面です。左はiphone用アプリアイコンを使用、右はAndroid用に替えています。画像に関するCSSが無視されているようで、左だとスマホの一画面に2種のリンクアイコンが入りきれないぐらいにアプリアイコンが大きく表示されてしまっています。右はアプリアイコンが少し小さくなってリンクアイコンまで一画面に入るようにはなりましたが、どちらにしてもアイコンの元サイズが表示されているためサイズが揃っていません。PCで見た場合も同様で画像サイズがCSSの指定を完全に無視して表示されていました。MEMOアプリーチのiphone版のアプリアイコンはHttpsに完全対応しておらず、httpsサイトでは表示されないものがあるようですので、両方のアプリがある場合はAndroid版のアイコンを選択した方が良いようです。以下のカスタマイズはSANGOのサイドバーのウィジェットに貼り付けた際にちょうど良く収まるように小さめにデザインにしています。小さすぎると感じる場合はCSSを訂正してご利用ください。サイドバーでなく、記事本文中に挿入した場合に、.appreachにサイズ指定をしないと大変大きい画像が表示されてしまいますので、その対策としてmax-widthを使用しています。環境に合わせて変更して下さい。利用の際には子テーマのstyle.cssに以下のソースコードを追加して下さい。:WordPressスポンサーリンクSANGOで投稿記事の日付欄が小さくなり下線が表示される現象の回避方法SANGOでFontAwesomeの好きなアイコンをリストマーカーに指定する方法SANGOでウィジェットの背景色をサイトの背景色と同じに変更するカスタマイズこの記事を書いた人ゆきのはゲームの感想、攻略&TIPS等や、このサイトで使用しているツールことなどを載せています。コメントをキャンセルメールアドレスが公開されることはありません。4ゆきのはゲームのレビューや攻略、このサイトで使用しているツールことなどを載せています。