今回の目標BiNDでテンプレートからサイトを作ってみたところ、テンプレートのままだと「ちょっと文字が小さくて読みづらい」なんてことはないでしょうか。ブロックエディタの編集で文字を大きくすることもできますが、ブロックごとに変更するのは手間がかかります。後からやっぱり戻したいなんて場合も面倒ですので、サイト全般に関わるデザインの変更はCSS編集機能「Dress」でコントロールしましょう。Dressを使えば、文字の大きさを一括して変更できます。その手順さえ覚えれば、同様の方法で文字の色や書体もまとめて変更することができます。マスターしておきましょう!Dressで文字のサイズを変更する手順それでは早速、具体的な手順を説明します。はじめに新Dressに対応したサイトテンプレートを使ってサイトを作成しておきます。Dressの編集画面を表示する次にサイトエディタで変更したいスタイルテキストの要素が入っているページを開きます。画面上部にある「デザイン編集」ボタンをクリックすると、Dress画面が開きます。画面左側のプレビューには、部分の名前を示したラベルが表示されているので、変更したい部分をクリック。ラベルが表示されていない場合は、画面上部にある「ラベルを表示」の横にあるスイッチを切り替えて、プルダウンメニューから「パーツ」を選択しましょう。今回は、「メインエリア」の「本文」の文字スタイルを変更します。本文」項目をクリックします。変更するデザイン要素を選択する「スタイル一覧」に、「メインエリア」の「本文」に対して設定されているデザイン要素が表示されます。「文字サイズ」をクリックします。変更したい箇所から、要素(セレクタ)を探して選ぶ方法は以下の記事を参照してください。「スタイル一覧」に編集したい項目がない場合は、編集エリア上部にある「+(スタイル追加)」ボタンをクリックして「文字サイズ」などを選んで追加します。スタイル追加で、「文字色」や「フォント」を選択して、それらを設定することも可能です。「文字サイズ」の設定画面が表示されたら、「共通の設定」に数値と単位を入力します。この値がPCとタブレットでの表示の設定となります。見え方はプレビューに反映されるので、チェックしましょう。「共通の設定」の下にある「モバイル向けの設定」は、表示画面が横幅640ピクセル以下の場合、つまりスマホでの表示の設定です。プレビュー上部にあるボタンでスマホ表示に切り替えて、確認しながら設定しましょう。PCなどと共通の設定でいい場合は、スイッチをオフにすればOKです。文字サイズを入力したら編集エリア下部にある「完了」ボタンをクリック。「スタイル一覧」に戻ります。保存してデザインをチェック文字サイズ以外に「行の高さ」など、変更したい項目がある場合、クリックして設定しましょう。戻る」をクリックします。最後に編集エリア下部にある「保存」ボタンをクリックすると、Dressの変更が保存されます。「閉じる」ボタンをクリックしたら作業は完了です。サイトエディタに戻ったら、変更した設定がサイト全体に適用されているはずなので、ほかのページなどを開いてデザインを確認してみましょう。本文の文字サイズを変更した結果、見出しなどとのバランスが崩れてしまう場合があります。一般的に、見出しと本文の文字サイズは、ある程度の差がないと読みづらいデザインと言われていますので注意しましょう。あと、モバイルでの表示をチェックするのも忘れずに!設定が効かない場合は?ブロックDressについて上で書いた手順でDressを開いてパーツをクリックすると、「ブロックDressが設定されています」というインフォメーションが表示されることがあります。これは、その部分のブロックにだけ適用されるDressが設定されているという意味で、そのままDressで設定しても変更できません。その場合は、次のような手順でスタイルを変更します。Dressを閉じてサイトシアターに戻り、画面上部の「ページ編集」ボタンをクリック。対象となるブロックをブロックエディタで開いて、「設定」タブをクリックします。「ブロックデザイン」の「ブロック用Dressテンプレート」にサイト全体とは別のDressテンプレートが設定されているはずです。その横にある「Dressを編集」をクリックすれば、Dressが開いて、サイト全体と同じ要領で編集できます。文字スタイルはUIのかなめ今回行った文字の大きさの変更は、前回のカラーの変更のような、サイトのイメージをガラリと変えるという作業ではありませんが、サイトの見やすさ、使い勝手の良さにつながるデザインの重要なポイントとなります。CAMPで最も読まれた記事は?コンセプト。