【パソコン実習】　OpenOffice.org でホームページを作成しよう

拡張機能の使い方、スタイルの考え方がわかる

特定非営利活動法人 OpenOffice.org 日本ユーザー会

鎌滝雅久

オープンソースカンファレンス 2011 Kagawa

2011 年 2 月 5 日土曜日

会場：サンポートホール高松 ホール棟１ F 市民ギャラリー（受付・セミナー） タワー棟 4F/5F e-とぴあ・かがわ（展示・セミナー）

主催：オープンソースカンファレンス実行委員会

共催：e-とぴあ・かがわ

　　　情報処理学会四国支部（第 2 回四国オープンソースセミナー）

後援：JGN2plus

企画運営：株式会社びぎねっと

- 1 -

OpenOffice.org の紹介

OpenOffice.org は、オープンソースで開発されている統合オフィスソフトです。製品

名と同じ名前のコミュニティが開発し、世界中のユーザーが利用するスタンダードなソフ

トウェアとなってきています。以下のような特徴を持ちます。

• ワープロや表計算・プレゼンツールなどを統合したオフィスソフトです

• 無料で入手できて、誰でも自由に利用できます

• マイクロソフトオフィスのファイルを読み書きでき、操作もよく似ています

• ほかのソフトと文書交換しやすい、標準ファイル形式 OpenDocument を採用(ISO

26300)

• OpenOffice.org は、オープンソースという方針で開発・公開されています

• 正式名称は、OpenOffice.org(オープンオフィス ドット オルグ)です

• このソフトの開発元も、OpenOffice.org という名前です

今回は、ホームページの作成に OpenOffice.org を利用し、OpenOffice.org のワード

プロセッサである Writer の「スタイルと書式設定」機能の使いやすさを紹介できればと

思っています。また、標準ではけっして豊富とは言えない OpenOffice.org のクリップ

アートを、飛躍的に拡充したり、インターネットからいつでも欲しい画像を入手できる便

利な拡張機能も紹介します。

ハンズオンセミナーを受講される方には、パソコンを実際に操作していただいて、

ホームページの作成方法とともに OpenOffice.org の操作方法も学んでいただければと思

います。

OpenOffice.org を起動する

まずは、OpenOffice.org を起動します。

- 2 -

図 1:① パソコンのデスクトップにある OpenOffice.org 3.3 のショート

カットアイコンをダブルクリックする

- 3 -

図 2:②OpenOffice.org が起動する。

付属クリップアートの数を増やす拡張機能の紹介

OpenOffice.org には、「拡張機能」が備わっています。Microsoft Office では、アド

インやアドオンと呼ばれているオフィスソフトに便利な機能を付加する外部アプリケー

ションが存在します。それとほぼ同じものであると思ってください。

インストールされている拡張機能を確認する

お使いの OpenOffice.org にどのような拡張機能がインストールされているか確認しま

しょう。そのために次の手順で「拡張機能マネージャー」を起動します。

- 4 -

図 3:①[ツール]-[拡張機能マネージャー]をクリックする

みなさんのパソコンの[拡張機能マネージャー]に、「DSFJ SozaiOOo」「EuroOffice

Online Clipart」という拡張機能がインストールされているか、ご確認ください。

コラム拡張機能について

拡張機能は、専用のリポジトリサイト（配布サイト）があり、通常はこのサイトから

利用したいものをダウンロードし、[拡張機能マネージャー]を使ってインストールしま

す。拡張機能リポジトリサイトの URL は以下となります。

http://extensions.services.openoffice.org/

「DSFJ SozaiOOo」と「EuroOffice Online Clipart」はそれぞれ、以下の URL に登

録されています。

• DSFJ SozaiOOo

http://extensions.services.openoffice.org/en/project/DSFJ-SozaiOOo

• EuroOffice Online Clipart

http://extensions.services.openoffice.org/en/project/eurooffice-online-clipart

