更新日:2020/11/18

ホームページ制作に便利なツール Ⅰ. HP制作を始めるに際して

制作に必要なツールや環境設定をする必要が有ります。

1)テキストエディタをインストールします。
 Windowsに標準インストールされている「メモ帳」「Sublime Text3」でも制作を行うことは出来ます。しかし、制作作業を効率的に進めるためには、作業を助けてくれる機能を持ったWebデザインに特化したテキストエディタを使うのが便利です。
 テキストエディタではHTMLのコードを記述しますが、Webデザインに特化したテキストエディタでは、使うコードをリストメニューで表示してくれたり、予測して補間してくれたりもしてくれます。

 私のおススメは、左図の「Brackets」や「Atom」というテキストエディタです。BracketsはAdobeが提供しているオープンソースコードエディターです。使い勝手が良く、無料で使用できます。コードヒント、ホバークイックビュー、ライブプレビュー機能など、数々の便利な機能がデフォルトで付いています。Live Inputは、作成してきたコードをChromeブラウザで表示できるので、変更を要する内容などを事前に確認できます。また、レスポンシブ画面での確認も出来ます。

 BracketsをPCにインストールするには、下表に示した「入手先URL」に書かれている場所から必要なファイルをダウンロードするのが便利です。表中のURLをクリックしてBracktsのダウンロード画面になったら、「最新バージョン」と書いてある青いボタンをクリックします。ボタンが黄緑色の「ダウンロード」という表示に変わります。そのボタンをクリックします。直ぐにDownloadが始まります。ファイル容量は約77MBあります。ダウンロードが完了するまでには、多少時間がかかるかもしれません。ダウンロードされたファイルは、PCの「ダウンロード」というフォルダ内に格納されます。私の場合、ダウンロードファイルの名前は「Brackets.Release.1.14.2.msi」でした。ファイルはアップデートされたりしますので、ファイルの表示名称は必ずしも同じではありません。
 ダウンロードが完了したら、ファイルをクリックしてインストールします。

 エラー「2502」「2503」等の番号が出て、PCにインストールが出来ない場合には、
Tempフォルダに対する完全な管理者権限が必要です。この場合には、手動で権限を設定します。
 ①先ず、エクスプローラーを開き、CドライブのProgram Files(x86)一覧から「Temp」フォルダを見つけます。
 ②Tempフォルダを右クリックして、プロパティを開きます。次にセキュリティのタブをクリックします。
 ③「ALL APPLICATION PACKAGES」を選択し、「編集」ボタンをクリックします。
 ④画面下の「フル コントロール」の許可のボックスをクリックしてチェックマークを入れます。このとき変更のボックスには自動的にチェックマークが入ります。
 ⑤適用をクリックし、「OK」をクリックします。その後でTempのプロパティの画面の右上の「x」をクリックして画面を閉じます。
 以上の操作の後、インストールを実行すれば、エラー無くインストールは完了する筈です。

 ライブプレビューを起動出来ない場合には、
以下のいずれかの方法でライブプレビューを再起動してみる。
(参考になるHP:https://creating-homepage.com/archives/3658)

方法1: サイドバーで html ファイルを選択し、エディタ画面にカーソルが点滅している状態にしてから、ライブプレビューを再起動する

方法2: 作業フォルダに index.html を作成してから、ライブプレビューを再起動する

また、エラー内容が「ライブプレビューのエラーが発生しました。ライブプレビューを起動するには、HTMLファイルを開くか、index.htmlファイルがプロジェクトに含まれていることを確認してください」となっている場合には、
  ファイル
   →フォルダーを開く(コーディングしたい必要データ一式が入っているフォルダ)
    →フォルダ自体を選択後
     →編集するHTMLを開く
  をやってみる。

2)次に、ブラウザをインストールします。
 Webサイトを閲覧するためのブラウザを用意します。ブラウザーごとに表示は多少違います。そのため出来れば全てのブラウザをインストールするのが良いのですが・・・、先ずは利用シェアが一番多いブラウザ、左図の「Google Chrome(Chromeとも言われています)」をインストールします。既にインストールされている方も多いかと思います。その場合には、このChromeインストール作業は読み飛ばしてください。
 1)でのダウンロード作業と同じように、下表にある「Google Chrome」の入手先URLからインストーラーをダウンロードし、その後、画面に従いインストールします。

