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

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

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

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

  

• 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. 保存をクリックします。
  6. Preview Yappliで見え方を確認します。

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

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

   

  ヒント

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

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

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

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

   

  設定した内容はすべてのウェブビュー機能に適用され、既存の個別CSS上書き設定は無効となります。

  （例）

  ・共通設定で https://yahoo.co.jp/ に対してCSS上書きを設定する

  ・個別のウェブビュー機能に対し、https://google.co.jp に対してCSS上書きを設定する

  上記の場合は、共通設定が優先されるので、yahooのサイトにはCSS上書きがされるが、Googleのサイトに対しては一切CSS上書きがされません。

   

  共通設定でCSS上書きをした場合、特定のウェブビュー機能のみそれを無効にするといった設定はございません。

  特定のウェブビュー機能のみCSS上書きを変更されたい、という場合は、共通設定は行わず、個別のウェブビュー機能に対し、CSS上書きをご設定ください。

   

  ヒント

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