拡張機能リポジトリサイトには、上記以外のクリップアートの拡張機能もたくさんあ

ります。時間のあるときに探してみてください。

- 5 -

図 4:②[拡張機能マネージャー]が起動する

ホームページ作成は OpenOffice.org の HTML 編集機能で

それでは、実際にホームページ作成の実習に進みます。Windows のスタートメニュー

には下図のようにHTML を編集するアプリケーションは見当たりません。

HTML とは、ホームページを作成する言語のことですが、OpenOffice.org を使って簡

単なホームページを作成する範囲では、このような言語を意識する必要はありませ

ん。OpenOffice.org のHTML編集機能は、ほぼ、OpenOffice.org のワードプロセッサ

である Writer の操作を引き継いでいますから、ワープロを利用する感覚でホームページ

の作成が行えます。

OpenOffice.org を起動後の画面で、[ファイル]-[新規作成]-[HTML 形式ドキュメント]

を選びます。

- 6 -

図 5:スタートメニューに登録された OpenOffice.org のメニュー

OpenOffice.org の画面が、次の図のように変わります。これが、OpenOffice.org の

HTML 形式ドキュメントの編集画面です。タイトルバーには、「 OpenOffice.org

Writer/Web」と表示されています。

- 7 -

図 6:[ファイル]-[新規作成]-[HTML 形式ドキュメント]を

選ぶ

図 7:HTML 形式ドキュメントの編集画面

ワープロの「見出し」がホームページの「見出し」に

さっそくホームページ作りにとりかかりましょう。今回は、香川県の観光情報を扱う

ホームページにしてみます。以下の図のように、1行目に「香川県の観光情報」、2行目

に「高松城」、3行目に「讃岐うどん」と入力してください。IME（漢字変換）がオフの

場合は、キーボードの「全角/半角」キーを押してください。

1行目の「香川県の観光情報」に「見出し 1」のスタイルを、2行目の「高松城」、3

行目の「讃岐うどん」には「見出し 2」のスタイルを設定します。手順は以下のようにな

ります。

- 8 -

図 8:HTML 形式ドキュメントの編集画面

に日本語を入力する

図 9:①1行目の先頭をマウスでクリックしてカーソルのポインタを置

く

図 10:② ツールバーの[スタイルの適用]欄の右側の「▼」ボタンをク

リックして、「見出し 1」をクリックする

- 9 -

図 11:③1行目に「見出し 1」のスタイルが適用される

図 12:④2行目の先頭をマウスでクリックしてカーソルのポインタを置

く

図 13:⑤ツールバーの[スタイルと書式設定]ボタンをクリックする

コラム「見出し」スタイルと HTML 言語の関係

「見出し 1」スタイルは、HTML 言語のタグ<h1>～</h1>に対応しています。また、

「見出し 2」スタイルは、タグ<h2>～</h2>に対応しています。このように、Writer の

見出しスタイルを設定することで、HTML 言語を意識せずに、HTML 形式ドキュメント

の編集を行うことができます。

実習　3 行目に「見出し 2」のスタイルを適用してください

- 10 -

図 14:⑥表示された[スタイルと書式設定]の「見出し 2」スタイルをダ

ブルクリックする

図 15:⑦2行目に「見出し 2」のスタイルが適用される

改段落と改行の違い

Microsoft Wordをお使いの方は、あまり意識をされないと思いますが、ホームページ

では、改段落と改行では異なる扱いとなります。具体的には、改段落はHTML 言語のタ

グ<p>、改行はタグ<br>が使われます。

OpenOffice.org の Writer を利用すれば、この違いも気にせずホームページ作りが行え

ます。ここで作成している「香川県の観光情報」を扱うホームページで、次の図のように

「高松城」の説明文を入力します。

赤い線で囲ったツールバーの[編集記号]ボタンをクリックしてください。次の図のよう

に、画面に表示された記号が改段落を表しています。

- 11 -

図 16:「高松城」の説明文

図 17:改段落の編集記号