3)お渡ししたCD-ROMの使い方
①USBメモリーを準備し、その中に任意の名前を付けたフォルダー作ります。(例えば、HomePage制作 とかの名前を付ける。)
②そのフォルダーの中に、CD-ROM の中のすべてのフォルダとファイルをコピーします。
③自分の町内会用のフォルダには、写真(拡張子が.jpg, .png)などを格納します。
④indexファイルは、htmlを記述したファイルです。これを、先日お渡しした参考資料と見比べながら、編集してご自分の町内会のホームページを制作してください。

Webページ内に収める写真やイラストなどをデザインするために、
4)グラフィックツールをインストールします。
 皆さんが使い慣れているグラフィックツール(例えば、「Adobe Photoshop」など)を使うのがお勧めですが、無料のツール「GIMP」「Inkscape」「ペイント」等もあります。自分に合った使い勝手の良いものを探してみてください。
 スマホなどで撮影されたままの画像は、とても精細で綺麗ですがHP制作で使うには画素数が大きすぎて、画像が表示されるまでに時間がかかりますので、

5)写真画像を簡単な操作で縮小してくれるツールをインストールしておくのが便利です。
 私のおススメは、左図の「縮小専用。」というフリーソフトです。窓の杜に書いてあるソフトの説明書きを引用させて戴くと『ウィンドウに画像をドラッグ&ドロップするだけで、指定したピクセルサイズに縮小できるソフト。複数画像の一括縮小も可能。縮小サイズは縦横ともに 1,280/1,024/800/640/400/320/160ピクセルから選択できるほか、縦横それぞれ任意のピクセルサイズを指定可能。画像は縦横の比率を保ったまま指定サイズで縮小される。』とあります。是非使ってみてください。
縮小専用の使い方は、ここに詳しく記載されています。

6)A4以上の大きな画像(A3,A2・・・)やイラストを取り込む方法
 A4以上の大きな画像(A3,A2・・・)やイラストを取り込む方法が必要になる時があります。そのようなとき、カメラかスキャナが有れば、1枚の画像にして取り込む方法があります。
A4のスキャナを持っている場合、A4スキャナで分割して画像を取り込みます。(このとき隣接する画像データ間は、少し重ねて撮影する必要が有ります)、MicrosoftのICEというソフトを使えば、複数画像の重なり部分を合わせて接合し、一つの画像にしてくれます。
 このソフトを使って複数画像を1枚にする場合には、原画がA3ならばA4スキャナで3回はスキャナするつもりで画像データを用意する必要があります。出来上がった画像データは、つなぎ目も分からないほどに処理してくれます。

7)Microsoft お絵かきソフト「ペイント」
 念のため、モニタースクリーン画面をコピーして、Microsoft お絵かきソフト「ペイント」(Windowsの中に標準でインストールされているソフト)に画像を貼り付け、トリミングなどの編集をする方法を書いておきます。
 ➀これからコピーしたい画像を、モニター画面上で出来るだけ大きな画面になるように拡大します。
 ➁[Alt]キーを押しながら[Prt Sc]キーを押すと、一番手前の画面だけをコピーすることができます。
  [PrintSc]キーを押すと、デスクトップ全体のスクリーンショットをクリップボードにコピー出来ます。
 ➂画面左下の[Windows]キーをマウス左クリックし、プログラムリストの中から「Windowsアクセサリ」→「ペイント」を選びます。このプログラムは頻繁に使うので、ピン止めしておくのがおすすめです。
 ➃「ペイント」が開いたら、「貼り付け」ボタンをクリックします。これでペイントにモニター画面が貼り付けられました。
 ➄表示された画面から一部分を取り出すには、「選択」ボタンの《▼》をクリックして「四角形選択」を選び、画面の中で左上クリック→右下クリック して取り出す部分を選択し、コピーボタンをクリックします。
 ➅「ファイル」→「新規」→「保存しない」を選択します。
 ➆白いボードが表示されるので、ボードの右下の隅をマウスでクリックしたまま左上の適当な位置まで移動させます。
  白い画面は、先ほどの操作で選んだ画面のサイズより小さくしておきます。
 ➇再度「貼り付け」ボタンをクリックします。 これで選んだ画像が貼り付けられます。

