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

 

 

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

 

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

 

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

 

 

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

 

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

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

 

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

 

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

 

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

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

 

 

 

 

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

 

 

 

 

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

 

 

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

 

 

 

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

 

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

 

 

 

 

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

 

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

 

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

 

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

 

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

 

 

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

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

 

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