Wordpressでウェブサイトを作ろう!無料サーバーと無料テーマで完成☆
4.4 (6 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
27 students enrolled

Wordpressでウェブサイトを作ろう!無料サーバーと無料テーマで完成☆

インターネット見ることはあるけど、制作はしたことない・・・Web制作ってツールを揃えるのにお金が必要?ワードプレスって有料のテーマじゃないとダメ? そんな悩みを解決するための講座です^^ まずはシンプルなサイトから始めてみましょう。
4.4 (6 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
27 students enrolled
Created by 智子 萩原
Last updated 8/2020
Japanese
Current price: $55.99 Original price: $79.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Wordpressを利用したWebサイト制作
  • 無料サーバーの利用方法
  • 無料Wordpressテーマの利用方法
  • ブログ投稿
  • 固定ページ投稿
  • Google Chromeデベロッパーツールの使用方法
  • Googleカレンダーの編集、固定ページへの挿入
  • CSSで設定できるWebフォントの利用方法
  • ショートカットキーでのパソコン操作方法
  • サイトで使用する写真のダウンロード
Course content
Expand all 32 lectures 02:15:38
+ この講座の目的、ゴール、講座の進め方
1 lecture 08:04

講座の目的、ゴールをお話ししています。

この講座は、ワードプレスでWebサイト制作したことがない方に向けたものとなっています。

特別なソフトなどはいりません。

パソコンはもちろん必要なのですが、以下もご用意ください。

  • ご自身で利用できるメールアドレス

  • Google Chrome

他に必要になっていくものは、講座内で揃えていきます。

では、早速講座を進めていきましょう!

Preview 08:04
+ サーバー「xfree」の契約 ワードプレスの開設
4 lectures 13:49

Webサイトを制作するにあたり、土台となるサーバーの契約が必要になります。

家を建てる時にみたてると、サーバーは土地に当たる部分でしたね。

このセクションでは、無料で利用できる「XFREE」を契約していきます。

まずは、メールアドレスの登録から始まりますので、ご自身のメールアドレスを用意の上、受講に進んでください。

Preview 03:38

前回の続きで、XFREEのユーザー登録を行なっていきます。

ご自身の情報をフォームに入力していきます。

動画の入力画面は見本となりますので、ご自身の情報を入力し、ユーザー登録してくださいね。

XFREEのユーザー登録2
04:23

ユーザー登録が完了しているので、ワードプレスをXFREEにインストールしていきます。

ワードプレスの管理画面のID, パスワードをメモする部分があります。

メモ帳などに、メモしていただいても良いですし、動画のようにメールで保存する方法もあります。

動画の通り進む場合は、ご自身のメーラーをたちあげてから受講していただくとスムーズです。

XFREEのユーザー登録3・XFREEにワードプレスをインストール
04:32

ワードプレスのインストールが完了したため、管理画面を開いてみましょう。

メールにワードプレスの管理画面URLが届いていますので、メーラーを立ち上げた上で受講していただくとスムーズです。

ワードプレス管理画面の開き方
01:16
+ ロイヤリティフリー写真素材サイトに登録・写真素材のダウンロード方法
2 lectures 10:07

Webサイトでは、文章とともに、写真でも情報を伝えることができます。

写真はご自身で撮影されたものを使用するのも良いですし、素材サイトからダウンロードして使用することもできます。

インターネットで適当に検索してヒットした画像を使用すると、著作権を侵害してしまう可能性が高いです。

ですので、商用使用可能な写真素材サイトから、Webサイトに使用する写真をダウンロードして利用するようにしましょう。

今回は、無料で利用できる素材サイト「PhotoAC」の登録を行なっていきます。

写真素材サイト「PhotoAC」の登録・使用準備
04:50

ホームページ教室のサイトに使用する写真素材をダウンロードします。

PhotoACで、パソコンの写真を、イラストACで女性のプロフィール写真をダウンロードします。

この後レッスン動画をみながら受講を進めていくので、できれば同じ写真をダウンロードしていただくとスムーズです。

外部リソースに、画像素材のリンク貼っておりますのでご覧ください。


無料会員の場合、ダウンロード時にアンケート回答が必要となります。

レッスン動画では、有料会員のダウンロード画面となるため、アンケート回答は収録されていません。

動画を見ながら、操作も同時に行なっている場合は、動画を一時停止しながら進めてください。


また、無料会員は1日1枚のダウンロードとなります。

後のセクションで、他にも使用する画像が出てきます。

日にちを改めて、外部リソースに掲載の他の画像素材も用意してください。

写真素材のダウンロード
05:17
+ ワードプレステーマ「Xeory」のダウンロード・インストール方法
3 lectures 10:56

ワードプレステーマ「Xeory」のユーザー登録、およびダウンロードを行います。

ユーザー登録の際に、メールが届きますので、メーラーを立ち上げてから受講していただくとスムーズです。

テーマ「Xeory」のユーザー登録・ダウンロード
03:45

先ほどダウンロードした、「Xeory」のデータをワードプレスにアップロードします。

アップロードし、有効化することで、Xeoryのデザインや機能が使用できるようになります。

ワードプレスに「Xeory」をインストール
02:49

Xeoryのインストール直後、ブログや固定ページの投稿前に設定したい内容になっています。

本講座では、カラー設定、URLの設定を行なっていきます。

「Xeory」の初期設定 色やリンクについて
04:22
+ ブログの編集・公開
2 lectures 10:07

ブログの投稿について学習します。

1番目の投稿となるので、自己紹介のブログを作成していきます。

イラストACでダウンロードした画像を使用していきます。

素材のダウンロードが完了していない方は、

セクション

「ロイヤリティフリー写真素材サイトに登録・写真素材のダウンロード方法」

を完了させてから本セクションを受講してください。

ブログの編集・公開1
04:46

編集を完了し、公開していきます。

トップページにもブログが掲載されますが、トップページと実際の投稿ページでは表示が異なります。

その違いについても学習していきます。

ブログの編集・公開2
05:21
+ 固定ページの編集
9 lectures 45:14

企業サイトなどでは、常に見せておきたい情報を配置するために、

固定ページが必須になってきます。

ここでは、ホームページ教室のレッスン案内ページを作成していきます。

レッスン案内ページの編集1
05:38

固定ページ編集の続きです。

文字のスタイルの変更や、写真の配置方法についても学習します。

レッスン案内ページの編集2
04:34

固定ページ編集の続きです。

ページは途中まで出来上がっている状態ですが、スマホの画面ではどのように表示されているか検証していきます。

Google Chromeのデベロッパーツールについて学習します。

レッスン案内ページの編集3・デベロッパーツールの使い方
05:12

固定ページ編集の続きです。

画像の編集を行います。

Xeoryの機能で、トリム、サイズ調整ができますので、他のツールは必要ありません。

レッスン案内ページの編集4
04:32

固定ページ編集の続きです。

ここでは、レッスン案内ページの最終チェックをして、下書き保存します。

レッスン案内ページの編集5
04:16

新しい固定ページ、グループレッスンのページを作成していきます。

ここからは、原稿をコピーアンドペーストで入力していきますので、リソースを開いた上で、受講していただけるとスムーズです。

グループレッスンページの編集1
05:35

背景画像を設置し、画像に文字を重ねるレイアウトを学習します。

色や配置、大きさを細かく調整していきます。

ご自身で作業する際、動画をみながら一つ一つ丁寧に進めてみてください。

グループレッスンページの編集2
04:56

グループレッスンページ編集の続きです。

今まで一通りやってきたことのおさらいが多いですが、表の挿入についても学習します。

グループレッスンページの編集3
04:47

ここでは、リンクの設定を行なっていきます。

Xeoryにはプライバシーポリシーの固定ページが入っています。

もし、プライバシーポリシーのページが、下書きとなっている場合は、公開にしてから受講してください。

固定ページの公開については、セクション7「固定ページの公開・リンクの設定」で述べています。

順番が前後し、申し訳ないですが、確認してから進んでいただくとスムーズです。

また、本セクションでは、ページ内リンクについても学習していきます。

グループレッスンページの編集4
05:44
グループレッスンのページができているので、マンツーマンレッスンの固定ページも作ってみましょう。
マンツーマンレッスンページの作成
1 question
+ 固定ページへGoogleカレンダーを挿入する
4 lectures 13:12

グループレッスンと、マンツーマンレッスンの固定ページに、レッスンの開催スケジュールを表示させていきます。

Googleカレンダーを利用するのですが、Googleアカウントがないと利用できません。

アカウント作成されてない方、作成するのが手間だなと感じる場合は本セクションは飛ばしても構いません。

まずは、グループレッスンのカレンダーを作成していきます。

Googleカレンダーにグループレッスンのスケジュールを登録する
03:57

ここでは、マンツーマンレッスンのカレンダーを作成します。

カレンダーの色設定を行なっていますが、色設定は自由です。

色の変更はしてもしなくても、どちらでも構いません。

Googleカレンダーにマンツーマンレッスンのスケジュールを登録する
01:41

作成したカレンダーを、固定ページに挿入していきます。

まずは、グループレッスンのカレンダーを挿入します。

PC、スマホどちらの場合もみやすいように調整していきます。

グループレッスンの固定ページにGoogleカレンダーを埋め込む
04:48

最後に、マンツーマンレッスンページにも、カレンダーを挿入していきます。

グループレッスンの内容の復習にもなりますので、ご自身でやってみてから、答え合わせとして動画を視聴しても構いません。

マンツーマンレッスンの固定ページにGoogleカレンダーを埋め込む
02:46
+ 固定ページの公開・リンクの設定
2 lectures 06:54

固定ページが全て完成したので、公開していきます。

グループレッスン、マンツーマンレッスンは、レッスン案内ページの子供として設定していきます。

固定ページの公開
04:26

ページが公開されたので、リンクを設定していきます。

レッスン案内ページに、グループレッスン、マンツーマンレッスンのそれぞれのリンクを設定し、ページからページへ移動できるようにします。

固定ページにリンクを設定する
02:28
+ グローバルナビゲーションを設置する
1 lecture 03:49

サイト訪問者は、まずトップページを訪れることが多いです。

前回までで、固定ページは公開されていますが、トップページからの導線がありません。

ですので、グローバルナビで、導線を作っていきましょう。

グローバルナビの設置
03:49
+ Webフォント「Googleフォント」を利用し、フォント(書体)を変更する
1 lecture 06:15

Googleフォントを利用して、フォント(書体)を変えていきます。

CSSの編集で、フォントを適用していきます。

cssの知識がなくても、コピーアンドペーストと、少しの記述でできることをご紹介しています。

フォントが変わると、サイトの雰囲気も変わっていきますので、レッスン終了後も、いろいろなフォントを試してみてください。

GoogleフォントをWebサイトに設置する
06:15
Requirements
  • パソコンでインターネットを閲覧したことがあること
Description

「サイト作るって言ったって、まず何から始めたらいいかわからない・・・」


ものすごくシンプルなタイトルをみて、

更にこの文章を読み進めてくださって、ありがとうございます!


あなたは、シンプルに、

「ITの知識つけたい、Wordpressでウェブサイトを作りたい」

そう思ってますよね。

始めるにも、何から始めたらいいかわからない、だからここにたどり着いてくれたのだと思います。


私自身も、

「ワードプレスって難しそうだなぁ・・・」

「いつかやってみよう。」

「まだいっか!」

と、いつまでたっても始められずにいました。


ですが始めてみたら、難しいことはなくむしろ簡単で、

htmlやcssを使用せずに、ウェブサイトが作れることに感動しました。


今では、

「もっと早くやっとけばよかったぁ^^;」

と心の底から思っています。


リモートワークや、ウェブサービスを取り入れた働き方が定着した今、

「ウェブサイト制作のスキルは誰もが持っていた方がいいスキル」

ではないでしょうか。


ワードプレスは先ほども述べたように、htmlやcssの知識がなくても始められます。

また、この講座では、無料で利用できるサービスで、ウェブサイトを作成していきます。

なので、ハードルは何もないんです。


他の講座と違うところは、とにかくシンプルなところ。

作成していくウェブサイトも、とってもシンプルです。

ワードプレスの機能についても、「最低限これだけあれば!」という部分に絞ってお話ししており

3時間で完成できる内容になっています。


おっと!

話が長くなってきてしまいました。

このくらいにして、以下講座の内容をお伝えします。


サーバーの契約から、ワードプレスサイトの作成方法をゼロから順番に行っていきます。
Google Chromeのデベロッパーツールの使い方も学習していきます。

カレンダーや、Webフォントに関しては、Wordpress以外のWebサイトでも利用できる方法です。

少しだけ応用技もまじえつつ、講座を進めていきます。


わからない部分はオンラインフォーラムでご質問ください!

独学で一人で進めていく・・・

というものとは違い、きちんと答えさせていただきます。


最後まで受講していただければ、ひとりでWordpressサイトを制作できるようになります。

では、あなたの受講をお待ちしています!


p.s.

「智子のホームページ教室」

というブログを運営しています。

講座に参加するのは、まだ迷い中!

という方は、ブログでもWeb制作の情報発信していますので、是非ご覧ください^^

Who this course is for:
  • ホームページ制作に興味がある方
  • ワードプレスでのWeb制作に興味がある方
  • ワードプレス初心者
  • Web制作初心者
  • サーバーなど、まずは無料で始めたい方