8)その他
HTMLとCSSデザインのための参考図書

 ネット上にある情報だけを頼りにWebページを制作するのは難しいと思います。おすすめの最近の図書は「1冊ですべて身につく HTML&CSS とWebデザイン 入門講座」SB Creative(@2260+税)で、50ページ辺りから後ろを、その書籍のとおりやってみると、分かり易く基本が学べると思います。
 もう少し上達すると「HTML5 & CSS3 デザインブック」ソシム㈱(@2600+税)というのが良さそうですね。

イラストについて

 Webページを制作していると、イラストが欲しくなります。ご自分で絵を描ける場合には、それをPC内に取り込んで使うのがおすすめです。しかし絵心はちょっと・・・と思われる方は、著作権フリーの画像を使いましょう。
 インターネット検索で「フリー イラスト 夏」等のように入力すると、「夏」に関係するフリーイラストの画像が検索されて表示されます。
 フリーで使えると思っていても、使う本人登録が必要なものも多くあります。例えば画像の中に「ILLUST BOX」「illustAC」等と表示されているものは、使用する前に本人登録をする必要があります。「ILLUST BOX」の画像は、スマホのLINEから登録するとダウンロードキーが送られてきます。ダウンロードの際、そのキーを入れる事により画像を無料でダウンロードできます。

HPテンプレート

 一旦Webデザインのワイヤーフレームとコンテンツが決まっているのなら、フリーのテンプレートを使って格好よくデザインされたHPにすることも出来ます。例えば、検索窓に「free homepage template responsive」と入力すると、フリーで使える多くのホームページのテンプレートを見つけることが出来ます。
 私のPCで検索結果の4番目に表示された「TEMPLATED - Free CSS, HTML5 and Responsive Site ...」を開くと、867個のテンプレートが有ると表示されました。
 使ってみたいと思ったテンプレートが有れば、マウスを近づけると[DEMO][DOWNLOAD]のボタンが表示されます。まず、[DEMO]ボタンをクリックして大きな表示画面で、レイアウトを見てみましょう。自分が考えていたワイヤーフレームに近いものが見つかったら、[DOWNLOAD]しましょう。テンプレートの一覧画面に「PREMIUM」と表示されているものは有料のテンプレートです。
 Downloadすると、HP制作に必要なフォルダー構成とファイルを入手する事が出来ます。フォルダ内に入って居るものは、テンプレートで見た写真類が含まれています。Bracketsのライブプレビュー画面を開いて、結果を見ながら、各ファイルに対してテキストエディタで必要な変更を加えれば、お望みのHPを短時間で容易に制作することが出来ます。

サイトマップ

 サイトマップとは、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。Google などの検索エンジンは、それぞれの検索のデータベースに情報を登録しています。ユーザーが検索キーワードを入力した際にデータベースから検索結果として表示されます。データベースへ登録されるためには、「クローラー」というロボットがホームページの情報を巡回して収集する必要があります。
 Googleの検索エンジンにインデックスされないケースがあります。そのような場合は、Googleのクローラーに巡回申請を行って、自分のサイトにクローラーを半ば強制的に呼び込むことで、Webページの存在を認識させてインデックスを促進するようにします。
 XMLサイトマップのURLを送信することで、そのXMLサイトマップのファイル内に記述されてるWebサイト内の各ページのURLからそれらのコンテンツ内容をクロールするように、Googleのクローラーに巡回申請を行うことができます。うまくそれらのページがクロールされれば、新規ページや更新したWebページが検索エンジンへインデックスされやすくなります。
 XMLサイトマップを作成してない場合は、sitemap xml editorなどの無料ツールを活用したり、「Google XML Sitemaps」のプラグインを導入するなどの方法で、まずsitemap.xmlファイルを作り、そのファイルを本番環境に設置してURLでアクセスできる状態にしておきます。

QR code の作成

 スマホでホームページを見るためのツールとして、QRコードが欲しくなります。Web上には、QRコード作成を助けてくれる数多くのサイトがあります。どのツールを使うのが良いか?比較しては居ませんが、私は『QRコード[二次元バーコード]作成 【無料】』というのを見つけて、それを利用しています。
セルサイズ、セルの背景色、囲み文字、画像形式などが選べます。また、QRコードを作成すると同時にホームページの実在チェックも行われます。このため、URLの入力ミスによる誤ったQRコード作成を防ぐことが出来ますね。

