hibariオンラインマニュアル テクニカル編

1. カスタムCSSについて
hibariオンラインマニュアル
テクニカル編
テーマ管理 ＞ カスタムCSS

2. ①制作の本丸、ページや各ブロックにスタイルシートを設定しよう！
当CMSでは、⾃由なデザイン設計を⾏うため、初期テーマである「basic」には、必要最低
限のスタイルシートしか組み込まれていません。
まず、サイトの画⾯幅を決めるため、カスタムCSSの設計⽅法を⾒ていきましょう。
現在は左図のように画⾯幅は100%となっており、どのようなモニタでも全画⾯表⽰となっ
ていますので、右図のようにサイドにスペースのあるサイトを⽬指していきましょう。
カスタムCSSについてテクニカル編
テーマ管理 ＞ カスタムCSS

3. ②テーマグループにある「カスタムCSS」をクリックしましょう
カスタムCSSについてテクニカル編
テーマ管理 ＞ カスタムCSS

4. ③カスタムフィールドの確認。CSS1とCSS2があります。
カスタムCSSの⼊⼒フィールドは、1と2のボックスがあります。
PC⽤は1、スマートフォン⽤は2と記載すると便利です。ファイル名は「custom.css」と
なっていて、ひとつのファイル内に記述したスタイルシートが出⼒されます。
なので、2をスマートフォン⽤に活⽤する場合はメディアクエリで指定する必要があります。
カスタムCSSについてテクニカル編
テーマ管理 ＞ カスタムCSS

5. ④サイト幅をCSSで指定してみましょう
カスタムCSSについてテクニカル編
テーマ管理 ＞ カスタムCSS
カスタムCSSに以下のスタイルシートを書いてみましょう。
.main { background: #fff; max-width:1200px; margin:auto; }
カスタムCSSを登録後、これでサイト幅を1200pxとして設計することができました。
.mainというクラス名は「basic」のテーマで設定されているクラス名です。テーマ内にある
クラス名を記述することで、カスタムCSSの⽅を優先します。

6. ⑤ブロックにclassを指定し、オリジナルでCSSを組んでみましょう
カスタムCSSについてテクニカル編
テーマ管理 ＞ カスタムCSS
グローバルナビゲーションをカスタマイズしますが、こちらは独⾃で作成したスタイルシー
トを設定していきましょう。グローバルナビゲーションを独⾃のクラス名で1200px幅を適
応させるために、.header_1 { width:1200px; margin: auto; } とスタイルシートを
組むとします。
独⾃でクラス名を設定するために、レイアウト設定画⾯に移動し、グローバルナビゲーショ
ンのブロック「＋」を押しましょう。独⾃でクラス名を設定するためには、各ブロックに登
録する必要があります。

7. ⑥ブロックに「id」と「class」名を⼊⼒する項⽬があるので記⼊
カスタムCSSについてテクニカル編
テーマ管理 ＞ カスタムCSS
今回はクラス名にheader_1でカスタマイズしたいので、Classに「header_1」と⼊⼒をし
ます。忘れずに「登録・更新」ボタンを押していきましょう。

8. ⑦カスタムCSSの更新ボタンを押し、プレビューで確認してみよう
カスタムCSSについてテクニカル編
テーマ管理 ＞ カスタムCSS
ブロックでクラス指定をし、カスタムCSSを更新を押すとサイトに反映されます。プレ
ビューで確認してみましょう。

9. ⑧最後に
カスタムCSSについてテクニカル編
テーマ管理 ＞ カスタムCSS
当CMSのデザイン⽅法は、このようにブロックを配置し、そのブロック単位でCSSを構築で
きるようになっています。
ブロックを移動したい場合でも、他のブロックを崩すことなく、そのパーツ部分のみを⾃由
移動させることができるのです。制作の流れとして、初回のうちは例えばChromeにある
ディベロッパーツールを使いながら、ゼロベースより構築をしていく流れとなります。
が、複数サイト構築をされていくにあたって、ブロック単位での専⽤CSSライブラリを作成
していくと、サイト制作スピードも上がっていくものと考えています。
カスタマイズCSSを使って、オリジナルのサイトを作っていきましょう！

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