あなたはオンラインコースビジネスを運営する事業者として、Systeme.ioでページを再構築する際に、元のページと同じデザインに仕上げる方法が分からず困っていませんか？フォントサイズや背景色をどのように調べて設定すれば良いのか悩んでいるかもしれません。ここではChromeの検証機能を使って元のデザインを確認し、Systeme.ioで同じように再現する方法を解説します。
前回の記事でセクション、行、要素の順番ですべての要素を配置しました。テキストも画像も全て入れ終わった状態です。次にやることは装飾です。フォントのサイズや色、背景色などを調整して、元のページと同じ見た目に仕上げていきます。
Chromeの検証機能でフォントサイズと色を確認する
Chromeの場合、確認したい部分を右クリックして「検証」を選択すると、フォントサイズなどの情報がすぐに表示されます。
たとえば、このテキストのように「font-size: 18px」と出ていればSysteme.ioでも同じく18に設定します。次の要素が「font-size: 40px」なら40に、また別の箇所が28であれば28にする、といった具合です。元ページを右クリックして検証画面を開き、表示された値をSysteme.ioの設定欄に入力するだけなのでとても簡単です。
検証機能ではフォントサイズ以外にも、行間（line-height）や余白（padding/margin）も調べられます。例えば文字が詰まっている場合は、line-heightの値を調整することで読みやすくできます。余白を調整したい箇所はパディングを設定し、元ページに近い仕上がりになるようにします。
続いて、背景色を合わせていきましょう。真っ黒だと思っても、実は少しグレーがかっている場合もあります。背景色の値は検証機能の「background-color」を見ればわかりますが、分からなければカラーピッカーで近い色を指定してもいいです。Systeme.ioのセクション設定（歯車アイコン）から背景色を選び、完全な黒（#000）ではなく、#1d1d1dなど、少しグレーに寄せると元ページの雰囲気が再現できます。
テキストの色も同様に、元ページを見ながら、同じ色になるようにSysteme.ioで選んでいきましょう。カラー指定は16進数（カラーコード）で行うと間違いがなく確実です。検証機能で表示されるカラーコードをコピーして、そのまま貼り付ければ全く同じ発色になります。
このように、検証機能を使い各パーツのフォントサイズ・色・背景色・余白をチェックし、一つ一つSysteme.ioの設定値に入力・反映するだけで、元ページとデザイン面でもほとんど同じものが作れます。
テキストの配置と装飾の調整方法
現在テキストが中央揃えになっていますが、左揃えにしたい場合は、テキストをクリックして設定パネルを開き、「配置」オプションで左揃えを選択してください。
テキストの大きさも同じく編集パネルから調整できます。右揃え・中央揃え・左揃えの切り替えは、すべてテキスト要素の設定項目から簡単に行えますので、元ページを確認しながら同じ配置になるように設定してください。
テキストの配置だけでなく、太字や斜体、アンダーラインなどの装飾も簡単に調整できます。見出しを太字にしたり、強調したい部分をアンダーラインにしたりすることも、Systeme.ioのテキストエディタなら直感的に操作できます。元ページと同じ装飾を再現するのも難しくありませんので、安心して進めてください。
まとめ：Chromeの検証機能を使えばデザイン調整は簡単
ここまでSysteme.ioでフォントサイズと色を調整する方法を解説してきました。最後に要点を2つにまとめました。
- Chromeの検証機能で元ページのフォントサイズや色を確認し、そのままSysteme.ioに入力する。
- 背景色や文字色はカラーコードで指定、テキスト配置も設定パネルから簡単に変更できる。