mp4 に変えて gif 動画を使ってみる

 動画が必要になった際に、mp4を使うとファイルサイズが随分大きくなってしまいます。もし画質には余り拘らなくて良いなら、gifファイルを使う方法があります。私が安全・環境のページに入れた「防災体験学習(埼玉県防災学習センター)」の動画は、mp4ファイルの1/10ほどのサイズの動画です。
 私が使ったソフトは、『Free Video to GIF Converter』で、PCにダウンロードして使える無料ソフトです。ファイルは、ここのFREE DOWNLOADから download 出来ます。

複数の画像を使って「パラパラ動画」を作る

 少しずつ違った複数の画像(画像ファイルの拡張子が「.png」 又は 「.gif」 のファイル)を使って、動画のように見せる事ができます。パラパラ動画(gif動画)と言われるものです。フリーの画像編集ソフト「GIMP(ギンプ)」を使ってパラパラ動画を作る方法が、ここ『GIMP(ギンプ)でgifを簡単に作成する「画像があれば1分で作成できます!」』に書かれています。それほど難しくないので、やってみましょう!

画像を自動的に切り替え「スライドショウ」表示をする方法  

画像をある一定時間ごとに切り替えて表示するものです。
 「jQuery」と「HTML」で実現させます。
参考にした記述のURLはここ(http://toretama.jp/automatic-slideshow-image.html)にありますので詳しくは其方をご覧ください。
 大きく分けて2つの作業をする必要があります。
1) スライドショウを表示させるページのヘッダー部分(</head>の真上の直ぐ上のところ)に次のソースを書き込みます。


<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slider').bxSlider({ auto: true, pause: 5000, }); }); </script>
    ↑ソースが分かり易いように枠に入れました。
    上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。
2) 次に、スライドショウを表示したい箇所に、画像を記録するソース部分を書き込みます。
<div class="slider">
<img src="gazou1.jpg" width="500" height="300" alt="">
<img src="gazou2.jpg" width="500" height="300" alt="">
<img src="gazou3.jpg" width="500" height="300" alt="">
<img src="gazou4.jpg" width="500" height="300" alt="">
</div>
 上記のソースを使うときは、「gazou1.jpg(画像のファイル名)」を ご自分が作成し保存してある場所のディレクトリを含めた適切なファイル名に変更してください。
 また、画像の幅(width)や高さ(height)は、表示するエリアの状況に応じて、また、持ってきた画像のサイズに合わせて適宜変更してください。
 尚、上記のソースでは、4つの画像を順番に表示するようにしています。5つ又はそれ以上の画像を順番に表示させたい場合は、行数を増やせば良いだけです。
 逆に、表示させたい画像を減らす場合は、必要な画像の行数に減らせば良いだけです。

スマホが無くても PCから LINEを使う方法
1. パソコン版LINEのアプリをここからダウンロードし、インストールします
 ご自分のPCに合ったものを選択しダウンロードしてください。

ダウンロード中は、ブラウザの(私の場合はGoogleChromeを使っています)左下に、ダウンロードの状況が示されます。
ダウンロードが終了すると、「LineInst.exe」と表示されます。もしその表示が消えているようなら、エクスプローラーを起動して「ダウンロード」のフォルダを調べてみてください。そこに「LineInst.exe」ファイルがある筈です。

「LineInst.exe」をクリックして、LINEのインストールを始めます。
 Installer language の小さな窓が開きます。Please select a language. とあり、日本語になっていれば、「OK」をクリックします。

 LINEのインストールを開始しますの画面になります。「次へ」をクリックします。
 LINEの利用規約への同意画面になります。「同意する」をクリックします。
 インストールがはじまり、暫く待つとインストールが完了します。
 インストール完了の画面が表示されたら、「閉じる」をクリックしLINEのプログラムを実行します。

2. LINEアプリが起動し、メールアドレスとパスワードを入力する画面になります。
 新規登録の場合には、画面の下の方に「利用登録」或いは「新規登録」が表示されています。
 注意点)利用登録には、パソコンで常時使われている「メールアドレス」と「パスワード」が必要になります。

3. 携帯電話か固定電話の電話番号を入力します
 注意点)利用登録というのは、LINEのアカウントを作成・取得し利用するための手続きになります。LINEアカウントを作成するには、電話番号を入力して、利用する本人を確認し、認証してもらう手続きを行います。
 電話番号を入れると、その電話番号に数分以内にSNSで認証用の番号が送られます。SNSで届けられない固定電話の場合には、「通話による認証」という方法(自動音声で認証番号を告げて貰える)も用意されています。
 4.で「通話による認証」を選んだ場合には、緑色の「確認」ボタンをクリックすると、すぐに電話がかかってきますから、予めメモの準備をして聞き逃さないようにしましょう。

