5 分でできるウエッブページ
DESCRIPTION
Rotary International District 2510. IC 委員会 ( Internet Communication Committee ). 5 分でできるウエッブページ. 2007 年 11 月 25 日(日) 砂川市市民交流センター「ゆう」. 用 語. 共通の話題を持った記事群の事。 記事を整理するバックナンバーのようなもの。. カテゴリー:. 複数の記事を1つにまとめること。 記事の格納場所。. アーカイブ:. ナビゲーション(ナビ):道案内. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/1.jpg)
1
5 分でできるウエッブページ
IC 委員会( Internet Communication Committee )
Rotary International District 2510
2007 年 11 月 25 日(日) 砂川市市民交流センター「ゆう」
![Page 2: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/2.jpg)
2
用 語
ナビゲーション(ナビ):道案内
共通の話題を持った記事群の事。記事を整理するバックナンバーのようなもの。
カテゴリー:
アーカイブ: 複数の記事を1つにまとめること。記事の格納場所。
GPL : GNU General Public License はコピーレフトのソフトウェアライセンスの代表的なものであり、 GNU GPL または単に GPL という。
プログラムの著作物の複製物を所持している者に対し、概ね以下のことを許諾するライセンスである。
1. プログラムの実行2. プログラムの動作を調べ、それを改変すること3. 複製物の再頒布4. プログラムを改良し、改良を公衆にリリースする権利
![Page 3: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/3.jpg)
3
求められるスキルは?
□インターネットを使用したことがある。
□パソコンで文字を打ったことがある。
そんなあなたは、3 つのステップでウエッブページが
作成できます。
![Page 4: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/4.jpg)
4
雛形(テンプレート)
【トップページ】 【分類のページ】
3 つのページ
【一般のページ】
Wordpress : GPL
![Page 5: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/5.jpg)
5
雛形(テンプレート)
Wordpress : GPL
ヘッダー( header)
カテゴリーナビ
最新記事( What New)
カテゴリーナビ
最新記事のリスト
リンク
アーカイブ
【トップページ】
![Page 6: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/6.jpg)
6
雛形(テンプレート) 【分類のページ】
![Page 7: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/7.jpg)
7
雛形(テンプレート)
Wordpress : GPL
記事
【一般のページ】
![Page 8: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/8.jpg)
8
雛形(テンプレート) 色
![Page 9: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/9.jpg)
9
1 )ウエッブページの名称、簡単な説明の入力 (1/3)
① ログイン
・ admin 、パスワードを入力しログインする。
・設定URLへ行く (http://ri2510.org/test/wp-admin/)
admin
●●●●●
![Page 10: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/10.jpg)
10
1 )ウエッブページの名称、簡単な説明の入力 (2/3)
1 )各種設定ボタンをクリックする。
![Page 11: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/11.jpg)
11
1 )ウエッブページの名称、簡単な説明の入力 (3/3)
・ブログ名:ブログ名を入力・タグライン( META) :簡単な説明を入力 ・設定更新をクリック
![Page 12: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/12.jpg)
12
2 )カテゴリーの入力 (1/3)
① ログイン
・ admin 、パスワードを入力しログインする。
・設定URLへ行く (http://ri2510.org/test/wp-admin/)
![Page 13: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/13.jpg)
13
2 )カテゴリーの入力 (2/3)
① 管理 ② カテゴリー ③ 編集
![Page 14: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/14.jpg)
14
2 )カテゴリーの入力 (3/3)
① カテゴリ名:カテゴリー名を入力 ② カテゴリーを編集をクリック
この作業を繰り返す
![Page 15: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/15.jpg)
15
できあがり!!
![Page 16: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/16.jpg)
16
雛形(テンプレート)
ヘッダー( header)
トップ領域
カテゴリーナビ
最新記事( What New)
最新記事のリスト
カテゴリーナビ
最新記事のリスト
例会場・事務所
リンク
アーカイブ
![Page 17: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/17.jpg)
17
雛形(テンプレート) 色
![Page 18: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/18.jpg)
18
※ 例会場・事務所を入力する。
・ログインする
管理 ページ 編集
![Page 19: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/19.jpg)
19
※ 例会場・事務所を入力する。
内容を修正する。 保存をクリック
![Page 20: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/20.jpg)
20
※ トップページを作る
管理 ページ 編集
![Page 21: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/21.jpg)
21
※ トップページを作る
内容を修正する。 保存をクリック
![Page 22: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/22.jpg)
22
できあがり!!
![Page 23: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/23.jpg)
23
※ 記事の作成(基本)1/ 6
0 )ログインする。
① ログイン
・ admin 、パスワードを入力しログインする。
・設定URLへ行く (http://ri2510.org/test/wp-admin/)
![Page 24: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/24.jpg)
24
※ 記事の作成(基本) 2/ 6
① 投稿をクリック
② タイトル入力
③ 投稿内容を入力(編集)
④ カテゴリー選択
⑤ 公開をクリック
【注】「ビジュアルリッチエディタ」を使用する場合、 Enter ボタンで一行空き、 Shift + Enter で単純な改行
![Page 25: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/25.jpg)
25
※ 記事の作成(基本) 3 / 6
記事の保護(パスワードをつける)
![Page 26: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/26.jpg)
26
※ 記事の作成(基本) 4 / 6
① 参照をクリック ② タイトル入力 ③ アップロードをクリック
ファイル:(画像 pdf 等)のアップと挿入方法
![Page 27: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/27.jpg)
27
※ 記事の作成(基本) 5 / 6
① 表示方法を選ぶ ② エディタに挿入をクリック
ファイル:(画像 pdf 等)のアップと挿入方法
![Page 28: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/28.jpg)
28
※ 記事の作成(基本) 6 / 6
① 挿入位置を編集 ② 公開・保存をクリック
ファイル:(画像 pdf 等)のアップと挿入方法
![Page 29: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/29.jpg)
29
投稿方法(ブロク編集ツールを使う) 1/ 17
ブログ編集ツール:オフラインでブログの記事を作成・編集:管理するツール
ウエッブ上で投稿・編集
自分のパソコン内で投稿・編集オフライン
オンライン
![Page 30: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/30.jpg)
30
投稿方法(ブロク編集ツールを使う) 2 / 17
※ 「 Windows Live Writer 」( Microsoft 社が無償で配布) 特徴
1 )ワープロ感覚で編集できる WYSIWYG 編集機能を備えているため、 HTML のタグを知らなくても、a)記事全体のレイアウト、b)文字修飾やハイパーリンクの設定、c)画像や地図の挿入d)表組みの作成などが可能。
2 )作成した記事は「 Windows Live Writer Beta 2 」上からカテゴリを指定し、直接投稿、更新するため、a)投稿済みの記事を取り込んで再編集したり、b)エントリーリストを取得して、特定の記事だけ削除するといった操作可能。c)記事はローカルに保存しておけるので、投稿記事のバックアップ用としても利用できる。
※ ただし、画像以外のファイルのアップロードは難しい。
![Page 31: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/31.jpg)
31
投稿方法(ブロク編集ツールを使う) 3 / 17
ダウンロード&インストール
http://get.live.com/writer/overview からダウンロードする。
![Page 32: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/32.jpg)
32
投稿方法(ブロク編集ツールを使う) 4 / 17
ダウンロード&インストール
※ ダウンロードしたファイルを実行し、「同意する」をクリック
※ チェックマークをはずして「インストール」をクリック。
![Page 33: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/33.jpg)
33
投稿方法(ブロク編集ツールを使う) 5 / 17
ダウンロード&インストール
※ インストールが完了したら「閉じる」をクリック
※ 自動的に本体が起動するので「次へ」をクリック
![Page 34: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/34.jpg)
34
投稿方法(ブロク編集ツールを使う) 6 / 17
初期設定
※他のブログサービス( A) を選び、次をクリック
![Page 35: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/35.jpg)
35
投稿方法(ブロク編集ツールを使う) 7 / 17
※ ブログホームページの URL 、ユーザー名、パスワードの入力して次へ
例 URL : http://ri2510.org/ICC/ ユーザー名: admin パスワード: icc
初期設定
![Page 36: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/36.jpg)
36
投稿方法(ブロク編集ツールを使う) 8 / 17
※ 使用するブログの種類を選ぶ WordPress 2.2 +
※ ブログのリモート投稿 URL ( U) : 例 http://ri2510.org/asibetu/xmlpc.php
初期設定
![Page 37: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/37.jpg)
37
投稿方法(ブロク編集ツールを使う) 9 / 17
※ちゃんと取り込めるとこうなります。「完了」をクリック
初期設定
![Page 38: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/38.jpg)
38
投稿方法(ブロク編集ツールを使う) 10 / 17
基本 記事を作成し投稿する。
① 記事のタイトルを入力:例 TEST です。② 記事を書く③ カテゴリーを選ぶ④ 投稿ボタンをクリック ①タイトル
②記事
③カテゴリ -
④投稿
投稿中……しばらく待ちましょう……
![Page 39: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/39.jpg)
39
投稿方法(ブロク編集ツールを使う) 11 / 17
あとで書きかけに追記したり、途中まで書いて一休みするのも安心。
保存するとこうやって保存日時が一番下のステータスバーに表示されます。
そして記事が完成したら「投稿」をクリック
![Page 40: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/40.jpg)
40
投稿方法(ブロク編集ツールを使う) 12 / 17
※便利機能
※下書きを自動的に保存する機能「下書きを自動的に保存する間隔」を設定しておけば、突然終了しても安心ですので、設定は必須
![Page 41: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/41.jpg)
41
投稿方法(ブロク編集ツールを使う) 13 / 17
※便利機能 画像の挿入(その 1 )
画像を入れる場合には「画像の挿入」ボタンをクリック
使いたい画像を選んで「挿入」を選ぶだけ。リサイズなどは勝手にやってくれます。
![Page 42: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/42.jpg)
42
投稿方法(ブロク編集ツールを使う) 14 / 17
※便利機能 画像の挿入 (その 2 )
※ 画像の周囲の枠線や余白、表示サイズや明るさ調整、回転も可能
※ 「効果」タブから「ウォーターマーク」を選ぶと透かし文字を入れることが可能
![Page 43: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/43.jpg)
43
投稿方法(ブロク編集ツールを使う) 15 / 17
※便利機能 画像の挿入(その 3 )
※白黒、セピア調、温度調整、ポップカラー、シャープ、ぼかし、浮き出しも可能
![Page 44: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/44.jpg)
44
投稿方法(ブロク編集ツールを使う) 16 / 17
※便利機能 地図の挿入
航空写真や地図画像を選ぶだけで地図を挿入
地図を挿入した画面
![Page 45: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/45.jpg)
45
投稿方法(ブロク編集ツールを使う) 17 / 17
※便利機能 表の挿入
![Page 46: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/46.jpg)
46
Wordpress を理解するための資料
http://codex.xwd.jp/index.php/WPJ_Codexその 1 :マニュアル
![Page 47: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/47.jpg)
47
Wordpress を理解するための資料
その 2 :書籍書名: WordPress2.2 でつくる!最強のブログサイト発売日: 2007/06/19 / 出版社:ソーテック社著者:田中広将・乙彼三太郎ISBN-10: 4881665782 / ISBN-13: 978-4881665787定価: 2,709 円(本体 2,580 円) / 頁数: 319 ページ・ 1 色・ B5 変形
前著の内容を踏襲し、 WordPress の導入・管理・運営までを徹底解説。テーマのカスタマイズやテンプレートタグの使用方法など、具体例を挙げて分かりやすく紹介しています
書名: WordPress 標準ガイドブック発売日: 2006/09/28著者:マクラケン直子 / 監修: WordPress Japan出版社:毎日コミュニケーションズ / ISBN : 4-8399-2169-5定価: 3,129 円(本体 2,980 円) / 頁数: 344 ページ・ B5 変型判 CD-ROM 付
WordPress を利用して「自分だけのオリジナルサイトを作ろう ! 」と考えている方へ。 2.0 系のバイブルとなり得る充実度満点の一冊。
![Page 48: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/48.jpg)
48
レンタルサーバ
・ PHP4 (version 4.2 もしくはそれ以上 )・ MySQL (version 4.0 もしくはそれ以上 )・独自ドメインが使える
必須条件
ロリポップ200MB :月額263円(税込み) 500MB :月額368円(税込み)
200MB=普通に使えば全然問題の無い容量、 新聞なら約6400ページ分!
チカッパ!
1G= 1000MB :月額525円(税込み) 2G= 2000MB :月額735円(税込み)初期費用: 2100円(税込み)
初期費用: 3150円(税込み)
さくら
300MB :年1500円(税込み)月額125円 1G= 1000MB :月額500円(税込み)
初期費用:1000円(税込み)
http://lolipop.jp/
http://www.sakura.ne.jp/
http://chicappa.jp/
![Page 49: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/49.jpg)
49
ドメイン
・インターネット上にある全てのコンピュータに割り当てられたIPアドレス(234.111.333.567等の12桁の数字で表したもの ) を、分かりやすく覚えやすい文字列に変換したもの。・インターネット上の「住所」に例えられます。・ドメインを取得することで、覚えやすいホームページアドレスやURLを利用することができる。
ドメインとは?
. com 主に商業目的
. net 主にネットワーク関連向け
. org 主に非営利団体向け
. com. j p [ ]商業法人
. or. j p [ ]非商業法人
. ac. j p [ ]教育および学術機関
国際ドメイン
JPドメイン
種類例
取得・維持費用 .jp 約 3,500円/年 他約 1,000円/年
http://muumuu-domain.com/
![Page 50: 5 分でできるウエッブページ](https://reader035.vdocuments.site/reader035/viewer/2022062408/5681369c550346895d9e3aca/html5/thumbnails/50.jpg)
50
運営費
コース 1 :ドメイン .org 、 200MB タイプ
独自ドメイン( 1000円) + レンタルサーバ( 7000円)= 8000円/年
コース 2 :ドメイン .org 、 1GB= 1000MB タイプ
独自ドメイン( 1000円) + レンタルサーバ( 8400円)= 9400円/年
コース 3 :ドメイン .org 、 2GB= 2000MB タイプ
独自ドメイン( 1000円) + レンタルサーバ( 11000円)= 12000円/年
一つの会社で(ドメイン取得+レンタルサーバ)が楽