スタイルつきテキスト

スタイルつきテキストは、RapidWeaer で最も幅広く使えるページタイプです。スタイルつきテキストページでは、HTML の知識がなくても、スタイルつきテキストはもちろん、イメージやムービー入りのページが簡単に作成できます。ですが、ページの能力を拡張するため必要に応じて HTML を使いたい場合もあるでしょう。書式メニューを使えば、選択したテキストのフォントやスタイルを変更したり、一般的な HTML タグを適用できます。イメージやファイル、ムービーは、Finder からコンテンツエリアにその項目をドラッグするだけで追加できます。

スタイルつきテキストページタイプではスタイルつきテキストとメディアファイル、HTML を組み合わせたページが作成できます
スタイルつきテキストページ - メインウインドウ


スタイルつきテキストページタイプのコンテンツエリアは以下に対応しています:

  • テキスト(スタイルつき、およびプレイン)
  • イメージ(PNG、GIF および JPEG)
  • ムービー(QuickTime)
  • ファイル(.zip、 .pdf、 .sit, など)

テキストにスタイルをつける

書式メニューを使ってテキストにスタイルをつけることができます。ワープロやテキストエディットを使った経験がおありなら、RapidWeaver でテキストにスタイルをつける作業も問題なく行えるでしょう。編集モードに切り替えたら、コンテンツとなるテキストを入力またはページとして、任意のテキストを選択して書式メニューから適用する書式を選択します。

書式メニューでテキストにスタイルをつけます
スタイルつきテキストページ - 書式メニュー


書式メニューにあるオプションを使って、ページコンテンツの外観をコントロールします。RapidWeaver では "Web セーフ" と見なされているフォントのみを書式メニューで提供しています。

NOTE:テキストのスタイルを設定すると、RapidWeaver では実際にはリスト形式で複数のフォントが適用されています。ですので閲覧者のマシンに指定したのと同じフォントがインストールされていない場合は、リストに記述されている次のフォントが使用されます。例えば、テキストに Arial を設定すると、RapidWeaver では次のフォントリストが適用されます:"Arial, Verdana, Helvetica, Sans-serif"。閲覧者のマシンに第一候補のフォント(この場合は Arial )がインストールされていない場合、閲覧者のブラウザはフォントリスト中で次に指定されたフォントを使ってテキストを表示します。


書式メニューに用意されたオプションは以下の通りです:

書式メニューオプション 説明
ボールド 選択したテキストをボールドにしたり、ボールドを解除します。キーボードショートカットは Command + B です。
イタリック 選択したテキストをイタリックにしたり、イタリックを解除します。キーボードショートカットは Shift + Command + I です。
アンダーライン 選択したテキストにアンダーラインをつけたり、アンダーラインを解除します。キーボードショートカットは Command + U です。
Web セーフフォント 使用できる Web セーフフォントのサブメニューを表示します。選択したテキストに適用するフォントをサブメニューから選びます。
大きく 選択したフォントを1サイズ大きくします。
小さく 選択したフォントを1サイズ小さくします。
カラーパネルを表示 標準のカラーピッカーを開きます。選択したテキストにカラーを適用できます。
左揃え/中央揃え/右揃え 公開時に選択したテキストを左、中央、または右に揃えます。
書式を無視 スタイルつきテキストページにまとまった HTML や Javascript をペーストするとき、追加したコードの部分をまとめて選択して書式メニューから「書式を無視」を選択します。RapidWeaver でページが生成されるとき、そのコードの部分はコードとして書き出されます。
書式を消去 選択したテキストから書式設定を削除し、フォントやスタイル属性をすべて消去します。テキストのフォントとスタイルは使用しているテーマのデフォルトに戻ります。
HTML 頻繁に使用する HTML 書式オプションのサブメニューを表示します。選択したテキストに適用するオプションをサブメニューから選びます。詳しくは下記の「HTML とスタイルつきテキストを組み合わせる」セクションを参照してください。

イメージを追加

イメージをページに追加するには、Finder からコンテンツエリアにその項目をドラッグするだけです。対応するイメージのファイル形式は PNG、GIF および JPEG です。他のファイル形式のイメージを追加すると、公開したページでは埋め込みリンクとして表示されます。

TIP:PNG、GIF および JPEG 形式のイメージを埋め込みリンクにしたい場合は、まずページアセットに追加して、「リンクを追加」ボタンを使ってリンクを作成します。. テキストにリンクを設定する詳しい解説は、テキストやイメージにリンクを追加セクションを参照してください。


スタイルつきテキストページに追加したイメージはメディアインスペクタで参照できるようになります。メディアインスペクタでは、イメージを拡大/縮小したり、回転、ボーダーやシャドウなどの効果を適用できます。. イメージにリンクを設定する解説は、テキストやイメージにリンクを追加セクションを参照してください。

ムービーを追加

QuickTime ムービーをページに追加するには、Finder からコンテンツエリアの希望する位置にその項目をドラッグします。「ドラッグした項目のコンテンツをテキストに中に挿入しますか?」と尋ねるダイアログボックスが表示されます。選択できるオプションとして、「エイリアス」、「コピー」および「キャンセル」の3つのボタンが表示されます。

