Microsoft Word - XOOPS_input_m.doc

23 

Loading....

Loading....

Loading....

Loading....

Loading....

全文

(1)

学校WebサイトへのXOOPS導入

マニュアル

(コンテンツ入力)

Ver.0.9 (2008.6.24)

(2)

目 次

第1章 このマニュアルについて ... 1 1 はじめに ... 1 2 このマニュアルの使い方 ... 2 第2章 編集するためのサイトへのログイン方法 ... 3 第3章 各モジュールへの情報の入力方法 ... 4 1 ニュースモジュール ... 4 2 WordPress モジュール ... 11 第4章 コンテンツ作成のために ... 22 1 写真の加工 ... 22 ⑴ 写真を撮影しましょう ... 22 ⑵ 写真の加工のポイント ... 22

⑶ Microsoft Office Picture Manager を用いた編集 ... 23

2 PDF ファイルの作成 ... 26 ⑴ Adobe Acrobat を利用した PDF ファイルの作成 ... 27 ⑵ Adobe Acrobat アドインを利用した PDF ファイルの作成 ... 30 ⑶ Office 用 Microsoft PDF/XPS 保存アドインの利用... 32 3 図の作成 ... 33 ⑴ スキャナを用いた図の作成 ... 33 ⑵ スキャナで作った図の利用 ... 38 作成した図の一部を保存し、W e bに用いる ... 48 印刷物を Word 文書にする ... 49 文書のイメージをプレゼンテーションに貼る ... 50 ⑶ アプリケーションソフトで作った文書の一部を簡単に図にする ... 52

(3)

第1章 このマニュアルについて 1 はじめに 2 このマニュアルの使い方 - 1 -

第1章 このマニュアルについて

1 はじめに このマニュアルは、XOOPSで作成した学校のW e bサイトにコンテンツをアップロードする際に、コン ピュータ操作が不慣れな方でも簡単に入力できるようにするためのものです。 ① 著作権について 本テキストのすべての内容は、著作権法上の保護を受けています。 本テキストに掲載の文書や画像等の無断転載を禁じます。 ② 利用について 本テキストは、愛媛県内の教職員を対象に提供します。 改変にあたっては、愛媛県内の学校内で使用する場合についてのみ、自由に行ってかまいません。 愛媛県総合教育センターの許諾を得る必要はありません。改編マニュアルの作成校以外での二次使 用は禁止します。 ③ 商標について

○ Microsoft, MS, MS-DOS, Windows, Windows98, WindowsXP, Windows NT, Microsoft Office, Microsoft Word, Microsoft Excel, PowerPoint, FrontPage, Internet Explorer, Windowsロゴは、 米国 Microsoft Corporation の米国及びその他の国における商標または登録商標です。 ○ 『一太郎』は株式会社ジャストシステムの登録商標(商標)です。

○ 『ホームページ・ビルダー』は、IBM Corporation の登録商標(商標)です。

○ 『Adobe, Adobeロゴ, Adobe Acrobat』は、Adobe Systems Incorporated(アドビシステムズ社) の商標です。

○ その他、本テキストに記載されている社名、製品名はそれぞれの会社の商標または登録商標 です。

(4)

2 このマニュアルの使い方 - 2 - 2 このマニュアルの使い方 このマニュアルは、学校の実情に応じて自由にお使いください。そのまま使用しても、編集して利用 してもかまいません。 ◆ 改編の例 ○ マニュアルの必要な部分だけ印刷して使用する。 ○ 『このマニュアル内の「WordPress」という文字は本校W e bサイトでは「セキュリティ情報」と表 記しています。すべて読み換えてご覧ください。』といった注釈を加えておく。 ○ 画面で使用している図版を自校のものに置き換える。 ○ マニュアル中に使用している文字を自校用の表現に置き換える。 例えば右図の例(ESnetポータルサイト)のように、「WordPress」 を用いて作成している「セキュリティ情報」がある場合、マニュ アル中の「WordPress」をすべて「セキュリティ情報」と置換する と、利用者はわかりやすいでしょう。 Word2007の場合、〔ホーム〕→〔編集〕→〔置換〕

(5)

第2章 編集するためのサイトへのログイン方法 1 はじめに - 3 -

第2章 編集するためのサイトへのログイン方法

XOOPSで作成したこのサイトは、セキュリティ確保のため、ユーザ名とパスワードを利用してログイ ンし、編集や情報提供の作業を行います。 まずログインしてください。 1 ログインする。 インターネットエクスプローラを開いてログインサイトを開いてください。 アドレスは( )です。 2 与えられたユーザ名とパスワードを入力しログインボタンをクリックしてください。編集する権限 があるページの編集作業を行うことができます。 自校のサイト名を入力してください

