1-2. 文字の編集について (1) 文字入力するページ編集フィールド上ではキーボードからの文字入力またはコピーした文章の貼り付け操作により文章を入力します以降文字入力に関する操作について説明しますページ編集フィールド (1) 改行の扱いについて [Enter キー ] を押下し

(1)

１. テキストエディタ入力

１－１. 「テキストエディタ」の概要

「テキストエディタ」は、入力した文字に対する、フォントや色変更などの文字装飾機能、および、ハイパーリンクの設定機能を持ったエディタです。本資料では、テキストエディタの詳細機能について説明します。【テキストエディタ画面構成】

②

①

②

①

① 操作メニューボタン：テキストの表示スタイル設定等を行うメニューです。 ② ページ編集フィールド：キーボードからの文字入力、または、コピーした文章の貼り付け操作により、文章を入力します。このフィールド上でマウスを右クリックすると、選択位置に応じたポップアップメニューが表示されます。

(2)

１－２. 文字の編集について

（１）文字入力する

【ページ編集フィールド】上では、キーボードからの文字入力、または、コピーした文章の貼り付け操作により、文章を入力します。以降、文字入力に関する操作について説明します。【ページ編集フィールド】（１）改行の扱いについて [Enter キー]を押下した場合、該当行は段落として扱われる（<p></p>タグが利用される）ため、改行が２行表示されたように表示されます。単純な改行(<br>タグ)を記述するためには、[Shift]+[Enter]キーを入力して下さい。（２）Tab キーについてページ編集フィールド上では、[Tab キー]は利用できません。全角スペースを行の先頭に入力することで行の左端を揃えることが可能です。（３）半角「¥」の入力について半角「¥」は、バックスラッシュで表示されます。「￥」マークを表示したい場合は、全角の「￥」を入力してください。

(3)

（２）文字デザインの編集機能

文字のサイズ、スタイル、色を個々に設定することができます。下記ボタンおよびリストボックスを利用します。（２）-１．文字サイズを変更しましょう ①変更したい文字を選択します。 ②変更したいサイズをリストボックスから選択します。 ①変更したい文字を選択します。 ②変更したいサイズをリストボックスから選択します。 ③文字サイズが変更されます。 ③文字サイズが変更されます。文字サイズを変更した後、文字を選択した状態で、「標準」を選択すると、選択文字が元のサイズに戻ります。選択した文字のスタイルを「太字」にします。選択した文字のスタイルを「斜体」にします。選択した文字の色を変更します。選択した文字のフォントサイズを指定します。サイズは１から７段階で選択できます。(１が最小、７が最大です。)

(4)

All Rights Reserved, Copyright© 富士通株式会社 2011 4 （２）－２．文字のスタイルを［太字］に変更しましょう ①太字にする文字を選択します。 ②［太字］ボタンをクリックします。 ①太字にする文字を選択します。 ②［太字］ボタンをクリックします。 ③文字が太字になります。 ③文字が太字になります。既に太字の文字を選択した状態で、再度ボタンをクリックすると、選択文字列が通常の太さに戻ります。文字サイズを設定後、キーボードの「Ｅｎｔｅｒ」キーで改行しても、文字サイズは設定されたまです。サイズの設定をクリアするには、「ＢａｃｋＳｐａｃｅ」キーを押下してください。 →サイズのリストボックスがクリアされます。

サイズ＝５のまま

サイズ＝標準

「BackSpace」キーを押下

サイズ＝５のまま

サイズ＝標準

「BackSpace」キーを押下

(5)

All Rights Reserved, Copyright© 富士通株式会社 2011 5 （２）－３．文字のスタイルを［斜体］にしましょう ①斜体にする文字を選択します。 ②［斜体］ボタンをクリックします。 ①斜体にする文字を選択します。 ②［斜体］ボタンをクリックします。 ③文字が斜体になります。 ③文字が斜体になります。（２）－４．文字の色を変更しましょう ②［色設定］ボタンをクリックします。 ①変更する文字を選択します。 ②［色設定］ボタンをクリックします。 ①変更する文字を選択します。 ③カラーパレットで、目的の色をクリックします。 ③カラーパレットで、目的の色をクリックします。 ④色が変わります。 ④色が変わります。既に斜体の文字を選択した状態で、再度ボタンをクリックすると、選択文字列が通常のスタイルに戻ります。

(6)

カラーパレットに表示されていない色に変更するには

①[その他の色] をクリックし、色選択画面を表示します。 ②変更したい色をクリックをクリックします。 ③選択した色が表示されます。 ④［ＯＫ］ボタンをクリックします。 ※キャンセルボタンをクリックすると色は変更されません。・文字色を変更する場合、文字色と背景色に十分なコントラスト（明度の差）が取れていないと、文字が読みづらくなります。背景色と文字色に十分なコントラストをとって作成しましょう。 →アクセシビリティチェックで、チェックが行えますので、エラーが出ないことを確認してください。

(7)

