知識ゼロから作るホームページ
自分のホームページを作ろうと思っても、何から手を付ければ良いのか全く分からない方が多いと思います。
難しいイメージがあり、身構えてしまいます。
HTMLやCSSを勉強しないと作れないと思っていませんか?
でも、初めてホームページを作る人にとってHTMLやCSSを勉強し、理解するのはとても難しい事です。
この記事ではホームページを作る知識がゼロの方でもHTMLやCSSを使わず、WordPressを使ってホームページを作る方法について紹介します。
ここで紹介する手順通りに進めれば、何も考えずホームページを公開する事が出来ます。
まずは、公開するホームページを作ってしまいます。その後、少しずつ修正し、記事を追加し、ボリュームアップし、アクセス数が増えるホームページにしていきましょう。
ホームページを作るには、やる事が数多くありますが、ここでは最低限の事にしぼって、ホームページの骨格を作り、公開する事に重点を置ます。
例として以下の題材で作成します。
サイト名 | 北海道の日本酒 |
---|---|
サイト内容 | 北海道の酒蔵、日本酒を紹介します。 |
URL | www.hokkaido-sake.com |
それでは、初めてみましょう。
1.レンタルサーバー、ドメインを用意する
WordPressを使ってホームページ作るには、レンタルサーバーを用意し、独自ドメインを用意する必要があります。
ここでは、おすすめのロリポップとムームードメインを使ったドメインとレンタルサーバーを用意しました。
WordPressのは無料ですが、動かすためのサーバーとアクセスするためのドメインは毎月お金がかかります。
ドメインはレンタルサーバーのドメインでも良いですが、世界に1個だけしかない、自分だけのアドレス(ドメイン)を持つ事で、ホームページを作るモチベーション維持にも良いで、おすすめです。
2.WordPressのインストール
レンタルしたサーバーにWordPressのインストールを行います。
- ロリポップ管理ページにログインし、「サイト作成ツール」-「WordPress簡単インストール」をクリックします。
- URL、サイトタイトル等を設定します。
サイトURLは「www.hokkaido-sake.com」を選択、利用データベースはデフォルトのままです。
サイトのタイトルは「北海道の日本酒」、ユーザー名、パスワード、パスワード(確認)、メールアドレスは任意に入力してください。
プライバシーはチェックが入ったままで、「入力内容確認」をクリックします。 - 設定した内容を確認し、問題がなければ「承諾する」にチェックを入れ、「インストール」をクリックします。
- 「正常にインストールが完了しました。」と表示されたら完了です。
サイトURL、管理者ページURLをブラウザのお気に入りに登録しておきましょう。 - WordPressのインストールが完了したので、実際にブラウザにURLを入力し確認します。ブログの様なサイトが出来ました。
3.WordPressの初期設定をする
サイトの基本情報を設定しましょう。
インストールしたばかりのデフォルト設定のままだと使用しない機能が有効になっています。使用しない機能は無効化します。
- WordPress管理者ページにログインします。
- 「設定」-「一般」をクリックします。
- サイトのタイトルに間違いが無いか確認し、キャッチフレーズを入力し、ページ最下部の「変更を保存」をクリックします。
キャッチフレーズはdescription(サイト要約)に設定され、Google等の検索エンジンの検索結果画面に表示されるサイト説明文に使用されます。 - 「設定」-「ディスカッション」をクリックします。
- 「新しい投稿へのコメントを許可」のチェックを外し、ページ最下部の「変更を保存」をクリックします。
4.テーマを設定する
WordPressのテーマを設定します。テーマとはホームページのデザインの事です。
テーマはたくさんの種類から選びますが、使用している人が多く、インターネットにも情報が多く、カスタマイズもしやすいLightningを使用します。
テーマはインストールするだけではなく、「有効化」という作業をし設定をして、使用できるようになります。
4.1 テーマのインストール、有効化
- 「外観」-「テーマ」をクリックします。
- 「新規追加」をクリックします。
- 検索ボックスに「ligthning」と入力します。
- lightningテーマの上にマウスカーソルを持って行き、「インストール」をクリックします。
- 「インストール完了」と表示されます。「有効化」をクリックします。インストールしただけではテーマは変わりません。
- lightningにテーマが設定されました。実際にブラウザで確認します。
4.2 テーマの設定
デフォルトで表示されている、トップページのPR Blockを非表示にする。
- 「外観」-「カスタマイズ」をクリックします。
- 「Lightning トップページ PR Block」をクリックします。
- 「PR Blockを表示する」のチェックを外し、「<」をクリックします。
- 「Lightning トップページスライドショー」をクリックします。
- 「スライドを非表示にする」にチェックをいれ、「公開」をクリックします。
- 「公開済み」の表示が出たら完了です。
- 実際のアドレスを入力し確認します。PR Blockとスライドショーがなくなりスッキリしました。
5.投稿でブログを書く
投稿ページはブログとしての機能があり、カテゴリーで分類し、時系列に表示します。RSSを生成したり、コメント機能、Ping送信機能があります。
5.1 カテゴリーを作成
- 「投稿」-「カテゴリー」をクリックします。
- 「未分類」上にマウスカーソルを移動すると、「編集」が表示されるのでクリックします。
- 名前とスラッグに「未分類」と表示されているので、名前は「日本酒日記」と入力し、スラッグは「diary」と入力します。説明は「日本酒日記」と入力し、「更新」をクリックします。
- 「カテゴリーを更新しました。」と表示されるので、「←カテゴリーに戻る」をクリックします。
- カテゴリーが「日本酒日記」と変更されました。
5.2 投稿を書く
- 「投稿」-「投稿一覧」をクリックします。
- サンプルページ「Hello world!」の上にマウスカーソルを移動すると「ごみ箱へ移動」が表示されるのでクリックします。
- サンプルページがごみ箱に移動されました。
- 「投稿」-「新規追加」をクリックします。
- 投稿記事のタイトル、本文を入力し「公開」をクリックします。
- 公開の確認画面が表示されるので、「公開」をクリックします。
- 投稿が完了しました。「投稿を表示」をクリックし、投稿ページを確認します。
- レイアウト、誤字などを確認します。
- TOPページを確認します。ブログ形式になっています。
6.固定ページ作成する
必要な4個のページの固定ページを最初に作りましょう。
TOPページ | このサイトの説明 |
北海道の酒蔵 | 北海道にある酒蔵の紹介 |
北海道の日本酒 | 北海道の酒蔵で作られた北海道の地酒を紹介 |
日本酒の勉強 | 日本酒に関わる、用語、作り方、種類などを解説 |
-
- 「固定ページ」-「固定ページ一覧」
- サンプルページとプライバシーポリシーのチェックボックスに「✓」を入れ、「ごみ箱へ移動」を選択し「適用」をクリックします。
- ページがごみ箱に移動されました。「新規追加」をクリックします。
- タイトルに「TOPページ」と入力し、「公開」をクリックします。ページのみ作成して内容はホームページの骨格が出来てから作成します。
- 公開してもよいですか?と確認ページになるので、「公開」をクリックします。
- 「TOPページを公開しました。」と表示され、公開完了です。
- 固定ページ一覧に作成した「TOPページ」が表示されました。同様にして残りの3ページを作成します。
- 4個のページが作成完了しました。
- 「設定」-「表示設定」をクリックします。
「TOPページ」をトップページに設定します。 - 「固定ページ」をクリックし、ホームページを「TOPページ」を選択し、「変更を保存」をクリックします。
- 「設定を保存しました。」と表示されました。
- ホームページを開いて確認します。
7.メニューの設定をする
ナビゲーションメニューを設定します。メニューを設定するとホームページらしくなってきます。
- 「外観」-「メニュー」をクリックします。
- メニュー名に「ヘッダーメニュー」と入力し、「Header Navigation」にチェックを入れ、「メニュー作成」をクリックします。メニュー名は任意の名前を入れてください。
- 「すべて表示」タブをクリックし、固定ページ4個すべてチェックを入れ、「メニューに追加」をクリックします。
- メニュー構造に、固定ページ4個が追加されました。カテゴリーをクリックし「日本酒日記」にチェックを入れ、「メニューに追加」をクリックします。
- メニュー構造に固定ページ4個とカテゴリーが日本酒日記の投稿が追加されました。「メニューを保存」をクリックします。
- 「ヘッダーメニューを更新しました。」と表示され、メニューの設定が完了しました。
- サイトを確認します。メニューが表示されています。
8.ウィジェットの設定をする
デフォルトでは、ブログのようなウィジェットが表示されているので削除します。
- 「外観」-「ウィジェット」をクリックします。
- 「フッター上部」-「アーカイブ」の右側の「▼」をクリックします。
- 「削除」をクリックします。同様に、カテゴリー、メタ情報も削除します。
- フッター上部のウィジェットから何もなくなりました。
- サイトを確認します。ウィジェットがなくなり、シンプルなホームページなりました。
9.コンテンツを作りこむ
ホームページの骨格が出来上がりました。
ここからはコンテンツを作りこみ、ページを増やしてホームページを作りこんでいきます。
サンプルホームページ