「高松城」の説明文の 1行目のどこでも良いので、マウスでクリックして、カーソル

のポインタを置きます。その位置で「Shift+Enter」キーを押してください。次の図のよ

うに改行されます。

赤い線で囲った記号が、改行の編集記号です。

Writer では、改段落と改行が区別されることを覚えておいてください。また、改行時

にはほぼ 1行分の行送りが行なわれますが、改段落の場合は、1行分以上の行送りが行な

われている点もわかると思います。このように、Writer で作成すれば、ホームページ上

でも区別される改段落と改行の違いを見た目でも理解できると思います。

- 12 -

図 18:改行が挿入された

クリップアートを利用してみよう

ホームページ作りは、香川県の観光情報にふさわしい図を挿入して完成させましょ

う。セミナーの最初に紹介したように、図の利用がさらに便利になる拡張機能をインス

トールしています。

ここでは、拡張機能の「EuroOffice Online Clipart」を使って、インターネットから

ふさわしい図を挿入してみたいところですが、会場の関係で残念ながら、インターネット

を使った図の挿入ができません。一応、「EuroOffice Online Clipart」で図の挿入方法を

説明しておきます。ちなみに「EuroOffice Online Clipart」は、Writer 用の拡張機能で

す。タイトルバーに「Writer/Web」と表示されている場合は、メニューに表示されませ

ん。「EuroOffice Online Clipart」を利用する場合は、Writer で図を挿入し、HTML 形

式ドキュメントの編集画面にコピーすると良いでしょう。

「EuroOffice Online Clipart」の使い方は次のとおりです。

- 13 -

図 19:①[挿入]メニューの[EuroOffice Clipart Online]をクリックする

- 14 -

図 20:②Keyword 欄に挿入したい図の検索ワードを

入力し、[Search]ボタンをクリックする

図 21:③挿入したい図をクリックする

このように、Wikimedia Commons にアップされている図が検索され、インターネッ

ト上の URLへのリンクとして挿入されます。さらに著作権表示も自動で挿入されるの

で、ホームページで公開する際の著作権に関する手続きも済んだ状態で利用できると考え

てよいでしょう。

デスクトップの画像を挿入する

今回は、お使いのパソコンのデスクトップに、「EuroOffice Online Clipart」で検索

した画像を用意しておきました。この画像を挿入する方法を紹介します。

- 15 -

図 22:④図が挿入される

図 23:① 図を挿入する位置には、前もって改段落を挿入しておく

- 16 -

図 24:②[挿入]メニューの[ファイルから]をクリックする

図 25:③[画像の挿入]ダイアログボックスで「デスクトップ」を選び、

高松城の図を選択、[開く]ボタンをクリックする

実習 デスクトップの讃岐うどんの図を挿入してください

- 17 -

図 26:④図が挿入される

作成したページを Web ブラウザでプレビュー

作成中のHTML 形式ドキュメントが、Webブラウザでどのように表示されるか、事前

に確認できるプレビュー機能があります。次のようにプレビューしてください。

- 18 -

図 27:[ファイル]メニューの[Webブラウザでプレビュー]をクリック

ページのタイトルを決めて完成！

最後にページのタイトルを入力して完成です。このページのタイトルは、Webブラウ

ザで表示した際、タイトルバーに表示されます。次の手順でページのタイトルを設定

し、HTML 形式ドキュメントとして保存します。

- 19 -

図 28:①[ファイル]メニューの[プロパティー]をクリックする

図 29:②[プロパティー]ダイアログボックスの「概要」タブのタイトル

欄を設定、[OK]ボタンをクリックする

- 20 -

図 30:③[ファイル]メニューの[名前を付けて保存]をクリックする

図 31:④[名前を付けて保存]ダイアログボックスで保存する場所に「デ

スクトップ」を選び、ファイル名を指定し、ファイルの種類が

「HTML 形式ドキュメント（html）」となっていることを確認し、[保

存]ボタンをクリックする