(6)

- 4 -

第3章 各モジュールへの情報の入力方法

1 ニュースモジュール 「ニュース」に情報を掲載する場合の手順について説明します。 ⑴ サイトにログイン後、メインメニュー中の「ニュース」をク リックします。 ⑵ 「ニュース投稿」のメニューが表示されるのでそれをクリック します。 ⑶ 下のような画面が表示されます。タイトルを入力し、文章を打ち込んでください。 文字を入力するだけな らば、ここに入力してい くとよい。 ここに、文書の表題を 入力する。 ここをクリックして、 トピックのグループを 選択する。

(7)

第3章 各モジュールへの情報の入力方法 1 ニュースモジュール - 5 - 表題は簡単で内容がよくわかるように記述してください。 「トピック」は▼をクリックすると一覧が表示されるので、該当 するものを選択する。 本文に文字を入力していく。文字装飾を行いたい場合には「追加」 ボタン左の枠に文字列を入力し、文字サイズ、フォント、色その他 の書式を選ぶと、「サンプル」の文字が変化するので確認し、追加ボタンをクリックする。 このように表示される。

※ 注意

学校で運用するサイトでは、文字装飾が華美になると読みにくく、内容も正しく伝わり

にくいことがある。強調したいところの色を変えるか、アンダーラインを引く程度で抑

えたほうがよい。

文字の大きさ フォントの種類(欧文のみ) 文字色 太字 斜体 下線 取り消し線 ここが変化する ここに文字列を入力

(8)

