hibariオンラインマニュアル モジュール操作編

1. メニュー系ブロックについて
hibariオンラインマニュアル
モジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

2. ①メニュー系ブロックの紹介
メニュー系ブロックについて
サイト設定グループの「メニュー設定」にて作成したメニューを、こちらのブロックで紐つ
けることができます。基本的な流れとしましては「メニュー設定でグローバルナビを作成」
の記載どおりです。メニュー系ブロックは、以下のブロックが⽤意されています。
モジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

3. ②ナビゲーションを作成
メニュー系ブロックについて
制作例を⾒てきたグローバルナビゲーションでは、⼦はありませんでした。
No.8002のブロックを取り扱う場合、メニュー設定ではこのように設定をすることで⼦のナ
ビゲーションを作成することが可能となります。
モジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

4. ③ナビゲーションを表⽰
メニュー系ブロックについて
設定後、マウスオーバーをすることで表⽰がされます。
モジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

5. ④背景⾊やナビゲーションのサイズなどを変更
メニュー系ブロックについて
背景⾊やナビゲーションのサイズなどを変更される際には、グローバルナビゲーションにカ
スタムCSSを対応させてください。
当サイトのグローバルナビゲーションにおけるスタイルシートを参考までに挙げておきます。
ブロック番号は⼀番シンプルなメニューブロック「No.8000」です。
モジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定
/* ==============================================
グローバルナビ
=============================================== */
.header-h01 {
max-width: 1024px;
margin: auto;
background: #fff;
text-align: center;
}
/*レイアウト設定画⾯より、グローバルナビのブロックにheader-h01というクラス名を指定してください。*/
.logo {
width: 140px;
}
.drawer-menu li a {
font-size: 1.4rem;
text-decoration: none;
color: #000000;
}
.drawer-menu li a:hover {
color: #f04e4b;
background-color: rgba(236, 181, 180, 0.12);
}
@media (min-width: 960px) {
.drawer-nav {
position: absolute;
}
}
デザインによってはフリーブロックでのメニュー作成ということもありますが、
サイト管理者が管理しやすいよう、可能な限りメニュー系ブロックで作成していきましょう

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