学 校 WebサイトへのXOOPS 導 入 マニュアル (コンテンツ 入 力 ) Ver.0.9 (2008.6.24) 愛 媛 県 総 合 教 育 センター 情 報 教 育 研 究 室
目 次 第 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 作 成 した 図 の 一 部 を 保 存 し Webに 用 いる... 48 印 刷 物 を Word 文 書 にする... 49 文 書 のイメージをプレゼンテーションに 貼 る... 50 ⑶ アプリケーションソフトで 作 った 文 書 の 一 部 を 簡 単 に 図 にする... 52 All Rights Reserved Copyright(C)Ehime Pref.Educational Research Center
第 1 章 このマニュアルについて 1 はじめに 2 このマニュアルの 使 い 方 第 1 章 このマニュアルについて 1 はじめに このマニュアルは XOOPSで 作 成 した 学 校 のW e bサイトにコンテンツをアップロードする 際 に コン ピュータ 操 作 が 不 慣 れな 方 でも 簡 単 に 入 力 できるようにするためのものです 1 著 作 権 について 本 テキストのすべての 内 容 は 著 作 権 法 上 の 保 護 を 受 けています 本 テキストに 掲 載 の 文 書 や 画 像 等 の 無 断 転 載 を 禁 じます 2 利 用 について 本 テキストは 愛 媛 県 内 の 教 職 員 を 対 象 に 提 供 します 改 変 にあたっては 愛 媛 県 内 の 学 校 内 で 使 用 する 場 合 についてのみ 自 由 に 行 ってかまいません 愛 媛 県 総 合 教 育 センターの 許 諾 を 得 る 必 要 はありません 改 編 マニュアルの 作 成 校 以 外 での 二 次 使 用 は 禁 止 します 3 商 標 について 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(アドビシステムズ 社 ) の 商 標 です その 他 本 テキストに 記 載 されている 社 名 製 品 名 はそれぞれの 会 社 の 商 標 または 登 録 商 標 です 本 文 中 では TM 及 び R マークは 明 記 していません - 1 -
第 1 章 このマニュアルについて 1 はじめに 2 このマニュアルの 使 い 方 2 このマニュアルの 使 い 方 このマニュアルは 学 校 の 実 情 に 応 じて 自 由 にお 使 いください そのまま 使 用 しても 編 集 して 利 用 してもかまいません 改 編 の 例 マニュアルの 必 要 な 部 分 だけ 印 刷 して 使 用 する このマニュアル 内 の WordPress という 文 字 は 本 校 W e bサイトでは セキュリティ 情 報 と 表 記 しています すべて 読 み 換 えてご 覧 ください といった 注 釈 を 加 えておく 画 面 で 使 用 している 図 版 を 自 校 のものに 置 き 換 える マニュアル 中 に 使 用 している 文 字 を 自 校 用 の 表 現 に 置 き 換 える 例 えば 右 図 の 例 (ESnetポータルサイト)のように WordPress を 用 いて 作 成 している セキュリティ 情 報 がある 場 合 マニュ アル 中 の WordPress をすべて セキュリティ 情 報 と 置 換 する と 利 用 者 はわかりやすいでしょう Word2007の 場 合 ホーム 編 集 置 換 - 2 -
第 2 章 編 集 するためのサイトへのログイン 方 法 1 はじめに 第 2 章 編 集 するためのサイトへのログイン 方 法 XOOPSで 作 成 したこのサイトは セキュリティ 確 保 のため ユーザ 名 とパスワードを 利 用 してログイ ンし 編 集 や 情 報 提 供 の 作 業 を 行 います まずログインしてください 1 ログインする 自 校 のサイト 名 を 入 力 してください インターネットエクスプローラを 開 いてログインサイトを 開 いてください アドレスは( )です 2 与 えられたユーザ 名 とパスワードを 入 力 しログインボタンをクリックしてください 編 集 する 権 限 があるページの 編 集 作 業 を 行 うことができます - 3 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 1 ニュースモジュール 第 3 章 各 モジュールへの 情 報 の 入 力 方 法 1 ニュースモジュール ニュース に 情 報 を 掲 載 する 場 合 の 手 順 について 説 明 します ⑴ サイトにログイン 後 メインメニュー 中 の ニュース をク リックします ⑵ ニュース 投 稿 のメニューが 表 示 されるのでそれをクリック します ⑶ 下 のような 画 面 が 表 示 されます タイトルを 入 力 し 文 章 を 打 ち 込 んでください ここに 文 書 の 表 題 を 入 力 する ここをクリックして トピックのグループを 選 択 する 文 字 を 入 力 するだけな らば ここに 入 力 してい くとよい - 4 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 1 ニュースモジュール 表 題 は 簡 単 で 内 容 がよくわかるように 記 述 してください トピック は をクリックすると 一 覧 が 表 示 されるので 該 当 するものを 選 択 する 本 文 に 文 字 を 入 力 していく 文 字 装 飾 を 行 いたい 場 合 には 追 加 ボタン 左 の 枠 に 文 字 列 を 入 力 し 文 字 サイズ フォント 色 その 他 の 書 式 を 選 ぶと サンプル の 文 字 が 変 化 するので 確 認 し 追 加 ボタンをクリックする このように 表 示 される 文 字 の 大 きさ フォントの 種 類 ( 欧 文 のみ) 文 字 色 ここが 変 化 する 太 字 斜 体 下 線 取 り 消 し 線 ここに 文 字 列 を 入 力 注 意 学 校 で 運 用 するサイトでは 文 字 装 飾 が 華 美 になると 読 みにくく 内 容 も 正 しく 伝 わり にくいことがある 強 調 したいところの 色 を 変 えるか アンダーラインを 引 く 程 度 で 抑 えたほうがよい - 5 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 1 ニュースモジュール の 使 い 方 左 から 順 番 に W e bページへのリンク メールアドレス 本 文 内 にサーバ 内 の 写 真 を 表 示 写 真 をアップロードして 本 文 内 に 写 真 を 表 示 コードを 入 力 引 用 に 利 用 します 各 ボタンをクリック 後 右 のようなメッセージが 表 示 され る 場 合 は まず 閉 じるをクリックしてください その 後 画 面 上 部 に 下 図 のような 黄 色 いメッセージが 表 示 されます クリック すると メッセージが 表 示 されるので 許 可 をクリックします 再 度 ボタンをクリックしてください メールアドレス 本 文 内 にサーバ 内 の 写 真 を 表 示 コードを 入 力 引 用 は 使 いません 使 いたい 場 合 はW e b 管 理 者 に 相 談 してください W e bページへのリンク 例 えば 愛 媛 県 のW e bページへリンク をはりたい 場 合 に 使 います ボタンをクリックすると 右 のような 窓 が 開 くので W e bサイトのアドレス を 入 力 してください OKを 押 すと 今 度 はサイト 名 の 入 力 を 要 求 してきます 入 力 してください 今 入 力 した 文 字 列 の 前 後 に [url= のような 文 字 列 が 付 加 して 挿 入 されま した この [url= [/url] の 部 分 は 編 集 しないでください 左 のように 表 示 され クリックするとリンク 先 のページが 表 示 されます - 6 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 1 ニュースモジュール 写 真 をアップロードして 本 文 内 に 写 真 を 表 示 あらかじめ 写 真 のサイズなどを 調 整 し わかりやすい 名 前 で 準 備 します 第 4 章 の 1 写 真 の 加 工 を 参 考 に してください ファイル 名 は 必 ず 半 角 英 数 で! MANAGERボタンをクリックすると 右 のような 画 面 が 表 示 される 送 信 ボタンの 左 の をクリックし て 写 真 のカテゴリを 選 ぶ 画 面 右 の 閉 じるボタンの 上 に 画 像 ファイルの 追 加 と 表 示 されるのでクリックする 画 像 ファイル 名 横 の 参 照 ボタンを クリックする 写 真 を 保 存 したフォルダを 探 して 表 示 し 送 信 する 画 像 をクリックして 開 く(O)ボタンをクリックする 画 像 名 を 入 力 する これは 日 本 語 で 構 わない 送 信 ボタンをクリックする - 7 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 1 ニュースモジュール 画 像 が 表 示 される 右 側 の 位 置 ボタン( 左 から 左 揃 え 中 央 右 揃 え)をクリックするとコードがカ ーソル 位 置 に 挿 入 される 入 力 が 完 了 したら プレビューボタンをクリックすると 下 図 のように 確 認 することもできる メールを 受 け 取 る のチェックボックスはメールサーバーを 設 定 し ていない 場 合 ははずす 最 後 は 必 ず 投 稿 するをクリックする 確 認 メッセージが 表 示 される - 8 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 1 ニュースモジュール ⑷ ワープロソフトで 作 成 した 文 書 の 利 用 あらかじめ ワープロソフトで 作 成 した 文 書 と 同 じ 内 容 を 掲 載 したい 場 合 はコピーアンドペース トすれば 簡 単 です 1 ワープロソフトで 元 文 書 を 開 く 下 記 の 画 面 例 はWord2007ですが Wordの 他 のバージョンや 一 太 郎 でも 同 じです 2 コピーしたい 部 分 をドラ ッグする 文 字 列 の 色 が 反 転 する ドラッグとは: 選 択 した い 部 分 の 開 始 点 でマウスを クリックし クリックした ままマウスを 移 動 させ 終 了 点 でマウスを 離 すこと 3 反 転 した 部 分 の 上 でマウスを 右 クリックする メニューが 表 示 される コピー をクリックする 画 面 上 は 何 も 変 化 しません 4 ニュース 投 稿 の メッセージ 本 文 入 力 枠 の 上 でマウスを 右 クリックする メニューが 表 示 される 貼 り 付 け(P) をクリックする - 9 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 1 ニュースモジュール 5 文 字 列 がはり 付 けられるので 成 形 する ポイント! ニュース は 文 字 通 りニュースを 掲 載 するところなので ワープロ 文 書 のように 成 形 することは 簡 単 ではありません( コードを 入 力 を 用 いればある 程 度 は 可 能 です) 特 にサイトを 見 る 側 の 人 は 文 字 の 表 示 サイズを 変 更 したり ブラウザのサイズを 変 更 したりしていますので 極 力 文 字 列 には 修 飾 を 加 えないようにしましょう 同 じページを 見 ても 見 る 人 によって 表 示 幅 はさまざまに 設 定 します 横 幅 狭 く 表 示 横 幅 広 く 表 示 - 10 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール 2 WordPress モジュール WordPress に 情 報 を 掲 載 する 場 合 の 手 順 について 説 明 します ⑴ サイトにログイン 後 メインメニュー 中 の WordPress をクリックし ます ⑵ Blog を 書 く のメニューが 表 示 されるのでそれをクリックします ⑶ 下 のような 画 面 が 表 示 されます タイトル を 入 力 し カテゴリー にチェックを 入 れて 投 稿 内 容 に 文 章 を 打 ち 込 んでくだ さい ここに 文 書 の 表 題 を 入 力 する ここをクリックして カテゴリーにチェック を 入 れる 複 数 可 文 字 を 入 力 するだけな らば ここに 入 力 してい くとよい - 11 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール タイトルは 簡 単 で 内 容 がよくわかるように 記 述 してください カテゴリー は 該 当 するものにチェックを 入 れる 複 数 選 択 可 本 文 に 文 字 を 入 力 していく 文 字 装 飾 を 行 いたい 場 合 にはツールバーを 利 用 する ツールバーの 説 明 は 次 ページを 参 考 にしてください 入 力 が 完 了 したら 書 き 出 しボタンをクリックする 注 意 学 校 で 運 用 するサイトでは 文 字 装 飾 が 華 美 になると 読 みにくく 内 容 も 正 しく 伝 わり にくいことがある 強 調 したいところの 色 を 変 えるか アンダーラインを 引 く 程 度 で 抑 えたほうがよい - 12 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール ⑷ ツールバーについて 基 本 的 な 使 い 方 は 修 飾 したい 文 字 列 をドラッグして 選 択 し ボタンをクリックするだけである ボタンの 上 にマウスカーソルを 置 くと 右 の 図 のようにヒントが 表 示 されるので 参 考 にするとよい 順 番 に[ 切 り 取 り] [コピー] [ 貼 り 付 け] [ 切 り 取 り]: 選 択 した 文 字 列 を 切 り 取 る 文 字 列 は 消 去 [コピー] : 選 択 した 文 字 列 をコンピュータ 内 に 一 時 保 存 文 字 列 はそのまま [ 貼 り 付 け]:[ 切 り 取 り]や[コピー]した 文 字 列 をカーソル 位 置 にはり 付 ける [ 元 に 戻 す] [やり 直 す] [ 元 に 戻 す]: 直 前 の 操 作 を 取 り 消 して 元 に 戻 す [やり 直 す]:[ 元 に 戻 す]を 取 り 消 す 順 番 に[ 太 字 ] [ 斜 体 ] [ 下 線 ]の 修 飾 を 行 う 順 番 に[ 左 揃 え] [ 中 央 揃 え] [ 右 揃 え] [ 均 等 割 付 ]を 行 う [インデント 追 加 ]と[インデント 削 除 ] [ 文 字 色 ]と[ 背 景 色 ]を 変 更 する [ 下 付 文 字 ]と[ 上 付 文 字 ] [ 番 号 リスト]と[リスト] 自 動 的 に 行 頭 に 番 号 もしくは を 付 ける - 13 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール ポップアップ] [ 区 切 り 線 ] [ハイパーリンク] [イメージの 挿 入 ] [イメージのプロパティ] [イメージの [ハイパーリンク]:リンクを 作 成 する タイプ には 次 の3 種 類 がある [リンク] [アンカー] [アンカーへのリンク] [リンク]の 場 合 他 ページや 他 サイトへのリンクを 作 成 する url にはジャンプ 先 のアドレスを 記 載 する ターゲット は 自 校 サイト 内 なら 同 一 ウインドウ または 新 規 ウインドウ のうちふさわしいものを 他 のサイトならば 新 規 ウインドウ にする タイトル にはジャンプ 先 のページが 分 かるように 記 載 する [アンカー]はページ 内 のジャンプ 先 を 作 成 する アンカー 名 に 名 前 を 付 ける タイトル はその 文 字 の 上 にマウスカーソルを 持 って 行 った 時 に 文 字 が 表 示 される 左 のように アンカーの 記 述 例 という 文 字 列 を 選 択 して 各 項 目 を 記 述 すると ブラウザ では 下 のように 表 示 される [アンカーへのリンク]はページ 内 のアンカーへジャンプするリンクを 作 成 する 左 のように アンカーへのリンク という 文 字 列 を 選 択 して 各 項 目 を 記 述 すると ブラウザ では 下 のように 表 示 される それをクリックす るとページが 設 定 したアンカーまで 移 動 する - 14 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール [イメージの 挿 入 ]: 画 像 を 挿 入 する クリックすると 右 のような 画 面 が 表 示 される アップロードの 横 の 参 照 ボタンを クリックする 作 業 しているコンピュータ 内 の 画 像 の 入 ったフォルダを 指 定 し 該 当 す る 画 像 を 選 択 後 開 くボタンをクリッ クする アップロードボタンをクリックすると イメージ の 中 に 画 像 名 が 表 示 される 選 択 するをクリックすると 画 像 が 挿 入 される 注 意! 挿 入 された 画 像 をクリックすると 画 像 の 周 囲 に が 表 示 される これをドラッグすると 画 像 の 拡 大 縮 小 や 変 形 が 可 能 だが 画 像 表 示 が 荒 くなるため 基 本 的 には 行 ってはならない - 15 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール [イメージのプロパティ]: 貼 り 付 けた 画 像 の 設 定 情 報 の 編 集 変 更 しない 画 像 の 説 明 を 記 入 日 本 語 でよい 行 揃 えは 適 切 なものを 選 ぶ その 他 は 変 更 しなくてもよい [イメージのポップアップ]: 標 準 設 定 では 無 効 になっています 使 用 しません [ 区 切 り 線 ]: 横 線 を 挿 入 [テーブルの 作 成 ] [テーブルのプロパティ] [セルのプ ロパティ] [ 行 の 挿 入 ] [ 列 の 挿 入 ] [ 行 の 削 除 ] [ 列 の 削 除 ] [ 右 の 列 と 結 合 ] [ 下 の 行 と 結 合 ] [ 行 を 分 割 ] [ 列 を 分 割 ] [テーブルの 作 成 ]: 新 しく 表 を 作 成 する [テーブルのプロパティ] 行 と 列 に 数 値 を 入 力 する その 他 の 数 値 はそのままでよい そのほかのボタンは Wordや 一 太 郎 Excelで 表 を 管 理 する のと 同 じである - 16 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール ⑸ ワープロソフトで 作 成 した 文 書 の 利 用 あらかじめ ワープロソフトで 作 成 した 文 書 と 同 じ 内 容 を 掲 載 したい 場 合 はコピーアンドペース トすれば 簡 単 です 1 ワープロソフトで 元 文 書 を 開 く 下 記 の 画 面 例 はWord2007ですが Wordの 他 のバージョンや 一 太 郎 でも 同 じです 2 コピーしたい 部 分 をドラ ッグする 文 字 列 の 色 が 反 転 する ドラッグとは: 選 択 した い 部 分 の 開 始 点 でマウスを クリックし クリックした ままマウスを 移 動 させ 終 了 点 でマウスを 離 すこと 3 反 転 した 部 分 の 上 でマウスを 右 クリックする メニューが 表 示 される コピー をクリックする 画 面 上 は 何 も 変 化 しません 4 WordPress の 投 稿 内 容 画 面 の 右 下 のHtmlをクリックする - 17 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール 入 力 枠 の 上 でマウスを 右 クリックする メニューが 表 示 される 貼 り 付 け(P) をクリックする 5 文 字 列 がはり 付 けられるので Designボタンをクリックしてから 成 形 する - 18 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール Htmlボタン とDesignボタンとは? W e bページは HTMLという 一 種 の 言 語 を 用 いて 記 述 します ただの 文 字 情 報 だけならばそのまま 運 動 会 といえば という 風 に 記 述 すればよいのですが 文 字 の 大 きさやフォント 色 を 変 えたり 画 像 を 表 示 したりするためにはちょっとした 工 夫 が 必 要 です ホームページ ビルダーなどのW e bページ 作 成 ソフトは そのHTML 言 語 を 気 にすることなくワープロソフト 風 に 作 業 ができます それと 同 じ 画 面 なのがDesignです このあたりは 少 し 複 雑 なので こういう 手 順 でやればうまくいく というくらいで 納 得 してください HTML 言 語 に 興 味 がある 方 は 少 し 勉 強 してもいいでしょうが くれぐれもやりすぎに 注 意 してくださ い - 19 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール Designモードのまま 作 業 するとどうなるの? 上 手 に 使 うと Wordの 装 飾 をそのまま 使 うことができます しかし 次 ページのような 問 題 が 生 じる 場 合 もあり 本 校 ではお 勧 めしません <Wordの 元 文 書 例 > デザインモードのまま 貼 り 付 けた フォントのサイズ フォントの 種 類 蛍 光 ペン 箇 条 書 き 下 線 などがそのまま 引 き 継 が れている - 20 -
第 3 章 各 モジュールへの 情 報 の 入 力 方 法 2 WordPress モジュール ブラウザで 確 認 すると 修 飾 が 反 映 されている Htmlモードで 確 認 する と 何 やら 不 思 議 な 文 字 の 羅 列 になっている こうなるとこの 後 修 正 を 加 えるのは 大 変 な 作 業 になります また 次 のようにこの 謎 の 文 字 列 が 表 示 されてしまうこともあります この 部 分 - 21 -