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

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

2. ①デザインブロックについての説明
デザインブロックについて
当CMSには、サイト設計をスムーズに⾏うためのブロックが⽤意されています。
そのひとつがデザインブロックです。簡単な制作の流れを⾒てきましたが、改めてデザイン
ブロックについてご説明いたします。
レイアウト設定画⾯より「ブロック作成」を押しましょう。
モジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

3. ②デザインブロック作成の開始
こちらにデザインブロックがあります。
2017年5⽉現在、デザインブロックは12種類⽤意がされています。
それぞれ、各サムネイルのようなカラム構成、画像＋リンク（なし・あり）⽂章を配置する
ことが可能です。ここでは「No.0001」を⾒ていきましょう。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

4. ③ブロック名の追加と⾒出しの⼊⼒
２カラムのデザインブロック（No.0001）を作成し、制作してみましょう。まず、新規追加
画⾯でブロック名を設定してください。
⾒出しが必要な場合は、⾒出しを⼊⼒します。不要な場合、省略が可能です。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

5. ④説明の設定
説明も省略が可能です。利⽤する場合は、テキストボックス内にHTMLタグを挿⼊すること
ができますので、「⾒出し」と「説明」部分は、スタイルシートで⾃由に設計が可能となっ
ております。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

6. ⑤設定画⾯
設定画⾯は、以下のとおり簡素な設定項⽬となります。
ブログの新着順を表⽰させるブロック、と考えてください。そのためシンプル系ブロックの
表⽰⽅法は、新着順とランダムで表⽰が可能です。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

7. ⑥コンテンツの選択
続いて、画像を設定してください。
デザインブロックの画像指定は、同⼀サイズの画像をご⽤意ください。「画像を選択」枠を
クリックすることで、画像を挿⼊することができます。
タイトルや説明、リンク先URLを挿⼊します。タイトル、説明、リンク先URLは、それぞれ
省略することが可能です。必要に応じて設定をしてください。例えば、画像のみ２カラムで
置き、それぞれにリンクURLを設定する場合には、画像を追加したあと、リンク先URLのみ
指定してください。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

8. ⑦⾏を追加
２カラムで計4つ、計6つの画像を配置される場合は、適宜「⾏を追加」しましょう。
⽂字揃えを設定する場合は、こちらより左詰め・中央揃え・右詰めを選択してください。
タイトルと説明、双⽅に適⽤されます。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

9. ⑧デザインブロックの画像にアニメーションをつける
デザインブロックの画像に、アニメーションをつけることも可能です。画像読み込み時にイ
ンパクトを与えることができますので、ぜひ試してみてください。
それぞれ設定すると、こちらのようなキャプチャになります。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

10. ⑨ブロックの出⼒の際の出し⽅の選択
また、各デザインブロックのプレビュー画⾯にて、このように⾚枠が⼊っているブロックが
あります。こういったブロックに関しては、スマートフォンに出⼒の際、A→Bという出し⽅
にするか、B→Aの出し⽅にするか、を選ぶことが可能です。
均等カラムには、こちらの項⽬はございません。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

11. ⑩シンプル系ブロックを使うことで短時間でのサイト構築が可能！
デザインブロックは、あらゆるデザインに対応できるよう簡素なCSSで構成されています。
余⽩や⽂字スタイル、リンクカラーなどのデザインは、作成したブロックにスタイルシート
のidまたはclassを設定して、制作を⾏ってください。
Webサイトのトップページを構築する際には、とても強⼒なツールです。
サイトデザインにおいて、CSSのカラム構築をパーツごとで制作できるブロックですので、
短時間でサイト構築が可能なブロックとなります。
デザインブロックについてモジュール操作編
モジュール＞ CONTENTS ＞レイアウト設定

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