CMS（管理画面）の「デザイン」＞「ナビゲーションバー」では、アプリ上部に位置する「ナビゲーションバー」エリアの編集が可能です。

「ナビゲーションバー」エリアでは、以下の項目について編集が可能です。

①レイアウト
②スタイル 

 

なお、ボディ部分〜下部タブバーの色やデザインについては、以下のサポートページをご確認ください。

参考：『共通スタイル - デザイン設定』

 

レイアウト

ロゴ画像やアイコンのレイアウト設定です。

①	表示項目	以下の3つから選択可能です。 ロゴ　※デフォルト 全ての画面でロゴを表示します。 タイトル+ホームのみロゴ ホーム画面のみ設定されたロゴを表示し、ホーム画面以外では各コンテンツのコンテンツ名を表示します。 ※ホームはアクティブの一番左の機能を指します。 タイトル 全ての画面でタイトル（コンテンツ名）を表示します。 タイトル表示を選択している場合のご注意 v12.0.0以上のアプリでは、ウェブビュー機能を表示している際はコンテンツ名ではなく、ウェブサイトのタイトルを表示いたします。
②	表示位置	以下の2つから選択可能です。 中央　※デフォルト ロゴまたはタイトルを中央寄せで表示します。 アイコンは無視して端末の横幅の中央に配置します。 左 ロゴまたはタイトルを左寄せで表示します。 左にアイコンがある場合はアイコンの右から表示し、左にアイコンがない場合は左詰めで表示します。
③	ロゴ画像	ヘッダーに表示されるロゴ画像を入稿できます。 ロゴの表示エリアに合わせて画像が収まるよう拡大縮小され表示されるため、推奨サイズの規定はありません。 なお、ロゴの表示エリアはアイコンの数や揃えにより変動します。
④	アイコン	トグルをONにすることで、左に1つ、右に最大2つのアイコンを設置することができます。 アイコン画像はコンテンツ一覧で設定されているもので表示されます。 リンク設定で表示する機能を選択してください。

 

リンクファインダーにて設定可能な機能

• リンク
• ボトムシート
• ポップアップ
• モーダル（従来のウェブビュー機能、ポイントカード機能の見え方）
• バーコードリーダー/QRコードリーダー

 

ご注意

• ナビゲーションバーにイントロ機能を設置することは非推奨です。
• ナビゲーションバーにて、Shift+クリックでのURL直接入力（外部ブラウザ起動）を行うことは非推奨です。
  参考：『リンク設定でウェブビューを通さず直接ブラウザを立ち上げる』

 

 

アイコン画像の変更方法

ナビゲーションバーに配置したアイコン画像を変更するには、通常のコンテンツ一覧画面での変更に加え、ナビゲーションバー画面でのリンク設定の再保存が必要です。

1. コンテンツ一覧にて、該当コンテンツの「アイコン変更」より編集します。
   参考：『コンテンツのアイコンを変更する』
2. ナビゲーションバー＞該当のアイコンにて、リンクファインダーをクリックし再度保存します。
   
   こうすることで1.で変更されたアイコン情報を更新することができます。

 

 

スタイル

色味のスタイル設定です。

①	ステータスバー	時刻や電池残量などが表示される部分です。白か黒を選択できます。
②	背景画像	jpg、png形式の背景画像を入稿可能です。 推奨サイズは、1536×375ピクセルです。 画像を設定しない場合は、「背景カラー」に設定した色が表示されます。
③	背景カラー	背景のカラー設定です。
④	タイトルカラー	タイトルのカラー設定です。
⑤	アイコンカラー	アイコンのカラー設定です。 ※旧「戻るボタンのカラー」が反映されています。   ご注意 表示させているアイコンが「カスタムアイコン」かつ「フルカラー」の場合、アイコンカラーはここでの設定ではなく、カスタムアイコンで登録した元画像の色が反映されます。 参考：『画像作成時の注意点 - カスタムアイコン』
⑥	罫線カラー	ナビゲーションバーの下罫線はデフォルトでは非表示（0%）ですが、デザインにあわせて設定可能です。

 

カラー設定

カラーコードでの設定の他にも、カラー領域をクリックすると色を直感的にドラッグ＆ドロップで操作できるパレットが表示されます。イメージに合う色を選択してください。

また、右側のパーセンテージを変更することで透明度を変更することができます。
※0%が透明、100%が不透明です。

 

 

更新履歴

• 2025年6月5日 CMS（管理画面）でのナビゲーションバーの設定方法について、説明を追記
• 2025年4月22日 リンクファインダーにて設定可能な機能内に、イントロ機能設置が非推奨である旨ご注意に追記
• 2025年3月12日 リンクファインダーにて設定可能な機能内と、スタイル⑤「アイコンカラー」にご注意を追記
• 2025年2月12日 レイアウト①「表示項目」に、タイトル表示を選択している場合のご注意を追記
• 2025年2月5日 アプリナビゲーション改修に伴い、内容を更新