この記事では、ウィジェット ＞ ヘッダー ＞ タイトルバー の使い方をご紹介します。
ヘッダー
まず、タイトルバーが属するカテゴリー「ヘッダー」の特徴や主な用途を紹介します。
ページ上部（もしくは下部）の共通領域
サイト全体のナビゲーション
ロゴ・メニュー・ログイン情報などの配置
ページ生成時処理／ページ内処理で、kintone から取得した特定レコードの値を表示
表示例
タイトルバーを使うと下記のように、ボックスの左、中央、右に任意のアイテムを表示することができます。
今回は企業Webサイトを想定し、会社ロゴ・サイト内の各ページリンク・お問い合わせ用リンクを設置しています。
エブリサイトの設定
【設定例】メディアライブラリ
まず、タイトルバーに設置する会社のロゴ画像を、予めメディアライブラリにアップロードしておきます。
【設定例】ウィジェット編集
今回、「左に置くアイテム」に会社ロゴ、「中央に置くアイテム」にサイト内の各ページへのリンク、「右に置くアイテム」にお問い合わせフォームページへのリンクを設置する設定例を、下記に紹介します。
※今回はタイトルバーの使い方について説明する記事のため、各リンク先ページの作成手順は省きます。ページの作成方法については、下記をご参考ください。
左に置くアイテム
「左に置くアイテム」に、アイテム「画像」を配置します。
・画像
パラメーターを下記の通り設定します。
「画像のURLまたはパス」では、「メディア」から事前にアップロードした画像を選択します。
中央に置くアイテム
「中央に置くアイテム」に、アイテム「リンクテキスト（下線なし）」を６つ配置します。
・リンクテキスト（下線なし）
パラメーターを下記の通り設定します。
「リンク先URL」に同サイト内の別ページのURL、「表示するテキスト」に表示する文字を指定します。
また、「中央に置くアイテムの間隔」は今回 10% に設定します。
※サイズの指定について、詳しくは下記をご参考ください。
右に置くアイテム
「右に置くアイテム」に、アイテム「リンクアイコン」を配置します。
・リンクアイコン
パラメーターを下記の通り設定します。
「リンク先URL」に、お問い合わせ用ページのURLを指定します。
「アイコン」は、下記を指定します。
まとめ
以上がエブリサイトでタイトルバーを表示する方法でした。