QuickTime ムービーを追加するときは、そのリンクを作成するか、それ自体をページに追加するかを選択できます
スタイルつきテキストページ - QuickTime ムービーを追加


エイリアス」ボタンをクリックすると、RapidWeaver がハードディスク上の QuickTime ムービーファイルを参照するリンクが作成されます。これによりサイトのプロジェクトファイルのサイズを小さく抑えることができます。しかしムービーファイルをハードディスクの別の場所に移動したり削除してしまうと、次にプロジェクトファイルを開いたときにはムービーファイルへのリンクが切れてしまいます。スタイルつきテキストページに QuickTime ムービーをエイリアスとして追加するなら、ハードディスクの決まった場所に Web サイト用ソースファイルの保管先を作成することをご検討ください。将来も移動せず固定した場所を参照するエイリアスならば、スタイルつきテキストページに作成したリンクも切れる心配がありません。

TIP:QuickTime ムービーのエイリアスを作成するのには別の利点もあります。例えば、Web サイトで公開した後にムービーを編集したくなったとします。このときムービーに変更を加えるだけで次回の Web 公開時には変更が反映されます。編集したムービーがハードディスクの同じ場所に元と同じ名前で保管されている限り、そのムービーが入ったページに変更を加える(またはそのページに「変更ありマークをつける」)と、公開時には編集したムービーの内容が反映されます。


「コピー」ボタンをクリックすると、QuickTime ムービーが直接スタイルつきテキストページ中に複製されます。これによりプロジェクトファイルはより大きくなりますが、元のムービーファイルを別の場所に移動しても、公開する Web サイトには影響しません。

NOTE:スタイルつきテキストページに上記の方法で追加できるのは QuickTime 形式のムービーだけです。またこのとき QuickTime ムービーは自動的に中央揃えで配置されます。他のファイル形式のムービーは HTML の埋め込みリンクタグで追加されます。


イメージにテキストを回り込ませる

テキストの先頭にイメージを配置して、テキストをそのイメージに回り込ませるには、イメージを選択して書式メニューの HTML サブメニューから「イメージを左揃え」または「イメージを右揃え」を選択します。プレビュータブをクリックし、期待した通りにテキストがイメージに回り込んでいるかどうかを確認し、必要に応じて調整します。

また、以下のような CSS <div class> タグを使ってイメージにテキストを回り込ませることも可能です:

<div class="image-left">ここにイメージを配置</div>
<div class="image-right">ここにイメージを配置</div>

テキストやイメージにリンクを追加

テキストやイメージに E-Mail アドレスや URL などのリンクを追加するには、テキストまたはイメージを選択し、メインウインドウ左下の「リンクを追加」ボタンをクリックします。

スタイルつきテキストページでリンクを作成するには「リンクを追加」ボタンをクリックします
スタイルつきテキストページ - リンクを追加


選択したテキストまたはイメージのリンク先を設定するウインドウが開きます。リンク先は、現在作成している RapidWeaver プロジェクトファイルの他のページから選択するか、E-Mail アドレスおよび他のサイトの URL を入力して指定します。ページアセットに項目を追加している場合は、ページアセットのリストから項目を選択することも可能です。リンクのターゲットを設定したら、リンク先を現在のウインドウで開くか、新規ウインドウで開くかを指定します。

ダウンロード用ファイルを追加

コンテンツエリアのお好きな位置に .pdf、.zip、.doc およびその他のファイル形式のファイルをドラッグアンドドロップすると、公開したページでは自動的にそのファイルへのリンクが作成されます。閲覧者はそのリンクをクリックすればファイルがダウンロードできます。

HTML や Javascript とスタイルつきテキストを組み合わせる

スタイルつきテキストページには HTML や Javascript コードを併記することができます。このとき RapidWeaver が適切にコードの部分を判別できるように、そのブロックにマークをつける必要があります。それがコードであるというマークをつけるには、追加したコードの部分をまとめて選択して書式メニューから「書式を無視」を選択します。

また書式メニューの HTML サブメニューを使えば、書式の一般的な HTML タグを適用できます。

書式 > HTML サブメニューを使って書式の一般的な HTML タグを適用できます
スタイルつきテキストページ - HTML サブメニュー


テキストやオブジェクトを選択し、書式メニューから HTML サブメニューのオプションを選択して適用します。例えば、コンテンツエリアに配置したイメージの右側にテキストを回り込ませるには、イメージを選択して「イメージを左揃え」を選択します。また、テキストの一部分を目立たせるには、その部分を選択して「引用」を選択します。

テキストをペースト

他のテキストエディタやワープロからテキストをコピーし、スタイルつきテキストページに直接ペーストできます。ですが、このようなテキストには Web で安心し使えないフォントやフォーマットが含まれている場合があります。ペースとしたテキストがお使いのコンピュータでは正常に表示されても、Web サイトの訪問者の側ではきれいに表示されない可能性があります。

他の書類からコピーしてきたテキストを使う場合、このような事態を避けるために、ペーストするときに Option キーを押しながら編集メニューから「書式なしテキストとしてペースト」を選択します(または Option + Command + V でテキストのペーストを実行します)。コピーしてきたテキストが書式なしテキストとして挿入されますので、必要に応じて書式を整えます。