hibariマニュアル：TOPモジュールでのブロック作成：メニューの配置

1. TOPモジュールにおいてのブロック作成（1）
hibariオンラインマニュアル
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定
~メニューの配置⽅法について~

2. ①ブロックの作成
TOPモジュールにおいてのブロック作成
TOPモジュールにおいての「レイアウト設定」からブロックを作成してみましょう。
初期状態では、レイアウト設定画⾯に何もブロックがありません。
そのため「プレビュー」でサイトページを表⽰しても、真っ⽩な画⾯となっております。
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定
CMS
▼初期状態

3. ②メニューブロックの作成
TOPモジュールにおいてのブロック作成
まずは、グローバルナビゲーションのための「メニューブロック」を作成していきます。
画⾯右上に「 」マークがあるのでクリックしましょう。
ブロックリスト項⽬が表⽰されます。
「＋ブロック作成」より、ブロックを作成していきます。
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定

4. ③ブロックの選択
TOPモジュールにおいてのブロック作成
当CMSで利⽤していくための様々なブロックが⽤意されています。ブロックに関しての詳
細は、あとでジャンル別にまとめてご説明いたします。
制作の流れを把握するために、ここでは「メニュー系」より、プレーンな「No.8000」の
ブロックを使⽤していきましょう。
⾚枠内の画像をクリックします。
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定

5. ④ブロック名の選択
TOPモジュールにおいてのブロック作成
ブロック編集画⾯になります。まずはブロック名を設定してください。ここでは「グロー
バルメニュー」ブロックと設定しました。
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定

6. ⑤メニューの選択
TOPモジュールにおいてのブロック作成
メニュー設定より作成したメニューを選びます。現在は1つしかないため、前ページで作成
した「グローバルナビ」が表⽰されています。
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定

7. ⑥メニュー表⽰の位置の設定
TOPモジュールにおいてのブロック作成
「スマホ表⽰の時のメニュー表⽰」では、スマートフォン表⽰時のバーガーメニューの位
置を設定できます。
右から表⽰とすると、右図のようにバーガーメニューは右上に設定され、スマートフォン
画⾯右側からメニュー項⽬を出すことが可能です。
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定

8. ⑦メニュー項⽬の確認
TOPモジュールにおいてのブロック作成
サンプルとして、実際のメニュー項⽬を⾒てみましょう。
右上のバーガーボタンを押すと……
このようにメニューが表⽰されます。こちらはスタイルシート（後述のカスタムCSS）に
よって、背景⾊やバーガーボタンの画像など、⾃由にカスタマイズ可能です。
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定

9. ⑧「登録・更新」をして完成！
TOPモジュールにおいてのブロック作成
設定が終わったら、「登録・更新」ボタンを押しましょう。
グローバルナビゲーションのブロックが完成しました。
モジュール操作編
モジュール＞ TOP ＞ レイアウト設定

10. ページビルダーと更新管理を併せ持つ
唯⼀無⼆のオリジナルCMS
⾼機能
レスポンシブテーマ
ページビルダー
セルフSEO
ページ無制限
簡単
レイアウト変更
ブロック機能
コンテンツ管理
プレビュー
安⼼
バックアップ
時限公開機能
セキュリティ
権限&認証
詳細はこちらをご覧ください→