編集者注：以下の記事は、TidBits Publishingからダウンロード可能な、最近出版された電子書籍『Take Control of iWeb: iLife '08 Edition』からの抜粋です。133ページのこの電子書籍は、iWebのすべてのページタイプに加え、iPhotoアルバム、YouTubeビデオ、Googleマップ、Google AdSense広告、Googleドキュメントに連携するフォームなどの特別な要素も活用しながら、iWebでプロフェッショナルなウェブサイトを作成する方法を解説しています。
ウェブサイトに凝ったグラフィックやポッドキャストを掲載していても、テキストこそがウェブサイトの核であり、注目に値します。『Take Control of iWeb: iLife '08 Edition』からの抜粋であるこの記事では、テキストの操作に関連する様々なテクニックを網羅的に解説しています。テキストの見栄えを良くする方法、High ASCII文字による問題の回避方法、ハイパーリンクの作成方法などをご紹介します。
テキストを輝かせる
iWebのプロが作成したテンプレートは素晴らしいですが、ページをより目立たせるために、テキストの見た目をカスタマイズしたい場合もあるでしょう。やり過ぎは避けたいところですが、テキストの色やスタイルを変更したり、不透明度や回転などの効果を適用したりして、サンプルページに華やかさを加えたいと思っています。
フォント
目立たせたい特別な見出しがある場合は、別のフォントの使用を検討してください。この電子書籍の別の箇所で、フォントを使いすぎることの危険性について警告していますが、この基本的なルールは今でも当てはまります。しかし、特別なフォントをうまく使うことで、Webページの見た目は確実に変わります。例えば、この本と連動して構築したサイトのタイトルテキスト「このサイトについて」を、親しみやすく目立つように変更することにしました。テキストをダブルクリックして選択し、ツールバーの「フォント」ボタンをクリックしました。フォントパネルをしばらく操作しているうちに、理想の見た目を実現できるフォント（Bernard MT Condensed）を見つけました。
サイズ
ウェブページのテキストでは、サイズが重要です。見出しやタイトルは本文よりも大きくする必要があります。フォントパネルを使わずにテキストサイズを変更するには、テキストを選択し、Command + マイナスキーでテキストを小さく、Command + プラスキーでテキストを大きくします。フォントパネルにはスライダーも用意されており、テキストのサイズを瞬時に変更できます。
色
色を追加することは、ウェブサイトのテキストをカスタマイズする簡単で、通常は目立たない方法です。サイト全体で一貫したカラーテーマを使用することをお勧めします。調和が取れ、テキストが読みやすくなる色を選びましょう。私のサイトでは、タイトルと見出しの一部をテーマの他の部分と同じバーントシェンナ色に変更することで、ほんの少し色を加えました。
テキストの色を変更するには、テキストを選択し、ツールバーの「カラー」ボタンをクリックしてカラーパネルを開きます。いくつかの方法で色を選択でき、明るさと不透明度も調整できます。
スタイル
テキストスタイルも豊富に用意されています。ここで言うスタイルとは、「フォーマット」メニューからテキストに適用する一般的な機能、つまり太字、斜体、下線、アウトラインのことです。iWebでは、「フォント」パネルでこれらのシンプルなスタイルに加え、追加機能も利用できます。
フォントパネルを表示するには、ツールバーの「フォント」ボタンをクリックします。フォントパネル上部のボタンは強力なツールです。これらのボタンを使って、テキストに二重下線、取り消し線、二重取り消し線を引くことができます。これらのスタイルはHTMLではコーディングできないため、iWebではテキストの上に透明なグラフィックを重ねて、特殊な下線と取り消し線効果を作成します。
選択したテキストに影を付けるには、「影」ボタンをクリックします。影ボタンの右側にある3つのスライダーで影の不透明度、ぼかし、オフセットを調整し、ダイヤルで影の方向を調整します。これらのコントロールを少し操作して、使いこなせるようになるまで少し時間を取ってみてください。効果をより簡単に確認できるよう、少なくとも24ポイントのテキストで作業することをお勧めします。
配置と間隔
テキストの配置と間隔は、Webページの見た目を大きく変える可能性があります。これらの書式設定は、テキストインスペクタで制御できます。
配置とは、テキストボックスの枠線に沿ってテキストがどのように配置されるかを指します。テキストは左揃え、中央揃え、右揃えから選択できます。また、両端揃え（左右の枠線にきちんと揃える）も可能です。両端揃えのテキストは、段落の両端が揃い、ギザギザがないため、滑らかでプロフェッショナルな印象を与えます。
テキストの間隔によってページの見た目も変わります。
- 文字間隔：タイポグラフィの世界ではカーニングと呼ばれる文字間隔は、個々の文字の間隔を定義します。テキストインスペクタの文字スライダをドラッグして、この間隔を調整します。私は通常、この設定をデフォルトの0%のままにしていますが、テキストを行いっぱいに埋めるためにパーセンテージを上げることもあります。
- 行間：このタイプの書式設定は、従来の植字工が行間を調整するために活字の行間に配置する鉛の断片にちなんで、リーディング（「リーディング」と発音します）とも呼ばれます。行間を調整するには、調整したい段落をクリックし、テキストインスペクタの「行」スライダをドラッグします（右にスライドするほど行間が広くなります）。
- 段落前後の間隔：段落前と段落後の間隔のスライダーを使って、段落の前後にどれだけの間隔を設けるかを指定します。このツールは、段落に多くのテキストが配置されている長いWebページに役立ちます。
- 余白：最後に、「余白の挿入」スライダーを使って余白を調整できます。余白とは、テキストボックスの端と文字の間のスペースのポイント数を指します。
背景塗りつぶし
背景塗りとは、テキストの背景を埋める色または画像のことです。背景塗りを適切に設定することで、テキストを目立たせ、読者の注意を重要な情報に引き付けることができます。iWebの背景塗りは、特定のテキストオブジェクトに適用されます。つまり、いくつかの単語をハイライトして背景塗りを適用することはできません。そのような場合は、それらの単語を別のテキストオブジェクトに分割する必要があります。
背景塗りつぶしを適用するには、テキストブロックを選択し、「インスペクタ」ボタンをクリックして、ボタンをクリックします。グラフィックインスペクタの「塗りつぶし」ポップアップメニューで利用できる塗りつぶしの種類を見てみましょう。
•カラーフィル：ご想像のとおり、テキストオブジェクトの背景を色で塗りつぶします。色を変更するには、カラーウェルをクリックしてカラーパネルを開きます。単色を選択すると、ウェルは単色になります。色の不透明度を変更してわずかに透明にすると（カラーパネルの不透明度スライダーを参照）、カラーウェルは右の画像のように2トーンになります。
•グラデーション塗り：グラデーション塗りは、2色間の滑らかな変化を作成し、テキストの背後に配置します。「塗り」ポップアップメニューから「グラデーション塗り」を選択すると、グラフィックインスペクタの「塗り」領域に2つの新しいカラーウェルが追加されます。1つはグラデーションの開始色用、もう1つは終了色用です。
右の図では、どちらの色も透明になっています（そのため、手旗信号のような長方形が描かれています）。カラーウェルの横にある両端矢印をクリックすると、グラデーションの上または左に配置される色を切り替えることができます。また、「角度」ダイヤルを操作してグラデーションの方向を決めたり、2つの小さな矢印のいずれかをクリックして垂直または水平のグラデーションを素早く設定したりすることもできます。
•画像塗りつぶし：この塗りつぶしでは、テキストの背後に画像が表示されます。控えめに使用することをお勧めします。画像塗りつぶしは、画像が背景として使用され、ボタンのラベルが大きく太字になっているボタンに適しています。ポップアップメニューから「画像塗りつぶし」を選択すると、グラフィックインスペクタの「塗りつぶし」領域が少し変わります。2つ目のポップアップメニューでは、背景塗りつぶしとして画像をどのように使用するかを設定し、「選択」ボタンで画像を選択できます。
•色付き画像塗りつぶし：画像塗りつぶしと同様に、色付き画像塗りつぶしではカラーウェルが追加され、色と不透明度を選択できます。例えば、白黒写真に茶色の色付き部分を加えて、セピア色のような画像を作成できます。
テキストの回転
テキストは水平である必要はありません。テキスト回転機能を使えば、テキストを好きな角度に配置できます。上下逆さまにすることも可能です！ほとんどのウェブサイトではテキストを上下逆さまにすることはお勧めしませんが、タイトルや見出しを少し傾けるだけで、単調なページにドラマチックな効果を加えることができます。
テキストブロックを回転するには:
- テキストオブジェクトをクリックして選択します。端にハンドルが表示されます。
- Commandキーを押しながら、ポインタをハンドルの上に移動します。ポインタが両端矢印のバッジに変わり、テキストを回転できることを示します。
- Commandキーを押したままハンドルをドラッグすると、テキストを回転させることができます。テキストボックスの角度（度）を示すヘルプヒントが近くに表示されます。
回転したテキストに他のテキストエフェクトを適用して、インパクトを高めることもできます。下のスクリーンショットは、回転したテキストと影を使ってビデオポッドキャストのページのラベルを作成した結果です。
注：テキストがテキストでなくなるのはいつでしょうか？それはグラフィックの場合です！回転、影、レイヤー、または標準のWebフォント以外のフォントを使用すると、テキストオブジェクトはポータブルネットワークグラフィック（.png）ファイルに変換されます。iWebで変更することはできますが、ページをWebに公開すると、テキストは画像になります。
重ね着
iWeb には、もう一つのレイアウトツール、レイヤー機能があります。下の画像は、レイヤー機能の実際の例を並べて示しています。
テキストとグラフィックは仮想3D空間内で移動できます。一部のアイテムは下層に対して上下に移動できます。Webページをレイヤーケーキと考えてみてください。下層には画像、上層にはテキストやその他の画像を配置できます。上層は不透明にして下層の一部を遮ることも、透明にして下層を遮ることなく表示することもできます。
下のスクリーンショットは、ポッドキャストページに作成した興味深いエフェクトです。まず、後ろに大きなポッドキャストを配置し、テキストオブジェクトとして独立させました。カラーパネルの不透明度スライダーを使って、わずかに透明にしました。次に、テキストオブジェクトをコピー＆ペーストし、コピーしたテキストのフォントサイズを少し小さくし、透明度を少し下げて、コピーしたテキストを前のテキストの前に重ねました。これを4回繰り返しました。
注：現在のAppleソフトウェアのほとんどはUnicodeに対応しており、Mac OS Xがサポートする数十言語のテキストをすべて受け入れます。iWebはその好例です。iWebは、ほとんどの最新ブラウザで英語やラテン文字以外のテキストが正しく表示されるようにWebページをエンコードします。
アラビア語やヘブライ語などの言語で右から左に書くテキストをキーボードで入力することは、iWeb では実用的には困難ですが、別のアプリケーションからテキストをコピーして iWeb に貼り付けると満足のいく結果が得られる場合があります。
[スティーブ・サンデはRaven Solutions, LLCの社長であり、Podbus.comポッドキャストホスティングサービスを運営しています。また、The Center for Requirements Excellenceでソフトウェア要件定義の難解な技法を教えています。彼の最新著書は『Take Control of iWeb: iLife '08 Edition』（TidBits Publishing Inc.、2008年）です。 ]
