JIMDOクリエイターのサイトでは、サイトのデザインを調整する方法として、管理メニューのデザイン→スタイル設定とヘッダー編集のCSS設定の2種類の方法がありますよね。
普段デザインしていると、こんな状況になったことはないですか？
- フォントをオリジナルに変えたい
- 文字の太さを指定したい
- 見出しの文字サイズをまとめて細かく指定したい
こんなとき、CSSで変更ができる人なら、わざわざ管理メニューからデザイン→スタイル設定を開かなくてもソースコードを書いてしまったほうが早いと思うはずです。
ただ、スタイル設定があるのに、敢えてそれを使わずにCSSで設定してしまうのは大丈夫なの？と疑問に思う人もいるでしょう。
今回はデザインのスタイル設定とCSSの使い分けについて、方針が中々決められず作業に戸惑ってしまう方向けにどんな方針で設定をしたらいいかを詳しく解説したいと思います。
結論：理想はしっかり使い分けをした方が良い
結論としては、デザインのスタイル設定で出来る設定箇所にはCSSを使わず、スタイル設定でできない箇所をCSSで設定するのが理想です。
使い分けをした方が良い理由
主な理由としては、以下になります。
サイトの読み込み速度に影響が出る
スタイル設定をしている箇所にヘッダー編集のCSSでスタイルを上書きする場合、既存のJIMDOのスタイル設定を読み込み→CSSを読み込みという2回の読み込みが発生します。
ちょっとした設定であれば、読み込み速度への影響はわずかな誤差で済みますが、CSSへの記述が増えれば増えるほど、読み込みや応答速度も落ちていくので注意が必要です。
特に、JIMDOは画像やソースコードを軽量化するような機能がないため、出来ることなら余計なCSSの記述は避けたほうが良いでしょう。
CSSで設定したことを忘れたときに、修正や変更に時間のロスが発生する
サイトのデザインは、一度決めた後はしばらく変更することがなくなります。
なので、期間が空いてからデザインを調整するとなったときに、どうやって設定したかをつい忘れてしまいがちです。
更新のため頻繁にCSSを編集する、設定方法をきっちりまとめて管理している方なら大丈夫かもしれませんが、大抵の場合は「スタイル設定とヘッダー編集のどっちで設定したっけ？」と開発者ツールやヘッダー編集を探し回ることになり、無駄な作業時間が増えてしまう未来が予想できます。
長い目で見ると結構時間の無駄になるよね！
具体的な使い分け方の例
CSSで一番変更頻度の高い、見出しを例にするとこんな感じで使い分けるのが理想です。
| 要素 | デザイン→スタイル設定項目 | スタイル設定にない項目 |
| 大見出し(h1) | スタイルで設定 | CSSで設定 |
| 中見出し(h2) | スタイルで設定 | CSSで設定 |
| 小見出し(h3) | スタイルで設定 | CSSで設定 |
| h4 | 設定なし | CSSで設定 |
| h5 | 設定なし | CSSで設定 |
JIMDOクリエイターでは、大見出し～小見出しの3種類で既存のスタイル設定がありますよね。
ところがh4、h5といった更に下の階層の見出しは元々コンテンツ追加としての設定が用意されていないため、スタイル設定もありません。
なので大見出し～小見出しは、スタイル設定で出来る項目はスタイルで、設定にない項目はCSSで設定し、
h4以降の見出しは、全てCSSで設定するという使い分けになります。
| 要素 | スタイルできる設定内容 |
| フォント | JIMDOで選べるフォントのみ |
| フォントサイズ | 8px、9px、10px、11px、12px、13px、14px、15px、16px、18px、20px、24px、28px、30px、32px、34px、36px、38px、40px、44px、48px、50px、55px、60px、65px，70px、75px、80px、85px、90px、95px |
| 太字 | B（Bold） |
| 斜体 | 斜めにする |
| フォントカラー | 単色（RGBまたはカラーコード） |
| 行間幅 | 0.70、0.80、0.90、1、1.25、1.5、1.75、2 |
| 配置 | 左揃い、中央揃い、右揃い |
| 文字設定（アルファベットの大文字・小文字表示） | Abc、ABC、abc |
更に細かく見ていくと、デザイン→スタイル設定でできる見出しの設定項目は上記の表のみとなります。
そのため、上記にない以下のような要素をカスタマイズしたいときはCSSで編集する必要があります。
- JIMDOで選べないフォント
- 一覧にないフォントサイズ
- 数値単位で指定する文字の太さ
- フォントカラーのグラデーション
- 一覧にない行間幅
- 余白や開始位置等の細かい配置指定
- モバイルデバイス用のレスポンシブ調整
運用方針で迷わないようにするには
スタイル設定とCSSの使い分けで迷わないためには、先程の見出しの例のように、各設定箇所で出来ること、出来ないことを把握するために、スタイル設定→CSS設定の順に確認と設定を毎回行うのが理想です。
このフローをマイルールとして決めてしまい、その後はルールを変えずに運用し続ければ、反復効果も相まって運用管理方法が定着しやすくなります。
とはいえ、運用する人の性格やスキル、サイトの規模や運用状況によって相性が異なるため、全ての人にこの方法が正解というわけではありません。
先程の見出しはあくまでも一例ですが、見出し一つだけでもスタイルで設定できる箇所とできない箇所が結構あったと思います。
他にも文章や画像、背景、問い合わせフォームなど、スタイル設定が出来る箇所は沢山ありますが、すべてのスタイル設定で出来ること、出来ないことを把握するのは慣れていないととても大変です。
サイトの運用は長期的に継続してやっていくものなので、それを妨げるような負担やストレスの積み重ねが続いてしまうことはなるべく避けたいです。
なので、使い分ける作業が負担になるのであれば、以下のような方針でデザインを調整するのもありだと思います。
スタイル設定でできないことはやらない
スタイル設定では細かい調整や、本格的なアレンジをするにはやや物足りないところがありますが、それでも一応ちゃんとしたデザインは作ることが出来ます。
サイトのデザインにそこまでこだわらなくてもいい、きっちり管理するのは面倒という人であれば、思い切ってCSSを使わないのも一つの選択肢です。
全てのデザインをCSSで設定する
スタイル設定を使わないと割り切ってしまい、全てのデザインをCSSで設定してしまうのも一つの方法です。
これならどこで設定したか忘れたときに、ヘッダー編集とソースコードだけ見ればよくなるので、作業フロー比較的シンプルになります。
ただ、デメリットとしては、冒頭でも紹介した通り、CSSの設定が増えるほど読み込み速度が遅くなるので、その点は注意しておきましょう。
デザイナー・コーダーに完全委託する
事業規模がある程度大きくなって、サイト運用に予算を確保できる人であれば、デザイン部分の管理を全て外注委託してしまうのも一つの方法です。
この方法であれば、変更したいときは外注先に要望を伝えるだけで良くなるので、自分で細かい管理をする必要がなくなります。
またその分、コンテンツ制作に時間や労力を集中できるので、サイト運用での成果アップを加速できるのも大きなメリットになります。
まとめ
スタイル設定とCSSの使い分けは以下の4つの方針の中から自分に合う方法を選びましょう。
- スタイル設定で出来る設定箇所にはCSSを使わず、できない箇所だけCSSで設定してきっちり管理する
- デザインに拘りがなく、きっちり運用管理が面倒な場合はCSSを使わないのも一つの手段
- 小規模の調整ならデメリットを理解した上で、CSSのみでデザイン設定を行うのもあり
- 予算があれば外注委託で管理を任せて手間をかけない
おわりに
今回はJIMDOクリエイターサイトのデザインで出来るスタイル設定とCSS設定の使い分け方について、解説しました。
コーディングやサイトの作成を独学でやっていくと、今回のような些細な疑問が結構出てくると思いますが、中々解決できずにスッキリしないことが多いですよね。
私自身も始めたばかりの頃は、こういう細かい部分に気を取られて、なかなか上手くいかない時期がありました。
運用方針が決められないと、他の作業にも手を出せず停滞してしまうこともあるので、サイト運用では小さなことにも一つずつ向き合っていくことが大事ですね。