CSS上書き - ウェブビュー機能

• CSS上書きとは - ウェブビュー機能

  ウェブビュー機能に設定したURLに対して、CSSの上書きが可能です。
  表示したくないヘッダー・フッダーを消したり、ページの一部を消す際に使用します。

  下の画像は、CSS上書きによってロゴを非表示にした例になります。

   

  CMS設定

  

   

  アプリ画面

  

• CSS上書きを設定する - ウェブビュー機能

  

  1. 「CSS上書き」をクリックします。
  2. 対象URLパターンを入力します。
     ※対象URLパターンは複数登録が可能です。
     ・https://yapp.li/  →yapp.li以下すべてのページ適応
     ・https://yapp.li/news  →yapp.liのnews以下すべてのページ適応
     ・https://yapp.li/index.html  →yapp.liのindex.htmlだけに適応
  3. 「対象端末」を「すべて」「Android」「iOS」から選択します。
  4. 「上書きするCSS」に必要な内容を入力します。
  5. 管理用に、100字までメモを入力することができます。
  6. 保存をクリックします。
  7. Preview Yappliで見え方を確認します。

  設定の詳細については下記サポートページも合わせてご確認ください。

  参考：『【vol.7】ウェブビューのCSS上書きでアプリらしい表現を』

   

  ヒント

  • 複数設定をする場合は「＋追加」をクリックします。
  • CSS上書きが反映されない場合は、指定している対象URLパターンのURLを短縮してみましょう。
    例：https://yappli.co.jp/xxxx/xxxx/  →  https://yappli.co.jp/xxxx/

   

   

  更新履歴

  • 2025年7月3日 「管理メモ」リリースに伴い、最新の情報に更新

• CSS上書き(共通設定)を設定する - ウェブビュー機能

  CSS上書き(共通設定)では、アプリ内に存在するすべてのウェブビュー機能に対し、共通したCSS上書き設定を行うことができます。

  1. 「コンテンツ管理」から、作成済みのウェブビュー機能いずれかを開きます。
  2. 右上の「共通設定」をクリックします。
     
  3. 従来のCSS上書きと同様に、対象URLと上書きするCSSを設定します。
     参考：『CSS上書きを設定する - ウェブビュー機能』

   

  ご注意

  • 設定した内容はすべてのウェブビュー機能に適用され、既存の個別CSS上書き設定は無効となります。
    （例）
    1. 共通設定で https://yahoo.co.jp/ に対してCSS上書きを設定する
    2. 個別のウェブビュー機能に対し、https://google.co.jp に対してCSS上書きを設定する
    
    上記の場合は共通設定が優先されるので、1.のyahooのサイトにはCSS上書きがされますが、2.のGoogleのサイトに対してはCSS上書きが適用されません。
    
    
  • 共通設定でCSS上書きをした場合、特定のウェブビュー機能のみそれを無効にすることはできません。
    特定のウェブビュー機能のみCSS上書きを変更されたい場合は、共通設定は行わず、個別のウェブビュー機能に対しCSS上書きを設定してください。

   

   

  ヒント

  • 複数設定をする場合は「＋追加」をクリックします。
  • CSS上書きが反映されない場合は、指定している対象URLパターンのURLを短縮してみましょう。
    例：https://yappli.co.jp/xxxx/xxxx/  →  https://yappli.co.jp/xxxx/
  • CSS上書き(共通設定)をした後に新規作成されたウェブビュー機能に対しても、CSS上書き(共通設定)が適応されます。

   

   

  更新履歴

  • 2025年7月3日 「管理メモ」リリースに伴い、最新の画像に更新