このセクションの記事一覧はこちら

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

よく使われている「ウェブビュー機能」、実は管理画面から見え方をカスタマイズできるんです!ウェブビュー機能とCSS上書きについてご紹介します!
MV.png

 

home_03.png

 

home_06.png

 

 

【第7回 ウェブビューのヘッダー・フッター非表示編】

 

 

ますこ:こんにちは、アプリデザインチームです!今回はウェブビューのヘッダー・フッターをアプリ上で非表示にする方法についてお話しします。

 

あかちゃん:ヘッダー・フッターって、ウェブサイトの上と下にある、あれのことですよね……?

 

ますこ:そうです!ヘッダーはページ上部、フッターはページ下部にあります。ヤプリのコーポレートサイトを見ながら、ヘッダー・フッターの位置を確認してみましょう。

 

image_01.png

 

あかちゃん:ヘッダーって、なんだかアプリのナビゲーションバーにも似てますね。

 

ますこ:そうなんです!アプリでウェブページを表示したとき、アプリのナビゲーションバーとヘッダーが一緒に表示されるとスマートではない見え方になってしまうことがあります。

フッターも、表示したままだとページ全体が長くなってしまったり、メインで見せたいコンテンツが目立たなくなってしまうことがあるので、アプリ初期制作の時にはヘッダーとフッターは非表示にすることが多いです。

 

あかちゃん:なるほど!ウェブページも、アプリらしい見せ方ができるのはいいですね!

 

ますこ:早速設定していきましょう!まずは、ウェブビュー機能で表示させたいページを指定します。

 

 

 

h2_01.png

 

h3_01.png

 

コンテンツを開いた際にデフォルトで表示するページを設定できます。

 

image_02.png

 

 

h3_02.png

 

他コンテンツからのウェブページをリンク設定する際に活用いただける機能です。

 

image_03.png

 

 

image_04.png

 

あかちゃん:ウェブビューの設定ができました!URL設定するだけで簡単ですね♪

 

ますこ:次は、CSS上書きを一緒に設定していきましょう!

 

 

 

h2_02.png

 

ますこ:「CSS上書き」ページにて、「対象URLパターン」と「上書きするCSS」の2箇所に記述していく必要があります。 

 

image_05.png

 

 

h3_03.png

 

ますこ:「対象URLパターン」は、上書きするCSSが有効になるURLを指定することができます。こちらは複数設定することができ、下の早見表のように細かく指定できます。

 

image_06.png

 

あかちゃん:対象URLパターンを工夫することで、一部のページだけにCSSを効かせたり、全体のページに同じCSSを効かせることができますね!

 

 

h3_04.png

 

ますこ:今回はヘッダー、フッターを非表示にしたいときの記述の一例を用意しました。

 

image_07.png

 

ますこ:上の図の「非表示にしたい要素」部分に、非表示にしたい要素のタグやclass名、id名をいれてもらえたら設定完了です。

 

あかちゃん:右の「要素を非表示にするCSS記述」は、左で指定した「非表示にしたい要素」を隠すような指定をしているんですね!

 

ますこ:その通りです!ちなみに、「非表示にしたい要素」のタグやclass名、id名を調べるときは、使っているブラウザの検証ツールを開き、非表示にしたい要素のタグやclass名、id名を探しています

 

 

image_08.png

※弊社CMS(管理画面)の推奨ブラウザはGoogle Cromeとなります。

 

 

あかちゃん:これでヘッダーとフッターが非表示になりました!

 

ますこ:お疲れさまです!プレビューで見え方を確認してみましょう。

 

 

 

h2_03.png

 

image_09.png

 

あかちゃん:すごい!なんだか画面が広々して見えます!

 

ますこ:ヘッダーとフッターの非表示が無事完了しましたね!簡単に設定できるのでぜひご活用ください!

 

あかちゃん:やってみたい!……けれど、ウェブページは組み方が違うものもたくさんあるので、今回の一例のように記述してもうまく非表示にできなかったり、ページの表示が崩れてしまうことがありますよね。

 

ますこ:そうですね。そんなときは……担当のCSにお問い合わせください!!

 

あかちゃん:CSさんってスゴイ……

 

 

今回ご紹介したウェブビュー機能の詳しい設定方法はこちら >

※ご不明点は担当のカスタマーサクセスにお問い合わせください。

 

近日、新記事を更新予定!次回もお楽しみに♪

 

不明点はございますか? お気軽にお問い合わせください >

不明点はございますか? お気軽にお問い合わせください >