4. 送られてきた認証番号を入力します

次に、
5.「6~20字の半角英数字」でパスワードを設定して入力します。
 注意点)ここでのパスワードは、2.で入力したメール用のパスワードではありません。LINE用のパスワードで新しく設定するものです。パスワードを忘れて混乱する可能性があるなら、メールアドレス用のパスワードを使うのも良いかも知れません。パスワードは確認のため 2回入れます。

6. 新規登録として名前の入力やプロフィール画像の設定を行います
 注意点)名前は本名を使う必要はないのですが、本名を使わないと受け取った人が誰なのか分からず無視されたり、困る可能性があります。できるだけ本人名称を使うのをお勧めします。
プロフィール画像は、後から何度でも変更が出きます。ここでは設定せずに先に進んでも大丈夫です。
「完了」ボタンの上にある「友だちへの追加を許可」は、チェックマークが付いていると、電話番号だけ知っているだけで「友達になりたくない人」や「友だちになるつもりがない人」とも自動的に友達になる事があるので、このチェックマークは外しておきます。
「あなたの電話番号を保有しているLINEユーザーが自動で友だちに追加したり、検索することができます」という表示が出ます。ここでは検索に掛からないように「オフ」にしておきます。

7. メールアドレスを登録します
 注意点)ここでのメールアドレスの登録は、必須事項ではありません。「スキップ」ボタンを選んでクリックすると、先へ進めることができます。
 メールアドレスを登録しておくメリットは、パスワードを忘れたときに再設定することが可能になります。また、メールアドレスを登録しておくと、ほかの端末でLINEを使うときも、メールアドレスとパスワードでログインできます。

8. メールアドレス宛に送られた認証番号を入力します
 注意点)2.で入力しておいたメールアドレスにLINE認証番号が届いている筈です。その番号をここで入力します。
認証が終了すると新規登録され、パソコン版LINEアプリの画面が表示されます。

パソコン版LINEで友だちを追加する方法
まず、トーク(LINE)の相手となる友だちを追加してみましょう。
♦パソコン版LINEアプリでは、「Email」「QRコード」「ID/電話番号検索」の3種類の方法から友だちを追加できます。
♦「QRコード」を使う方法がオススメです。

♦「QRコード」のアイコンをクリックするとQRコードリーダーの画面に切り替わります。ここで「QRコードを表示」をクリックし、出てきたQRコード(これはご自分のIDを表すQRコードになります)を「保存」します。
保存したQRコードの画像をメールなどに添付して、友だちに追加したい相手に送ります。

♦相手は、LINEアプリのQRコードリーダーの画面を開いて、送られてきた貴方のQRコードを選び、友だちに追加することができます。
♦この作業によって、自分の方のLINEアプリの画面の「知り合いかも?」のリストに、先ほどQRコードを送った相手が表示されます。それを選べば、貴方と「友だち」になり、トークなどができるようになります。

パソコン版LINEでトークを始めよう
♦画面の左端にあるトークのアイコンをクリックして相手を選びます。
♦右下にあるメッセージ欄にメッセージを書きこむと、フキダシに入ったメッセージが表示されます。

♦メッセージ欄の右側にあるアイコンをクリックすると、スタンプを選んで送信できます。

パソコン版LINEで無料電話を始めよう
パソコン用のヘッドセットを用意して、パソコンのマイクとスピーカのジャックにヘッドセットのジャックを差し込みます。
USB接続できるヘッドセットはUSB端子に接続します。
ヘッドセットのマイクとスピーカーが適当な音量で作動する事を確認しておきます。

それでは始めましょう!
♦画面の右上にある電話受話器「📞」のマークをクリックします。
♦ 〇〇さんと音声通話しますか? という小さな画面が表示されます。
  緑色の「開始」ボタンをクリックすると音声通話ができます。

♦電話の終了は、受話器を置くアイコンをクリックすると電話を切ることができます。


