Webサイトはいくつものコード・言語を使用して作成します。
テキストや画像はHTML言語で指定しまして、そのテキストや画像に対して装飾や配置、大きさを指定する為にCSSを使用します。
CSSはコンテンツに余白を設けたり複数列に分けたりあるいはアニメーションを加えたりなど様々な装飾を設定することができる便利なものですが、正しく設定しないと意図した箇所以外にも設定内容が反映されたりデザインが崩れることがあります。
CSSを使用する際には後述する注意点をよく理解しバックアップを取るなどご自身で元に戻すための準備も行った上でご利用ください。
FunMakerにおける装飾や配置・大きさなどの調整
FunMakerではCSSを用いなくてもWebサイトの装飾やレイアウトの調整を行えるよう様々な機能を設けています。
FunMakerで設けている各機能は選択式で利用できデザインの崩れも生じないなかで、多様なデザインを実現しますので、装飾や配置・大きさを変更したい場合にはまずはFunMakerで設けている各機能を使用することを徹底して検討し、FunMakerで設けている機能で設定できないもののみCSSで設定するようにしましょう。
FunMakerで設けている装飾や配置・大きさなどの調整に用いる機能
- ヘッダーやサイドバー、フッターやコンテンツ部分の全ページで共通して変更する場合 : サイトデザイン
- 各ページでコンテンツ部分の配置や配色を変更したい場合 : 各カセットのデザイン調整機能
CSSでデザインを調整する際の手順
意図したとおりに設定できなかった場合に元の状態に戻せるようバックアップを取った上で、レイアウトの自由調整機能を用いて設定します。
CSSのバックアップの取り方
レイアウトの自由調整を開き、記載されている全てのコードをテキストエディタに貼り付けて保存してください。
CSSの設定に伴い意図しない状況になった場合、元の状態に戻す機能はFunMakerでは設けておらず、当作業でのこしたバックアップデータを使って戻すことになります。
作業の途中でも変更の記録を残したい場合には重ねてバックアップデータを取りましょう。
レイアウトの自由調整機能の使い方
レイアウトの自由調整機能はその他機能>>レイアウトの自由調整で編集画面を開いて使用します。
編集画面の開き方の詳細はマニュアル レイアウトの自由調整の使い方 をご参照ください。
CSSとはについての説明は以上です。