All Rights Reserved, Copyright© 富士通株式会社 2011 7 （２）－５．ポップアップメニューによる文字のフォント、色の変更フォントの変更は、前述の「操作メニューボタン」以外に、「ポップアップメニュー」からの変更も可能です。１）変更する文字を選択し、右クリックすると、ポップアップメニューが表示されます。２）「フォント」をクリックします。 →［フォント］画面が表示されます。３）［フォント］画面でフォントを変更します。

⑥

②

③

④

①

⑤

⑥

②

③

④

①

⑤

① フォント・・・.文字のフォントを選択します。 ② スタイル・・・文字のスタイルを選択します。 ③ サイズ・・・・文字のサイズを選択します。 ④ 下線・・・・・文字に下線をつけることができます。 ⑤ 色の設定・・・リストボックスから、色を選択します。または、色選択ボタンをクリックし、カラーパレットで、目的の色を選択します。

(8)

(9)

（３）入力した文字をコピー／移動するには

・下記ボタンを利用します。・ページ編集フィールド上で右クリックして表示されるポップアップメニューでも操作ができます。【ポップアップメニュー】切り取り・・・アイコンと同様の機能です。コピー・・・アイコンと同様の機能です。貼り付け・・・アイコンと同様の機能です。全て選択・・・全ての文字・画像を選択状態にします。（３）－１．文字をコピーしましょう ①コピーする文字を選択します。 ②［コピー］ボタンをクリックします。 ①コピーする文字を選択します。 ②［コピー］ボタンをクリックします。（３）－２．文字を貼り付けましょう ①貼り付ける位置の左側をクリックします。 ①貼り付ける位置の左側をクリックします。選択した部分をコピーします。選択した部分を切り取ります。選択した場所にコピーしたデータを貼り付けます。

(10)

All Rights Reserved, Copyright© 富士通株式会社 2011 10 ②［貼り付け］ボタンをクリックします。 ③選択した文字が貼り付けられます。 ②［貼り付け］ボタンをクリックします。 ③選択した文字が貼り付けられます。テキストエディタへのコピー＆貼り付けについてページ編集フィールドには、ＭｉｃｒｓｏｆｔＷｏｒｄやＥｘｃｅｌ等、他のツールで作成した内容等をコピーして貼り付けることが可能ですが、テキストエディタでは、書式や色の情報を除いた、プレーンテキストのみが貼り付けられます。（ＷｏｒｄやＥｘｃｅｌで指定されているフォント情報やテーブルの枠線情報等は、全て取り除かれた状態で貼り付けられます。）例）ＭｉｃｒｓｏｆｔＥｘｃｅｌのデータコピー＆貼り付けの場合。貼り付けテキスト文字のみ貼り付けます。貼り付けテキスト文字のみ貼り付けます。

(11)

「アクセスを許可する」ボタンを

クリックします。

「アクセスを許可する」ボタンを

クリックします。

→コピーした内容が貼り付けられます。上記のダイアログボックスは、Internet Explorer のバージョンによって、貼り付けを行うたびに表示される場合があります。Internet Explorer の設定変更で表示しないようにする事が可能です。 ※ただし、Internet Explorer 設定変更の可否は、システム管理者にご確認ください。（規定されたセキュリティポリシーによる）【ダイアログボックスを非表示にする設定（Internet Explorer８の画面を例に説明します。）】１．Internet Explorer を起動します。２．メニューバーの［ツール］より「インターネットオプション」を選択します。 →［インターネットオプション］画面が表示されます。

(12)

All Rights Reserved, Copyright© 富士通株式会社 2011 12 ３．「セキュリティ」タブを選択し、「セキュリティ設定を表示または変更するゾーンを選択してください」の中から「信頼済みサイト」を選択後、「レベルのカスタマイズ」ボタンをクリックします。 →［セキュリティの設定］画面が表示されます。４．「スクリプト」の「スクリプトによる貼り付け処理の許可」を「有効にする」に変更します。

(13)

All Rights Reserved, Copyright© 富士通株式会社 2011 13 （３）－３．文字を移動しましょう ①移動する文字を選択します。 ②［切り取り］ボタンをクリックします。 ①移動する文字を選択します。 ②［切り取り］ボタンをクリックします。 ③貼り付け先にカーソルを移動します。 ④［貼り付け］ボタンをクリックします。 ③貼り付け先にカーソルを移動します。 ④［貼り付け］ボタンをクリックします。 ⑤切り取った文字が貼り付けられます。 ⑤切り取った文字が貼り付けられます。

(14)

（４）文字・イメージの行中での配置を変更するには

下記ボタンを利用します。（４）－１．文字列を中央に配置しましょう ①配置を変更する行を選択します。 ②中央揃えボタンをクリックします。 ①配置を変更する行を選択します。 ②中央揃えボタンをクリックします。 ③行が中央に配置されます。 ③行が中央に配置されます。選択した文字、イメージを左端に配置します。選択した文字、イメージを中央に配置します。選択した文字、イメージを右端に配置します。既に中央揃えされた行を選択した状態で、再度ボタンをクリックすると、選択行が左揃えされます。同様に、右揃えされた行を選択した状態で、再度ボタンをクリックすると、選択行が左揃えされます。

(15)

行ごとに設定できません