《用語説明》
トークとは、
LINEのメインとなる機能で、友だちと文字を使ったリアルタイムの会話ができます。 「チャット」と同じ機能ですが、LINEでは、双方のキャリアに関係なく無料で会話ができ、写真を貼りつけたり、「スタンプ」という画像を送ったり、コミュニケーションをより楽しく演出するさまざまな機能が利用できます。
ヘッドセットとは、相手の声を聞くためのヘッドフォンやイヤホンと、自分の声を相手に届けるためのマイクが一つになったものです。
手に持って話すマイクとは違い、口元から一定の距離に常にあるため、パソコン入力をしながらや、車を運転しながら等、別の動作と並行して相手と通話することができます。

参考にさせて戴いたURL
「スマホがなくても大丈夫!パソコンでLINEを楽しもう」(https://slownet.ne.jp/c/it/post-22260/)  


ホームページ制作関連ツール一覧
名前 機能概要 作成者 入手先URLなど 使い方のURLなど
Brackets AdobeがHTML、CSS、JavaScript用に作成したオープンソースのソースコードエディタ Adobe Systems https://brackets.jp.uptodown.com/windows

BracketsとはAdobeが提供しているオープンソースコードエディターです。使い勝手が良く、無料で使用できます。コードヒント、ホバークイックビュー、ライブプレビュー機能など、数々の便利な機能がデフォルトで付いています。Live Inputは、作成してきたコードをChromeブラウザで表示できるので、変更を要する内容などを事前に確認できる。
https://www.univ-web.org/nabe/lec/UAI
/Brackets.html
Visual Sudio Code Microsoftが開発したWindows、Linux、macOS用のソースコードエディタ Microsoft https://brackets.jp.uptodown.com/windows 【アニメ図解たっぷり】VSCodeの使い方入門!~ 基本からWeb制作まで
Google Chrome 無料のウェブブラウザ Google https://support.google.com/chrome/answer
/95346?co=GENIE.Platform%3DDesktop&hl=ja
GIMP オープンソースで開発されているビットマップ画像処理ソフト The GIMP Development Team https://www.gimp.org/downloads/ https://gimp.jp.net/
Inkscape ベクター形式の画像を作成できる無料で多機能なドローソフト https://inkscape.org/ http://inkscapedesign.web.fc2.com/
ペイント Microsoft Windowsに附属するグラフィックソフトウェア Microsoft
縮小専用。 指定したピクセルサイズに縮小できるソフト Akihiro Koyanagi https://forest.watch.impress.co.jp/library
/software/shukusen/
http://support.plusline.jp/file
/15/shukusensousa.pdf
ICE(Image Composite Editor) パノラマ写真の合成ツール Microsoft https://www.microsoft.com/en-us/research/product/computational-photography-applications/image-composite-editor/ http://www.mars.dti.ne.jp/koitiro
/Photo/P04ms-ice2_usage.html

Ⅱ. LibreOffice(Draw)の使い方
1)LibreOfficeをインストールします。
 LibreOffice は、フリーのオフィスソフトで、2020/9/25現在の最新版は、Ver7.0.1.2 (x64:64ビットWindows_OS用) になっています。ワードプロセッサ(文書作成:Word互換)、表計算(Excel互換)、プレゼンテーション(Powerpoint互換)、図形描画、データーベースなどを作成する機能があります。インストール用ファイルは、ここから、OS等を選んでダウンロードできます。私は、Windows10 64bit版を使っていますので、『LibreOffice(最新版)(64bit版)』を選択し「窓の杜からダウンロード」しました。(ソフトは全て無料で使えます。)

2)LibreOffice の使い方
 LibreOfficeの中で「ワードプロセッサ(文書作成)」や「表計算」の使い方は、慣れ親しんでいるMicrosoftのオフィスソフトを使う方法と類似しています。作成されたデータも後でMicrosoftのオフィスソフトで読みとり使えるようにデータを保存できます。
 LibreOfficeに含まれている図形描画ソフトは、『Draw』という名前のソフトで、簡単なスケッチから複雑な図面までいろいろ作れます。層(レイヤー)構造、図形・文書部分のグループ化、図形のトリミング、画像・ファイル・表・グラフの挿入などをサポートしています。
 そのような機能を持っているので、チラシ作成・町内会での掲示文書などを、画像・イラスト入りで自由なレイアウトで作成することが出来ます。
LibreOfficeのマニュアルを一読すれば、使い方の概要を知る事が出来るのではないかと思います。

3)LibreOffice で作成したサンプル
ここでの表示を見やすくするために、拡張子を.pngにしてあります。