Dressを使って”脱テンプレート”!! サイト全体の文字サイズを一発で変更する方法

今回の目標

BiNDでテンプレートからサイトを作ってみたところ、テンプレートのままだと「ちょっと文字が小さくて読みづらい」なんてことはないでしょうか。

ブロックエディタの編集で文字を大きくすることもできますが、ブロックごとに変更するのは手間がかかります。後からやっぱり戻したいなんて場合も面倒ですので、サイト全般に関わるデザインの変更はCSS編集機能「Dress」でコントロールしましょう。

Dressを使えば、文字の大きさを一括して変更できます。その手順さえ覚えれば、同様の方法で文字の色や書体もまとめて変更することができます。ぜひマスターしておきましょう！

Dressで文字のサイズを変更する手順

それでは早速、具体的な手順を説明します。はじめに新Dressに対応したサイトテンプレートを使ってサイトを作成しておきます。

Dressの編集画面を表示する

次にサイトエディタで変更したいスタイルテキストの要素が入っているページを開きます。
画面上部にある「デザイン編集」ボタンをクリックすると、Dress画面が開きます。

文字サイズを変更したい部分を選択

画面左側のプレビューには、部分の名前を示したラベルが表示されているので、変更したい部分をクリック。もしラベルが表示されていない場合は、画面上部にある「ラベルを表示」の横にあるスイッチを切り替えて、プルダウンメニューから「パーツ」を選択しましょう。

今回は、「メインエリア」の「本文」の文字スタイルを変更します。画面右側の編集エリアの表示が「選択項目」の「詳細デザイン」に切り替わったら、「メインエリア > 本文」項目をクリックします。

変更するデザイン要素を選択する

「スタイル一覧」に、「メインエリア」の「本文」に対して設定されているデザイン要素が表示されます。「文字サイズ」をクリックします。

変更したい箇所から、要素（セレクタ）を探して選ぶ方法は以下の記事を参照してください。

デザインが設定されているセレクタの探し方《Dress初級編》

デザインが設定されているセレクタの探し方《Dress上級編》

「スタイル一覧」に編集したい項目がない場合は、編集エリア上部にある「＋（スタイル追加）」ボタンをクリックして「文字サイズ」などを選んで追加します。
スタイル追加で、「文字色」や「フォント」を選択して、それらを設定することも可能です。

文字サイズの設定を変更

「文字サイズ」の設定画面が表示されたら、「共通の設定」に数値と単位を入力します。この値がPCとタブレットでの表示の設定となります。見え方はプレビューに反映されるので、チェックしましょう。

「共通の設定」の下にある「モバイル向けの設定」は、表示画面が横幅640ピクセル以下の場合、つまりスマホでの表示の設定です。
プレビュー上部にあるボタンでスマホ表示に切り替えて、確認しながら設定しましょう。
PCなどと共通の設定でいい場合は、スイッチをオフにすればOKです。

文字サイズを入力したら編集エリア下部にある「完了」ボタンをクリック。「スタイル一覧」に戻ります。

保存してデザインをチェック

文字サイズ以外に「行の高さ」など、変更したい項目がある場合、クリックして設定しましょう。設定の変更が終わったら、編集エリア下部にある「← 戻る」をクリックします。

最後に編集エリア下部にある「保存」ボタンをクリックすると、Dressの変更が保存されます。「閉じる」ボタンをクリックしたら作業は完了です。サイトエディタに戻ったら、変更した設定がサイト全体に適用されているはずなので、ほかのページなどを開いてデザインを確認してみましょう。

本文の文字サイズを変更した結果、見出しなどとのバランスが崩れてしまう場合があります。一般的に、見出しと本文の文字サイズは、ある程度の差がないと読みづらいデザインと言われていますので注意しましょう。

あと、モバイルでの表示をチェックするのも忘れずに！

設定が効かない場合は？ブロックDressについて

上で書いた手順でDressを開いてパーツをクリックすると、「ブロックDressが設定されています」というインフォメーションが表示されることがあります。

これは、その部分のブロックにだけ適用されるDressが設定されているという意味で、そのままDressで設定しても変更できません。その場合は、次のような手順でスタイルを変更します。

いったんDressを閉じてサイトシアターに戻り、画面上部の「ページ編集」ボタンをクリック。対象となるブロックをブロックエディタで開いて、「設定」タブをクリックします。
「ブロックデザイン」の「ブロック用Dressテンプレート」にサイト全体とは別のDressテンプレートが設定されているはずです。その横にある「Dressを編集」をクリックすれば、Dressが開いて、サイト全体と同じ要領で編集できます。

文字スタイルはUIのかなめ

今回行った文字の大きさの変更は、前回のカラーの変更のような、サイトのイメージをガラリと変えるという作業ではありませんが、サイトの見やすさ、使い勝手の良さにつながるデザインの重要なポイントとなります。

サイトのターゲットとなる年齢層やユーザーが利用するデバイスなどを意識して調整することで、ウェブの価値を高めることができますので、ぜひトライしてみてください！

新しいDressをBiNDupで試してみる