HTMLエディタでテキストのフォントや色を変更する

弊社のウェブサイトテンプレートを元に、今後、サイトをブラッシュアップしていくためには、テキストの色やフォントスタイル等を変更する必要が出てくるでしょう。 それを行うためには、いくつかの方法があります。 テキストまたは単語の一部を変更する場合には、次の手順に従ってください。 変更したいテキストを選択します。

Adobe Dreamweaverで作業している場合は、[プロパティ]パネルでテキストのプロパティを確認、また変更ができます。プロパティパネルが表示されていない場合は、トップメニューから”ウィンドウ/プロパティ”を選択して表示します。
dw_toolbar

Dreamweaverのプロパティパネル

テキストのプロパティを部分的に変更することは簡単です。 しかし、ページ全体のテキストの色を変更する場合、具体的には、ウェブテンプレートとテキストの基本のカラー配色を変更したり、新しいウェブサイトのイメージに合ったカラーに合わせる必要がある場合には、CSSを使用しなければいけません。

ページ全体、または特定のタグのテキスト属性を変更するには、CSS(Cascade Style Sheets)を使用します。スタイルシートの技術を利用することは、将来的に、ブラウザごとの新しいバージョンに互換性を持たせるために、W3C(ワールドワイドウェブコンソーシアム)標準で推奨されています。 利用するには、2つの方法があり、1つは、CSSファイルを別に作成し、HTMLにリンクさせて使用する方法と、もう1つは、HTMLコードに直接スタイルを置くという方法があります。

あなたがAdobe Dreamweaver CS5等を使用しているなら、メニューバーの「ファイル」から「新規」を押し、新規作成から「CSS」を選択するとエディター画面を開くことができます。 プルダウンから編集するタグ、クラス、IDなどセレクタータイプをを選択し、編集対象のセレクター名を入力をし、OKを押すと、プロパティ編集画面が表示されます。 その画面から変更したいプロパティを編集できます。

変更したいスタイルをダブルクリックします。ダイアログの下部に表示されるフォントボタンを選択します。 そこですべてのテキストプロパティを変更できます。

HTMLについてある程度知識がある方は、コードタグに直接スタイルを置くこともできます。 例えば、リンクの色を赤色に変更したい場合は、タグに以下のコードを追加します:

<a href="url" style="color:#FF0000">参照テキスト</a>

テーブルセルのテキストサイズを11pxに変更したい場合は、tdタグ内に次のコードを追加する必要があります:

<td style="font-size:11px">セル内容</td>

Comments are closed.