Submit Search
Upload
カスタムCSSについて
•
0 likes
•
27 views
S
Satoru Shinmura
Follow
hibariマニュアル:カスタムCSSについて
Read less
Read more
Internet
Report
Share
Report
Share
1 of 10
Download now
Download to read offline
Recommended
カスタムCSSについて
カスタムCSSについて
Ryutaro Takayanagi
カスタムjsについて
カスタムjsについて
Satoru Shinmura
カスタムjsについて
カスタムjsについて
Ryutaro Takayanagi
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
知己 久保
デザインブロックについて
デザインブロックについて
Satoru Shinmura
デザインブロックについて
デザインブロックについて
Ryutaro Takayanagi
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
世界一即戦力なCMS
世界一即戦力なCMS
Hishikawa Takuro
Recommended
カスタムCSSについて
カスタムCSSについて
Ryutaro Takayanagi
カスタムjsについて
カスタムjsについて
Satoru Shinmura
カスタムjsについて
カスタムjsについて
Ryutaro Takayanagi
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
知己 久保
デザインブロックについて
デザインブロックについて
Satoru Shinmura
デザインブロックについて
デザインブロックについて
Ryutaro Takayanagi
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
世界一即戦力なCMS
世界一即戦力なCMS
Hishikawa Takuro
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
concrete5で制作・運用する多言語ウェブサイト
concrete5で制作・運用する多言語ウェブサイト
Hishikawa Takuro
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Kenji Karahashi
CMSホームページ制作サービスcomgご提案書
CMSホームページ制作サービスcomgご提案書
Four Fusion Marketing
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
schoowebcampus
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
schoowebcampus
ブロックデータの使い方
ブロックデータの使い方
Satoru Shinmura
外部連携の使い方(記事のインポート/エクスポート機能)
外部連携の使い方(記事のインポート/エクスポート機能)
Satoru Shinmura
エラーページの設定方法
エラーページの設定方法
Satoru Shinmura
お問い合わせ履歴の見方
お問い合わせ履歴の見方
Satoru Shinmura
お問い合わせ:各種設定の使い方
お問い合わせ:各種設定の使い方
Satoru Shinmura
テーマの設定方法
テーマの設定方法
Satoru Shinmura
ユーティリティ系ブロックについて
ユーティリティ系ブロックについて
Satoru Shinmura
メニュー系ブロックについて
メニュー系ブロックについて
Satoru Shinmura
スライダー系ブロックについて
スライダー系ブロックについて
Satoru Shinmura
ギャラリー系ブロックについて
ギャラリー系ブロックについて
Satoru Shinmura
サムネイル系ブロックについて
サムネイル系ブロックについて
Satoru Shinmura
シンプル系ブロックについて
シンプル系ブロックについて
Satoru Shinmura
お問い合わせモジュールの項目管理について
お問い合わせモジュールの項目管理について
Satoru Shinmura
お問い合わせモジュールについて:設定方法
お問い合わせモジュールについて:設定方法
Satoru Shinmura
TOPモジュールにおいてのブロック配置
TOPモジュールにおいてのブロック配置
Satoru Shinmura
More Related Content
Similar to カスタムCSSについて
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
concrete5で制作・運用する多言語ウェブサイト
concrete5で制作・運用する多言語ウェブサイト
Hishikawa Takuro
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Kenji Karahashi
CMSホームページ制作サービスcomgご提案書
CMSホームページ制作サービスcomgご提案書
Four Fusion Marketing
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
schoowebcampus
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
schoowebcampus
Similar to カスタムCSSについて
(7)
Web制作勉強会 #1
Web制作勉強会 #1
concrete5で制作・運用する多言語ウェブサイト
concrete5で制作・運用する多言語ウェブサイト
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
CMSホームページ制作サービスcomgご提案書
CMSホームページ制作サービスcomgご提案書
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
More from Satoru Shinmura
ブロックデータの使い方
ブロックデータの使い方
Satoru Shinmura
外部連携の使い方(記事のインポート/エクスポート機能)
外部連携の使い方(記事のインポート/エクスポート機能)
Satoru Shinmura
エラーページの設定方法
エラーページの設定方法
Satoru Shinmura
お問い合わせ履歴の見方
お問い合わせ履歴の見方
Satoru Shinmura
お問い合わせ:各種設定の使い方
お問い合わせ:各種設定の使い方
Satoru Shinmura
テーマの設定方法
テーマの設定方法
Satoru Shinmura
ユーティリティ系ブロックについて
ユーティリティ系ブロックについて
Satoru Shinmura
メニュー系ブロックについて
メニュー系ブロックについて
Satoru Shinmura
スライダー系ブロックについて
スライダー系ブロックについて
Satoru Shinmura
ギャラリー系ブロックについて
ギャラリー系ブロックについて
Satoru Shinmura
サムネイル系ブロックについて
サムネイル系ブロックについて
Satoru Shinmura
シンプル系ブロックについて
シンプル系ブロックについて
Satoru Shinmura
お問い合わせモジュールの項目管理について
お問い合わせモジュールの項目管理について
Satoru Shinmura
お問い合わせモジュールについて:設定方法
お問い合わせモジュールについて:設定方法
Satoru Shinmura
TOPモジュールにおいてのブロック配置
TOPモジュールにおいてのブロック配置
Satoru Shinmura
レイアウト設定について
レイアウト設定について
Satoru Shinmura
TOPモジュールでのブロック作成:デザインブロックの使い方
TOPモジュールでのブロック作成:デザインブロックの使い方
Satoru Shinmura
TOPモジュールでのブロック作成:フリーブロックの使い方
TOPモジュールでのブロック作成:フリーブロックの使い方
Satoru Shinmura
TOPモジュールでのブロック作成:メニューの配置
TOPモジュールでのブロック作成:メニューの配置
Satoru Shinmura
記事の作成方法:ブロックモードを活用しましょう
記事の作成方法:ブロックモードを活用しましょう
Satoru Shinmura
More from Satoru Shinmura
(20)
ブロックデータの使い方
ブロックデータの使い方
外部連携の使い方(記事のインポート/エクスポート機能)
外部連携の使い方(記事のインポート/エクスポート機能)
エラーページの設定方法
エラーページの設定方法
お問い合わせ履歴の見方
お問い合わせ履歴の見方
お問い合わせ:各種設定の使い方
お問い合わせ:各種設定の使い方
テーマの設定方法
テーマの設定方法
ユーティリティ系ブロックについて
ユーティリティ系ブロックについて
メニュー系ブロックについて
メニュー系ブロックについて
スライダー系ブロックについて
スライダー系ブロックについて
ギャラリー系ブロックについて
ギャラリー系ブロックについて
サムネイル系ブロックについて
サムネイル系ブロックについて
シンプル系ブロックについて
シンプル系ブロックについて
お問い合わせモジュールの項目管理について
お問い合わせモジュールの項目管理について
お問い合わせモジュールについて:設定方法
お問い合わせモジュールについて:設定方法
TOPモジュールにおいてのブロック配置
TOPモジュールにおいてのブロック配置
レイアウト設定について
レイアウト設定について
TOPモジュールでのブロック作成:デザインブロックの使い方
TOPモジュールでのブロック作成:デザインブロックの使い方
TOPモジュールでのブロック作成:フリーブロックの使い方
TOPモジュールでのブロック作成:フリーブロックの使い方
TOPモジュールでのブロック作成:メニューの配置
TOPモジュールでのブロック作成:メニューの配置
記事の作成方法:ブロックモードを活用しましょう
記事の作成方法:ブロックモードを活用しましょう
カスタムCSSについて
1.
カスタムCSSについて hibariオンラインマニュアル テクニカル編 テーマ管理 > カスタムCSS
2.
①制作の本丸、ページや各ブロックにスタイルシートを設定しよう! 当CMSでは、⾃由なデザイン設計を⾏うため、初期テーマである「basic」には、必要最低 限のスタイルシートしか組み込まれていません。 まず、サイトの画⾯幅を決めるため、カスタムCSSの設計⽅法を⾒ていきましょう。 現在は左図のように画⾯幅は100%となっており、どのようなモニタでも全画⾯表⽰となっ ていますので、右図のようにサイドにスペースのあるサイトを⽬指していきましょう。 カスタムCSSについてテクニカル編 テーマ管理 > カスタムCSS
3.
②テーマグループにある「カスタムCSS」をクリックしましょう カスタムCSSについてテクニカル編 テーマ管理 > カスタムCSS CMS
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 ページ無制限 簡単 レイアウト変更 ブロック機能 コンテンツ管理 プレビュー 安⼼ バックアップ 時限公開機能 セキュリティ 権限&認証 詳細はこちらをご覧ください→
Download now