7章 ページの作成
WebRelease ではページ編集画面で WYSIWYG (What You See Is What You Get) エディタが使えるようになっています。テンプレート側での要素の定義が「WYSIWYG エディタ」となっている要素については、ページ編集画面でコンテンツの入力は WYSIWYG エディタを使っての入力となります。
ページ編集画面では WYSIWYG エディタに指定されている要素の入力エリアは、ページ編集画面に入った直後は下記のように普通のテキスト領域のように表示されています。
このエディタエリア内をマウスでクリックすると WYSIWYG エディタが起動し下記のようにコマンドボタンが上部に表示されます。 この状態になるとエディタの機能を使ってコンテンツの編集ができるようになります。コマンドボタンの上にマウスカーソルを重ねた時に表示される説明でボタンの機能を確認することができます。
編集エリア右下にある三角形のボタンはドラッグハンドルです。このハンドルをマウスでドラッグすることで編集領域のサイズを自由に変更することができます。
フォーマットを削除したい部分をマウスでドラッグして選択し、フォーマット削除ボタンをクリックすると、その部分に設定されていたフォーマットを削除することができます。削除対象となるフォーマットは HTML でのインライン系のフォーマットです。例えば、太字、斜体、テキスト色、フォントおよびそのサイズなどが削除の対象となります。書式で指定された設定は削除対象にはなりません。
太字、斜体、下線、打ち消し線などを付けたいテキスト部分をマウスでドラッグして選択し、コマンドボタンをクリックするとその部分の書体を変更することができます。また、既に書体が設定されている部分をマウスでドラッグして選択し、コマンドボタンをクリックすることで、その部分に設定されている書体を解除することができます。
添字にしたいテキスト部分をマウスでドラッグして選択し、コマンドボタンをクリックするとその部分を添字または上付き添字に変更することができます。また、既に添字になっている部分をマウスでドラッグして選択し、コマンドボタンをクリックすることで、添字を解除することができます。
特殊文字を挿入したい位置にカーソルを移動しておいてコマンドボタンをクリックすると、特殊文字選択パネルが表示されます。そのパネル中で挿入したい文字をクリックすることで特殊文字を挿入することができます。ブラウザによっては、この機能で挿入した文字を表示できない場合があります。想定しているブラウザで表示できるかどうかを確認してください。
カーソルが置かれている段落を、左、中央、右、両端に揃えます。
カーソルが置かれている段落を、箇条書きに変更します。箇条書きのレベルのコントロールは後述の「インデント」と「インデント解除」を使って行ないます。
カーソルが置かれている段落をインデントしたり、インデントを解除したりします。箇条書きの中で使用すると箇条書きのレベルの変更を行なうことができます。
カーソルが置かれている段落を「ブロック引用」します。ブロック引用は、対象部分を HTML の blockquote タグで囲みます。
ブロック引用された部分はこのように表示されます。カーソルが置かれている段落を「ブロック引用」します。ブロック引用は、対象部分を HTML の blockquote タグで囲みます。カーソルが置かれている段落を「ブロック引用」します。ブロック引用は、対象部分を HTML の blockquote タグで囲みます。カーソルが置かれている段落を「ブロック引用」します。ブロック引用は、対象部分を HTML の blockquote タグで囲みます。
カーソルが置かれている段落に書式を設定します。設定可能な書式は「見出し1」から「見出し6」と標準(p)、標準(div)、書式付き(pre)、アドレス(address) の10種類です。指定した書式に従って下表のとおり HTML タグが挿入されます。
指定する書式 | 対応する HTML タグ |
---|---|
見出し1(h1) | <h1> |
見出し2(h2) | <h2> |
見出し3(h3) | <h3> |
見出し4(h4) | <h4> |
見出し5(h5) | <h5> |
見出し6(h6) | <h6> |
書式付き(pre) | <pre> |
アドレス(address) | <address> |
標準(p) | <p> |
標準(div) | <div> |
選択されているテキストのフォントを指定します。
選択されているテキストのフォントサイズを指定します。フォントサイズは pt (ポイント) px (ピクセル) %(パーセント)のいずれかで指定することができます。どの単位でフォントサイズの指定を行なうかは「エディタ設定」側でコントロールします。
選択されているテキストの色を設定します。ボタンをクリックした時に表示されるパレットから色を選んでください。パレットに表示されている「自動」という選択肢は「色指定を行なわない」という指定です。「自動」を指定すると選択部分のテキスト色やテキスト背景色は、その周囲の指定やスタイルシートの指定に従って決定されます。「その他の色」が表示されている場合、そこをクリックするとカラーピッカーが表示されます。カラーピッカーを使えばパレットにない色も選択できます。カラーパレットに表示する色は「エディタ設定」側で指定された色です。また、「その他の色」を選択できるようにカラーピッカーを表示するかどうかもエディタ設定で指定されたとおりに動作します。
ペーストボードからの貼り付けの操作は3種類あります。
ペーストボードの内容をカーソル位置に貼り付けます。このコマンドは、ペーストボードの内容を、可能であれば何でも貼り付けてしまいます。思わぬペースト結果となる場合がありますので十分に注意して使用してください。例えば、どこかの Web サイトをブラウザで閲覧し、そのページの一部をコピーした後、この機能を使って貼り付けを行なうと、画像などは閲覧していたページの URL を直接参照する形で張り付けられてしまいます。それは意図した結果ではないかもしれません。できるならば「ソース」表示画面でペーストの結果生成された HTML が意図したものになっているかどうかを確認してください。HTML に関する十分な知識がない場合には、後述の「プレーンテキスト貼り付け」を使うことをお勧めします。
この「貼り付け」コマンドは CTRL-V (CMD-V) で起動することもできます。
ペーストボードにあるオブジェクト中のテキスト部分だけを、カーソル位置に貼り付けます。
Word 文書からコンテンツをコピーする時に使用します。ワード文書からコピーする時に、不要なタグを除去してよりクリーンな HTML として貼り付けを行ないます。この機能では、ワード文書中に置かれている画像はコピーできません。またハイパーリンクもコピーされません。
ワード文書からコピーする場合でも、テキストだけをコピーするのであれば、先の「プレーンテキスト貼り付け」を使用してください。
カーソル位置にテーブルを挿入します。または、テーブルが選択されている状態では、そのテーブルの設定変更が行なえます。このボタンをクリックすると、下記のような設定パネルが表示されます。 必要な値を設定した後「OK」ボタンをクリックすると、カーソル位置にテーブルが作成されます。または、選択されているテーブルの設定が変更されます。
テーブルのボーダ上をマウスでクリックするとボーダー上に8個の四角いハンドルが表示され、テーブルが選択された状態になります。このハンドルをマウスでドラッグすることでテーブルのサイズを変更することができます。この方法は FireFox で使うことができますが、残念ながら、現状では Safari と Chrome ではこの方法でのテーブルをリサイズすることができません。Safari と Chrome の場合には、テーブル上で右クリックを行い、テーブルプロパティパネルを表示し、パネル上でテーブルのリサイズを行なってください。
テーブルの縦ボーダ上にマウスを置くとテーブルのボーダを移動するための青いマーカーが表示されます。マウスでマーカーをドラッグすることでテーブルのセル幅を調整することができます。
テーブル内でマウスの右クリックを行なうとメニューが表示されます。「セル」メニューを選択するとさらに下位のメニューが表示されます。このメニューから操作を選択することでセルの挿入、削除、結合、分割が行なえます。
セルの結語は、右方向または、下方向となるので、結合したいセルの上または左のセルを選んだ状態でセルの結合を行なってください。
FireFox の場合、セルの結合の方法が少し異なります。FireFox の場合、マウスで複数のセルをドラッグして選択しておいてから右クリックでメニューを表示してください。メニューでセル結合を選ぶと、ドラッグして選択し ておいたセルが結合されます
セルプロパティとは、テーブルを構成するセルの種々の属性を指しています。セルのプロパティを設定することで、セル内の表示をコントロールすることができ ます。よく使うセルプロパティは、セル内のテキストの表示位置の設定でしょう。セル内のテキストを、左、右、上、下、中央などに位置合わせすることができ ます。また、セルの背景色やボーダ色を指定することもできます。
セルプロパティの設定は、テーブルメニューで行ないます。テーブル内の目的のセルの中でマウスの右クリックを行なうとテーブルメニューが表示されます。 「セル」メニューを選択するとさらに下位のメニューが表示されます。このメニューから「セルプロパティ」を選択すると、下記のようなセルプロパティ設定パネルが表示されます。このパネルを使ってセルの属性を指定します。
「横幅(列数)」欄にはセルの横方向の結合数を指定します。この値は HTML の td または th タグの colspan の値を指定するものです。セルの結合や分割をメニュー操作で行なっている限り、このパネルから直接この値を指定する必要はないかもしれません。
テーブル内でマウスの右クリックを行なうとメニューが表示されます。「行」メニューを選択するとさらに下位のメニューが表示されます。このメニューから操作を選択することで行の挿入と削除が行なえます。
テーブル内でマウスの右クリックを行なうとメニューが表示されます。「列」メニューを選択するとさらに下位のメニューが表示されます。このメニューから操作を選択することで列の挿入と削除が行なえます。
テーブル内でマウスの右クリックを行なうとメニューが表示されます。「テーブル削除」メニューを選択することでテーブルを削除することができます。
カーソル位置に横経線を挿入します。このコマンドはカーソル位置に HTML の hr タグを挿入します。
選択されているテキストにリンクを設定します。リンクを設定したいテキスト(画像も可)を選択した状態でこのボタンをクリックすると下記のようなリンクパネルが表示されます。
選択されているテキスト部分(画像も可)に直接 URL を指定してリンクを作成したい場合には、リンクタイプに「URL」 を指定し、URL 欄に http または https で始まるリンク先ページの URL を指定します。
手もとの画像やPDF ファイルなどをアップロードしてそれをリンク先に指定したい場合には、リンクタイプに URL を指定した状態で「アップロード」タブをクリックして PDF や画像をアップロードすることができます。(後述)
Title 属性欄には HTML の a タグの title 属性の値を指定します。(空欄でも構いません)この値は、多くのブラウザで、リンク上にマウスを重ねた時に表示されるテキストとして使われています。
リンク先に WebRelease 上のページを指定する場合には下記の手順で URL 欄の指定を行なってください。
この方法でリンクを作成しておくと、そのページが移動したり、ファイル名が変更されるなどして URL が変化してもリンクが追従しますのでリンク切れのリスクがありません。また、リンクされた側のページにおいては、リンクしたページが「リンク元一覧」画面に表示されるため、どのページからリンクされているかを常に把握しておくことが可能となります。
一方、WebRelease で管理されているページであっても、他のサイトのページに対してはこの方法でリンクを作成することはできません。他のサイト中のページに対してリンクを作成する場合には、そのページの公開 URL (http や https で始まるURL) を使って直接リンク先を指定してください。
リンクタイプが URL の場合、リンク先以外に、ターゲットを指定することができます。
「ターゲット」タブでは、ユーザがそのリンクをクリックした時に、リンク先のページをどのように表示するかを指定します。ターゲットに指定した値は HTML の a タグの target 属性の値となります。
リンク先を同じウインドウ内で開きたい場合には「なし」、「最上位ウインドウ (_top)」、「同じウインドウ (_self)」のいずれかを指定してください。「なし」として特に指定しないのが一般的なようです。
リンク先を別ウインドウで表示したい場合には「ポップアップウインドウ」または「新しいウインド (_blank)」を指定してください。
ターゲットに「ポップアップウインドウ」を指定すると、この図のような画面が表示されます。このパネルを使って表示される別ウインドウのサイズや位置などを指定することができます。
「ポップアップウインドウ名」に名前を指定すると、開かれる別ウインドウに名前を付けることができます。異なるリンクが同じウインドウ名を指定すると、表示するウインドウを共有することができます。
「左端位置」と「上端位置」はスクリーン上でのウインドウの左上の位置を指定する時に使用することができるのですが、ページを閲覧しているユーザの環境、 例えばスクリーンサイズなど、が判らない状況ではあまり適切な値を指定できません。積極的には指定しない方が良いでしょう。ポップアップウインドウの表示に関しては、コンテンツを閲覧するユーザの使用しているブラウザによっては、指定どおりの表示にならない場合があります。想定しているブラウザで期待通りの表示になるかどうかを確認することをお勧めします。
手もとの画像や PDF ファイルなどをアップロードしてそれをリンク先に指定したい場合には、リンクタイプに URL を指定した状態で「アップロード」タブをクリックして PDF や画像をアップロードします。
アップロードしたいファイルを指定してから「サーバーに送信」ボタンをクリックするとファイルが WebRelease にアップロードされます。アップロードが成功すると、リンク先はアップロードしたファイルに設定されます。
アップロード可能なファイルのサイズは「エディタ設定」画面にて制限することができます。
アップロードするファイルとして画像(jpg png gif のいずれか)を指定した場合には、画像を加工するための入力項目が表示されます。
「画像幅指定」と「画像高さ指定」は画像のサイズを変形したいときに指定してください。デジタルカメラなどで撮影した解像度の高い画像を直接アップロードする場合などには、この機能を使用して画像の解像度を Web での利用に適したサイズにリサイズしてください。幅または高さの一方のみを指定した場合、縦横比を維持した状態で指定された幅または高さになるように画像がリサイズされます。
「画像幅指定」または「画像高さ指定」に値が入力されていると、アップロードされた画像は実際にリサイズ処理されます。 WebRelease によって管理される画像はリサイズ後のものとなります。アップロードされたオリジナルファイルは WebRelease 中には保持されません。
「回転」は、アップロードされた画像を指定された方向に回転処理します。画像のリサイズ処理と同じく WebRelease で管理される対象は、回転された後の画像となります。
アップロード可能な画像のサイズ(ピクセルサイズ)とファイルサイズ(バイト数)は「エディタ設定」画面で制限することができます。
「圧縮パラメタ」は、画像を圧縮してファイルサイズを小さくしたい場合などに指定してください。指定可能な値は 1 から 100 の間の整数です。小さい値を指定するとより高く圧縮されますが画質が劣化します。大きな値を指定すると圧縮率は下がりますが画質は維持されやすくなります。高画質を望む場合には 60 以上の値を指定すると良いでしょう。高圧縮を望む場合には 40 程度の値がよいかもしれません。
リサイズ、回転、圧縮、などの処理を行なうと、オリジナルの画像のフォーマットにかかわらず、画像はすべて jpeg 形式に変換されます。
アップロードされたファイルが公開サーバ上に転送されるとき、可能な場合は、アップロードされた時のファイル名のまま公開サーバに転送されます。アップロード時のファイル名が日本語を含んでいる場合など、そのファイル名をそのまま使うことができない場合には、アップロード時にユニークなファイル名に付け替えられ、そのファイル名が公開サーバへの転送時に使用されます。画像ファイル名を特定の名前で公開したい場合には、アップロードする前にファイル名を希望する名前に変更しておいてください。
リンク先として画像や添付ファイルをアップロードした場合、アップロードされたファイルは WebRelease によって管理されます。設定したリンクを削除するとアップロードしたファイルも WebRelease から削除され、次回 FTP 時には、公開サーバからも削除されます。
リンク先として mailto: を指定することもできます。E-Mail アドレス、件名、本文を指定しておくと、このリンクをクリックした時に指定した宛先、件名、本文でメールアプリが起動するようになります。
尚、一部のブラウザでは件名や本文がメールアプリに渡らなかったり、文字化けを起こす場合があります。また、こういった比較的安易な方法で mailto: リンクを作成してインターネットに公開すると、スパムメールの餌食になってしまうかもしれません。
インターネットに公開するコンテンツでこのリンクタイプを使うには、それなりの覚悟が必要かもしれません。ご注意ください。イントラネット向けコンテンツでは便利に使える場合も多いのではないでしょうか。
リンクタイプとしてアンカーを指定することもできます。ここでのアンカーとは、ページ内に設置されたアンカーまたは、特定の id= 属性を持つ任意の要素が表示される場所にページ内で移動するリンクのことです。
アンカーへのリンクを設定する場合にはリンクタイプに「この要素内のアンカー」を選び、その上で、ページ内のアンカーへのリンクを作成するのであれば「アンカーを選択」ポップアップを使って、または、ページ内の要素で、ある id= 属性をもったエレメントの場所へのリンクを作成するのであれば「エレメントID」側のポップアップを使ってリンク先を指定します。
このタイプのリンク先はページ内にクローズしていますが、WebRelease ではこのタイプのリンクについては、現在、リンク切れのチェックはできません。また、手作業によるリンクの多用はメンテナンス性の低下の原因になります。あまり多用しないことをお勧めします。
リンクを削除する場合いは、リンクが設定されている部分にカーソルを移動した状態で「リンク削除」ボタンをクリックします。
コンテンツ中にアンカーを設置しておくと、その場所に向けてリンクを作成することができるようになります。アンカーを設置したい場合には、アンカーを設置したい場所にカーソルを移動しておいてから「アンカー挿入/編集」ボタンをクリックします。下図のようなパネルが表示されるのでアンカー名を入力してください。アンカー名はページ内でユニークでなければなりません。また、アンカー名には日本語は使えませんので、英字で始まる英字と数字の組み合わせで指定してください。
アンカー名を入力したら「OK」ボタンをクリックしてください。アンカーが設置されている部分は WYSIWYG エディタ上では下記のように表示されます。
設置したアンカーを削除する場合には、アンカーが設置されている部分にカーソルを移動しておいてから「アンカー挿入/編集」ボタンをクリックします。アンカープロパティパネルが表示されますのでアンカー名を空欄にして「OK」ボタンをクリックします。アンカーは削除されます。
画像を挿入する場合には、挿入したい位置にカーソルを移動しておいてから「イメージ挿入/編集」ボタンをクリックします。下記のようなパネルが表示されますので、挿入したい画像をアップロードしてください。画像ファイルの指定や各種指定を行った状態でパネル右下にある「アップロード」ボタンをクリックすると画像がアップロードされ WebRelease に取り込まれます。
「画像幅指定」と「画像高さ指定」は画像のサイズを変形したいときに指定してください。デジタルカメラなどで撮影した解像度の高い画像を直接アップロードする場合などには、この機能を使用して画像の解像度を Web での利用に適したサイズにリサイズしてください。幅または高さの一方のみを指定した場合、縦横比を維持した状態で指定された幅または高さになるように画像がリサイズされます。
「画像幅指定」または「画像高さ指定」に値が入力されていると、アップロードされた画像は実際にリサイズ処理されます。 WebRelease によって管理される画像はリサイズ後のものとなります。アップロードされたオリジナルファイルは WebRelease 中には保持されません。
「回転」は、アップロードされた画像を指定された方向に回転処理します。画像のリサイズ処理と同じく WebRelease で管理される対象は、回転された後の画像となります。
アップロード可能な画像のサイズ(ピクセルサイズ)とファイルサイズ(バイト数)は「エディタ設定」画面で制限することができます。
「圧縮パラメタ」は、画像を圧縮してファイルサイズを小さくしたい場合などに指定してください。指定可能な値は 1 から 100 の間の整数です。小さい値を指定するとより高く圧縮されますが画質が劣化します。大きな値を指定すると圧縮率は下がりますが画質は維持されやすくなります。高画質を望む場合には 60 以上の値を指定すると良いでしょう。高圧縮を望む場合には 40 程度の値がよいかもしれません。
リサイズ、回転、圧縮、などの処理を行なうと、オリジナルの画像のフォーマットにかかわらず、画像はすべて jpeg 形式に変換されます。
アップロードされたファイルが公開サーバ上に転送されるとき、可能な場合は、アップロードされた時のファイル名のまま公開サーバに転送されます。アップロード時のファイル名が日本語を含んでいた場合など、そのファイル名をそのまま使うことができない場合には、アップロード時にユニークなファイル名に付け替えられ、そのファイル名が公開サーバへの転送時に使用されます。画像ファイル名を特定の名前で公開したい場合には、アップロードする前にファイル名を希望する名前に変更しておいてください。
アップロードが完了すると表示は「イメージ情報」タブ側に切り替わります。このタブでは、画像の表示方法を指定することができます。
「代替テキスト」欄には HTML の img タグの alt 属性の値を指定します。「Title属性」欄には img タグの title 属性の値を指定します。
「表示幅」と「表示高」欄には画像を表示するときの幅と高さを指定します。この値の指定は、あくまでも表示上の幅と高さの指定である点に注意してください。この値を指定しても画像ファイル自体がリサイズされるわけではりません。この値を小さく指定しても画像ファイルは小さくなりません。ブラウザに配信される画像は画像をアップロードした時のサイズのままです。それをブラウザに表示する段階でここで指定された幅と高さが使用されて大きく、または小さく表示されます。画像ファイル自体のサイズを小さくするのであれば「アップロード」タブ側で画像をアップロードするときに、画像サイズを指定してアップロードしておく必要があります。現在の WebRelease にはアップロードされてしまっている画像を後からリサイズする機能はありませんので、必要があれば、画像ファイルを再度アップロードし、そのときにサイズを指定しなおしてください。
ボーダーには、枠線の太さを指定します。横間隔と縦間隔には、画像を表示する際に、枠線の外側に設ける間隔(パディング)を指定します。これらの値は HTML の img タグの border 属性、hspace 属性、vspace 属性として出力されます。
行揃えには、画像と周囲のテキストとの位置関係を指定します。「右」と「左」は、画像の周りにテキストが回り込む指定です。(HTML の仕様上、画像を中央に置いて、左右にテキストを回り込ませる指定はできません)それ以外の指定は、イメージをテキストの1行の中に置く指定です。この時、イメージやテキストのどの部分を整列の対象にするかによって、様々な指定が存在します。各指定によってどのような表示になるかについては HTML の仕様を参照してください。
アップロードされたファイルは WebRelease によって管理されます。エディタ画面上で画像を削除するとアップロードしたファイルも WebRelease から削除され、次回 FTP 時には、公開サーバからも削除されます。
WYSIWYG エディタの設定で「貼り付け」が使える設定になっている場合には、同じサイト内の他のページの Preview 画面から画像を Copy & Paste で取り込むことができます。
他のウインドウから Drag & Drop で画像を入力することはできません。画像の入力は上記の手順で行なってください。
直前に実行した編集操作を取り消すことができます。取り消せる操作は15ステップまでです。尚、すべての操作が思い通りの粒度で取り消せるわけではありません。
取り消してしまった編集操作を取り消さなかったことにすることができます。
編集中のコンテンツ中で単語の検索をおこないます。「検索」ボタンをクリックすると下記のような検索パネルが表示されます。検索条件を入力して検索してください。
編集中のコンテンツ中で単語の検索と置換をおこないます。「置き換え」ボタンをクリックすると下記のような検索パネルが表示されます。検索条件をと置き換え文字列を指定して置き換えを実行してください。
編集エリア全体を選択状態にします。
WYSIWYG エディタで編集中のコンテンツの HTML ソースを表示します。また、この状態で HTML を直接編集することができます。「ソース」ボタンを再度クリックすると通常の WYSIWYG モードに戻ります。この機能を使いこなすためには HTML に関する十分な知識が必要です。
WYSIWYG エディタで編集中の HTML のブロック構造を表示します。表示された情報の理解には HTML に関する十分な知識が必要です。
このボタンをクリックすることで WYSIWYG 編集エリアをページ編集画面全体に広げることができます。このボタンを再度クリックするともとの編集画面に戻ります。大きなコンテンツを WYSIWHG エディタで作成する場合に大変便利です。