キーボード[Shift]＋[Enter]で改行キーボード[Shift]＋[Enter]で改行【左揃え】【中央揃え】【右揃え】

行ごとに設定できません

(16)

（５）ハイパーリンクを設定するには

下記ボタンを利用します。

ハイパーリンクを設定します。

（５）－１．ハイパーリンクを作成します。 ①ハイパーリンクを設定したい文字列を選択します。 ②［リンク設定］ボタンをクリックします。 ①ハイパーリンクを設定したい文字列を選択します。 ②［リンク設定］ボタンをクリックします。 ③ハイパーリンク設定ダイアログが開きます。ハイパーリンクの種類(プロトコル)を選択します。 ⑤[ＯＫ]ボタンをクリックします。 ※キャンセルボタンをクリックするとリンクは追加されません。 ④[http://]の後（③で“http:”を選択した場合）に、リンク先ページのＵＲＬを入力します。 ③ハイパーリンク設定ダイアログが開きます。ハイパーリンクの種類(プロトコル)を選択します。 ⑤[ＯＫ]ボタンをクリックします。 ※キャンセルボタンをクリックするとリンクは追加されません。 ④[http://]の後（③で“http:”を選択した場合）に、リンク先ページのＵＲＬを入力します。 ⑥リンクが設定されます。

(17)

All Rights Reserved, Copyright© 富士通株式会社 2011 17 （５）－２．ハイパーリンクを変更しましょう既にハイパーリンクが設定されている文字列やイメージを選択してボタンをクリックすると、選択文字列またはイメージのハイパーリンク情報を変更できます。下記のどちらかの方法で、［ハイパーリンク］画面を表示します。方法１ハイパーリンクを変更したい文字列を選択した状態で「ハイパーリンク作成/編集」ボタンをクリックすると、［ハイパーリンク］画面が表示されます。ハイパーリンクを変更したい文字列を選択した状態で「ハイパーリンク作成/編集」ボタンをクリックすると、［ハイパーリンク］画面が表示されます。方法２ハイパーリンクを変更したい文字列を選択した状態で右クリックして、ポップアップメニューの「リンク編集」をクリックすると、［ハイパーリンク］画面が表示されます。ハイパーリンクを変更したい文字列を選択した状態で右クリックして、ポップアップメニューの「リンク編集」をクリックすると、［ハイパーリンク］画面が表示されます。

(18)

②

③

①

④

⑤

②

③

①

④

⑤

① リンクタイプを指定します URL(初期値)を指定します。（「このページのアンカー」は使用しません。） ② ハイパーリンクのプロトコルを指定します。プロトコル説明 http: テキスト、グラフィックス、音声、その他のデジタル情報が WWW (World Wide Web) 上の Web サーバーにある Web ページにアクセスします。

https: SSL (Secure Sockets Layer) 暗号化方式を使って HTTP 接続を確立します。

その他同じWeb サーバ上にあるページへのリンクを設定します。

(19)

All Rights Reserved, Copyright© 富士通株式会社 2011 19 ③ 「②」で指定したプロトコルに続く URL を設定します。プロトコル説明 http: リンクするページへのＵＲＬを記述します。 (記述例) icityportal.city.fujitsu.jp/index.html https: リンクするページへのＵＲＬを記述します。 (記述例) icityportal.city.fujitsu.jp/index.html その他・同じサイトにあるページへのリンクを設定します。 (記述例)/news/201008.html ・電子メールアドレスの設定をすると、利用者のパソコンの電子メールプログラムを開いて、記述した電子メールアドレスにメールを送信することができます。（記述例） mailto:soumu@city.fujitsu.com ④ ターゲットを指定します。リンク先どのウィンドウ（フレーム）に表示するかを指定します。ターゲット説明なし: リンク先を同じウインドウに開きます。ユーザ設定: 既に、目的のフレーム名に設定したウィンドウがあればそこに、無ければ新しいウィンドウを開いて表示します。最上位ウィンドウ（_top）ウィンドウがフレームに分割されていれば、分割を全て解除して、そこに表示します。同じウィンドウ（_self）同じウィンドウに表示します。親ウィンドウ (_parent) ウィンドウがフレームに分割されていれば、1 段だけ分割を解除して、その親フレームに表示します。

(20)

（６）リンクの設定を削除しましょう

ハイパーリンクを変更したい文字列を選択した状態で右クリックして、ポップアップメニューの「リンク編集」をクリックします。ハイパーリンクを変更したい文字列を選択した状態で右クリックして、ポップアップメニューの「リンク編集」をクリックします。

(21)

１－３. 操作を元に戻す／やり直すには

下記ボタンを利用します。直前の編集処理を元に戻すには、「元に戻す」ボタンをクリックします。元に戻した操作をもう一度やり直すには、「やり直し」ボタンをクリックします。

１－４. ページの内容をクリアするには

下記ボタンを利用します。内容を全てクリアする場合、クリアボタンをクリックします。ボタンをクリックすると、下記確認ダイアログが開きます。［OK］をクリックすると、内容が全てクリアされます。操作を元に戻します。操作をやり直します。ページの内容をクリアします。