- 6 - の使い方 左から順番に「W e bページへのリンク」「メールアドレス」「本文内にサーバ内の写真を表示」「写 真をアップロードして本文内に写真を表示」「コードを入力」「引用」に利用します。 ※ 各ボタンをクリック後右のようなメッセージが表示され る場合は、まず閉じるをクリックしてください その後、画面上部に下図のような黄色いメッセージが表 示されます。 クリック すると メッセージが表示されるので、「許可」をクリックします。再度ボタンをクリックしてください。 ※ 「メールアドレス」、 「本文内にサーバ内の写真を表示」、 「コードを入力」、 「引用」は使いません。使いたい場合はW e b管理者に相談してください。 W e bページへのリンク 例えば愛媛県のW e bページへリンク をはりたい場合に使います。 ボタンをクリックすると右のような 窓が開くので、W e bサイトのアドレス を入力してください。 OKを押すと、今度はサイト名の入力 を要求してきます。入力してください。 今入力した文字列の前後に、「[url= 」 のような文字列が付加して挿入されま した。この「[url= ・・・ [/url]」の 部分は編集しないでください。 左のように表示され、クリックするとリンク先 のページが表示されます。

(9)

第3章 各モジュールへの情報の入力方法 1 ニュースモジュール - 7 - 写真をアップロードして本文内に写真を表示 あらかじめ、写真のサイズなどを調 整し、わかりやすい名前で準備します。 第4章の「1 写真の加工」を参考に してください。 ※ ファイル名は必ず半角英数で! MANAGERボタンをクリックすると右 のような画面が表示される。 送信ボタンの左の▼をクリックし て写真のカテゴリを選ぶ。 画面右の閉じるボタンの上に「画像ファイルの追加」と表示されるのでクリックする。 「画像ファイル名」横の参照ボタンを クリックする。 写真を保存したフォルダを探して表 示し、送信する画像をクリックして 開く(O)ボタンをクリックする。 画像名を入力する。これは日本語で構わない。 送信ボタンをクリックする。

(10)

- 8 - 画像が表示される。 右側の位置ボタン(左から、左揃え、中 央、右揃え)をクリックするとコードがカ ーソル位置に挿入される。 入力が完了したら、プレビューボタンをクリックすると下図のように確認することもできる。 「メールを受け取る」のチェックボックスはメールサーバーを設定し ていない場合ははずす。 最後は必ず投稿するをクリックする。 確認メッセージが表示される。

(11)

第3章 各モジュールへの情報の入力方法 1 ニュースモジュール - 9 - ⑷ ワープロソフトで作成した文書の利用 あらかじめ、ワープロソフトで作成した文書と同じ内容を掲載したい場合はコピーアンドペース トすれば簡単です。 ① ワープロソフトで元文書を開く。下記の画面例はWord2007ですが、Wordの他のバージョンや一太 郎でも同じです。 ② コピーしたい部分をドラ ッグする。文字列の色が反 転する。 ※ ドラッグとは:選択した い部分の開始点でマウスを クリックし、クリックした ままマウスを移動させ、終 了点でマウスを離すこと。 ③

反転した部分の上

でマウスを右クリックする。 メニューが表示される。 「コピー」をクリックする。 ※ 画面上は何も変化しません。 ④ 「ニュース投稿」の「メッセージ本文」入力枠の上でマウスを右クリックする。メニューが表示 される。「貼り付け(P)」をクリックする。

(12)

- 10 - ⑤ 文字列がはり付けられるので、成形する。

ポイント!

「ニュース」は文字通りニュースを掲載するところなので、ワープロ文書のように成形することは簡 単ではありません(「コードを入力」を用いればある程度は可能です)。特にサイトを見る側の人は文 字の表示サイズを変更したり、ブラウザのサイズを変更したりしていますので、極力文字列には修飾を 加えないようにしましょう。 同じページを見ても、見る人によって表示幅はさまざまに設定します。 ← 横幅狭く表示 ← 横幅広く表示

(13)

第3章 各モジュールへの情報の入力方法 2 WordPress モジュール - 11 - 2 WordPress モジュール 「WordPress」に情報を掲載する場合の手順について説明します。 ⑴ サイトにログイン後、メインメニュー中の「WordPress」をクリックし ます。 ⑵ 「Blog を書く」のメニューが表示されるのでそれをクリックします。 ⑶ 下のような画面が表示されます。「タイトル」を入力し、「カテゴリー」にチェックを入れて、 「投稿内容」に文章を打ち込んでくだ さい。 文字を入力するだけな らば、ここに入力してい くとよい。 ここに、文書の表題を 入力する。 ここをクリックして、 カテゴリーにチェック を入れる。複数可。

(14)

- 12 - タイトルは簡単で内容がよくわかるように記述してください。 「カテゴリー」は該当するものにチェックを入れる。複数選択可。 本文に文字を入力していく。文字装飾を行いたい場合にはツールバーを利用する。 ツールバーの説明は次ページを参考にしてください。 入力が完了したら、書き出しボタンをクリックする。

※ 注意

学校で運用するサイトでは、文字装飾が華美になると読みにくく、内容も正しく伝わり

にくいことがある。強調したいところの色を変えるか、アンダーラインを引く程度で抑

えたほうがよい。

(15)

第3章 各モジュールへの情報の入力方法 2 WordPress モジュール - 13 - ⑷ ツールバーについて 基本的な使い方は、修飾したい文字列をドラッグして選択し、ボタンをクリックするだけである。 ボタンの上にマウスカーソルを置くと、右の図のようにヒントが表示されるので、参考にするとよい。 順番に[切り取り]、[コピー]、[貼り付け] [切り取り]:選択した文字列を切り取る。文字列は消去。 [コピー] :選択した文字列をコンピュータ内に一時保存。文字列はそのまま。 [貼り付け]:[切り取り]や[コピー]した文字列をカーソル位置にはり付ける。 [元に戻す]、[やり直す] [元に戻す]:直前の操作を取り消して元に戻す。 [やり直す]:[元に戻す]を取り消す。 順番に[太字]、[斜体]、[下線]の修飾を行う。 順番に[左揃え]、[中央揃え]、[右揃え]、[均等割付]を行う。 [インデント追加]と[インデント削除] [文字色]と[背景色]を変更する。 [下付文字]と[上付文字] [番号リスト]と[リスト]、自動的に行頭に番号、もしくは「・」を付ける。

(16)

- 14 - [ハイパーリンク]、[イメージの挿入]、[イメージのプロパティ]、[イメージの ポップアップ]、[区切り線] [ハイパーリンク]:リンクを作成する。 『タイプ』には次の3種類がある。 [リンク]、[アンカー]、[アンカーへのリンク] [リンク]の場合 他ページや他サイトへのリンクを作成する。 「url」にはジャンプ先のアドレスを記載する。 「ターゲット」は自校サイト内なら、『同一ウインドウ』 または『新規ウインドウ』のうちふさわしいものを、他 のサイトならば『新規ウインドウ』にする。 「タイトル」にはジャンプ先のページが分かるように記載する。 [アンカー]はページ内のジャンプ先を作成する。 「アンカー名」に名前を付ける。 「タイトル」はその文字の上にマウスカーソルを持って行った時に文字が表示される。 左のように「アンカーの記述例」という文字 列を選択して、各項目を記述すると、ブラウザ では下のように表示される。 [アンカーへのリンク]はページ内のアンカーへジャンプするリンクを作成する。 左のように「アンカーへのリンク」という文字 列を選択して、各項目を記述すると、ブラウザ では下のように表示される。それをクリックす るとページが設定したアンカーまで移動する。

(17)

第3章 各モジュールへの情報の入力方法 2 WordPress モジュール - 15 - [イメージの挿入]:画像を挿入する。 クリックすると右のような画面が 表示される。 アップロードの横の参照ボタンを クリックする。 作業しているコンピュータ内の画 像の入ったフォルダを指定し、該当す る画像を選択後、開くボタンをクリッ クする。 アップロードボタンをクリックすると、「イメージ」 の中に画像名が表示 される。 選択するをクリックすると、画像が挿入される。 ※ 注意! 挿入された画像をクリックすると、画像の周囲に□が表示される。 これをドラッグすると画像の拡大、縮小や変形が可能だが、画像表示が荒 くなるため基本的には行ってはならない。

(18)

- 16 - [イメージのプロパティ]:貼り付けた画像の設定情報の編集 ← 変更しない ← 画像の説明を記入、日本語でよい 行揃えは適切なものを選ぶ その他は変更しなくてもよい。 [イメージのポップアップ]:標準設定では無効になっています。使用しません。 [区切り線]:横線を挿入 [テーブルの作成]、[テーブルのプロパティ]、[セルのプ ロパティ]、[行の挿入]、[列の挿入]、[行の削除]、[列の削除]、[右の列と結合]、[下の行と結合]、 [行を分割]、[列を分割] [テーブルの作成]:新しく表を作成する [テーブルのプロパティ] 行と列に数値を入力する。 その他の数値はそのままでよい。 ※ そのほかのボタンは、Wordや 一太郎、Excelで表を管理する のと同じである。

(19)

第3章 各モジュールへの情報の入力方法 2 WordPress モジュール - 17 - ⑸ ワープロソフトで作成した文書の利用 あらかじめ、ワープロソフトで作成した文書と同じ内容を掲載したい場合はコピーアンドペース トすれば簡単です。 ① ワープロソフトで元文書を開く。下記の画面例はWord2007ですが、Wordの他のバージョンや一太 郎でも同じです。 ② コピーしたい部分をドラ ッグする。文字列の色が反 転する。 ※ ドラッグとは:選択した い部分の開始点でマウスを クリックし、クリックした ままマウスを移動させ、終 了点でマウスを離すこと。 ③

反転した部分の上

でマウスを右クリックする。 メニューが表示される。 「コピー」をクリックする。 ※ 画面上は何も変化しません。 ④ 「WordPress」の「投稿内容」画面の右下のHtmlをクリックする。

(20)

- 18 - 入力枠の上でマウスを右クリックする。メニューが

表示される。「貼り付け(P)」をクリックする。

(21)

第3章 各モジュールへの情報の入力方法 2 WordPress モジュール - 19 -

※ Htmlボタン、とDesignボタンとは?

W e bページは、HTMLという一種の言語を用いて記述します。ただの文字情報だけならばそのまま 「運動会といえば」という風に記述すればよいのですが、文字の大きさやフォント、色を変えたり、画 像を表示したりするためにはちょっとした工夫が必要です。ホームページ・ビルダーなどのW e bページ 作成ソフトは、そのHTML言語を気にすることなくワープロソフト風に作業ができます。それと同じ 画面なのがDesignです。 このあたりは少し複雑なので「こういう手順でやればうまくいく」というくらいで納得してください。 HTML言語に興味がある方は少し勉強してもいいでしょうが、くれぐれもやりすぎに注意してくださ い。

(22)

- 20 -

※ Designモードのまま作業するとどうなるの?

上手に使うと、Wordの装飾をそのまま使うことができます。しかし、次ページのような問題が生じる 場合もあり、本校ではお勧めしません。 <Wordの元文書例> デザインモードのまま貼り付けた。 ○ フォントのサイズ ○ フォントの種類 ○ 蛍光ペン ○ 箇条書き ○ 下線 などがそのまま引き継が れている。

(23)

第3章 各モジュールへの情報の入力方法 2 WordPress モジュール - 21 - ブラウザで確認すると 修飾が反映されている。 Htmlモードで確認する と、何やら不思議な文字 の羅列になっている。 こうなるとこの後修正 を加えるのは大変な作 業になります。 また、次のようにこの謎の文字列が表 示されてしまうこともあります。 この部分

Updating...

参照

Updating...

関連した話題 :