簡単ホームページ作成

知識ゼロから作るホームページ

自分のホームページを作ろうと思っても、何から手を付ければ良いのか全く分からない方が多いと思います。
難しいイメージがあり、身構えてしまいます。

HTMLやCSSを勉強しないと作れないと思っていませんか?
でも、初めてホームページを作る人にとってHTMLやCSSを勉強し、理解するのはとても難しい事です。

この記事ではホームページを作る知識がゼロの方でもHTMLやCSSを使わず、WordPressを使ってホームページを作る方法について紹介します。

ここで紹介する手順通りに進めれば、何も考えずホームページを公開する事が出来ます。

まずは、公開するホームページを作ってしまいます。その後、少しずつ修正し、記事を追加し、ボリュームアップし、アクセス数が増えるホームページにしていきましょう。

ホームページを作るには、やる事が数多くありますが、ここでは最低限の事にしぼって、ホームページの骨格を作り、公開する事に重点を置ます。

例として以下の題材で作成します。

サイト名 北海道の日本酒
サイト内容 北海道の酒蔵、日本酒を紹介します。
URL www.hokkaido-sake.com

それでは、初めてみましょう。



1.レンタルサーバー、ドメインを用意する

WordPressを使ってホームページ作るには、レンタルサーバーを用意し、独自ドメインを用意する必要があります。

ここでは、おすすめのロリポップとムームードメインを使ったドメインとレンタルサーバーを用意しました。

WordPressのは無料ですが、動かすためのサーバーとアクセスするためのドメインは毎月お金がかかります。

ドメインはレンタルサーバーのドメインでも良いですが、世界に1個だけしかない、自分だけのアドレス(ドメイン)を持つ事で、ホームページを作るモチベーション維持にも良いで、おすすめです。


2.WordPressのインストール

レンタルしたサーバーにWordPressのインストールを行います。

  1. ロリポップ管理ページにログインし、「サイト作成ツール」-「WordPress簡単インストール」をクリックします。
    WordPressインストール1
  2. URL、サイトタイトル等を設定します。
    サイトURLは「www.hokkaido-sake.com」を選択、利用データベースはデフォルトのままです。
    サイトのタイトルは「北海道の日本酒」、ユーザー名、パスワード、パスワード(確認)、メールアドレスは任意に入力してください。
    プライバシーはチェックが入ったままで、「入力内容確認」をクリックします。

    WordPressインストール2
  3. 設定した内容を確認し、問題がなければ「承諾する」にチェックを入れ、「インストール」をクリックします。
    WordPressインストール3
  4. 「正常にインストールが完了しました。」と表示されたら完了です。
    サイトURL、管理者ページURLをブラウザのお気に入りに登録しておきましょう。

    WordPressインストール4
  5. WordPressのインストールが完了したので、実際にブラウザにURLを入力し確認します。ブログの様なサイトが出来ました。
    WordPressインストール5

3.WordPressの初期設定をする

サイトの基本情報を設定しましょう。
インストールしたばかりのデフォルト設定のままだと使用しない機能が有効になっています。使用しない機能は無効化します。

  1. WordPress管理者ページにログインします。
    WP初期設定1
  2. 「設定」-「一般」をクリックします。
    WP初期設定2
  3. サイトのタイトルに間違いが無いか確認し、キャッチフレーズを入力し、ページ最下部の「変更を保存」をクリックします。
    キャッチフレーズはdescription(サイト要約)に設定され、Google等の検索エンジンの検索結果画面に表示されるサイト説明文に使用されます。

    WP初期設定3
  4. 「設定」-「ディスカッション」をクリックします。
    WP初期設定4
  5. 「新しい投稿へのコメントを許可」のチェックを外し、ページ最下部の「変更を保存」をクリックします。
    WP初期設定5

 

4.テーマを設定する

WordPressのテーマを設定します。テーマとはホームページのデザインの事です。

テーマはたくさんの種類から選びますが、使用している人が多く、インターネットにも情報が多く、カスタマイズもしやすいLightningを使用します。

テーマ変更前
WordPressインストール5
テーマ変更後
テーマを設定する8

テーマはインストールするだけではなく、「有効化」という作業をし設定をして、使用できるようになります。

 

4.1 テーマのインストール、有効化

  1. 「外観」-「テーマ」をクリックします。
    テーマを設定する1
  2. 「新規追加」をクリックします。
    テーマを設定する2
  3. 検索ボックスに「ligthning」と入力します。
    テーマを設定する3
  4. lightningテーマの上にマウスカーソルを持って行き、「インストール」をクリックします。
    テーマを設定する4
  5. 「インストール完了」と表示されます。「有効化」をクリックします。インストールしただけではテーマは変わりません。
    テーマを設定する6
  6. lightningにテーマが設定されました。実際にブラウザで確認します。
    テーマを設定する8

 

4.2 テーマの設定

デフォルトで表示されている、トップページのPR Blockを非表示にする。

スライドショー・PR Block表示
テーマを設定する8
スライドショー・PR Block非表示
Lightningテーマ初期設定7
  1. 「外観」-「カスタマイズ」をクリックします。
    Lightningテーマ初期設定1
  2. 「Lightning トップページ PR Block」をクリックします。
    Lightningテーマ初期設定2
  3. 「PR Blockを表示する」のチェックを外し、「<」をクリックします。
    Lightningテーマ初期設定3
  4. 「Lightning トップページスライドショー」をクリックします。
    Lightningテーマ初期設定4
  5. 「スライドを非表示にする」にチェックをいれ、「公開」をクリックします。
    Lightningテーマ初期設定5
  6. 「公開済み」の表示が出たら完了です。
    Lightningテーマ初期設定6
  7. 実際のアドレスを入力し確認します。PR Blockとスライドショーがなくなりスッキリしました。
    Lightningテーマ初期設定7

 

5.投稿でブログを書く

投稿ページはブログとしての機能があり、カテゴリーで分類し、時系列に表示します。RSSを生成したり、コメント機能、Ping送信機能があります。

5.1 カテゴリーを作成

  1. 「投稿」-「カテゴリー」をクリックします。
    投稿設定1
  2. 「未分類」上にマウスカーソルを移動すると、「編集」が表示されるのでクリックします。
    投稿設定2
  3. 名前とスラッグに「未分類」と表示されているので、名前は「日本酒日記」と入力し、スラッグは「diary」と入力します。説明は「日本酒日記」と入力し、「更新」をクリックします。
    投稿設定3
  4. 「カテゴリーを更新しました。」と表示されるので、「←カテゴリーに戻る」をクリックします。
    投稿設定4
  5. カテゴリーが「日本酒日記」と変更されました。
    投稿設定5

5.2 投稿を書く

  1. 「投稿」-「投稿一覧」をクリックします。
    投稿する1
  2. サンプルページ「Hello world!」の上にマウスカーソルを移動すると「ごみ箱へ移動」が表示されるのでクリックします。
    投稿する2
  3. サンプルページがごみ箱に移動されました。
    投稿する3
  4. 「投稿」-「新規追加」をクリックします。
    投稿する4
  5. 投稿記事のタイトル、本文を入力し「公開」をクリックします。
    投稿する5
  6. 公開の確認画面が表示されるので、「公開」をクリックします。
    投稿する6
  7. 投稿が完了しました。「投稿を表示」をクリックし、投稿ページを確認します。
    投稿する7
  8. レイアウト、誤字などを確認します。
    投稿する8
  9. TOPページを確認します。ブログ形式になっています。
    投稿する9

 

6.固定ページ作成する

必要な4個のページの固定ページを最初に作りましょう。

TOPページ このサイトの説明
北海道の酒蔵 北海道にある酒蔵の紹介
北海道の日本酒 北海道の酒蔵で作られた北海道の地酒を紹介
日本酒の勉強 日本酒に関わる、用語、作り方、種類などを解説
    1. 「固定ページ」-「固定ページ一覧」
      固定ページ作成1
    2. サンプルページとプライバシーポリシーのチェックボックスに「✓」を入れ、「ごみ箱へ移動」を選択し「適用」をクリックします。
      固定ページ作成2
    3. ページがごみ箱に移動されました。「新規追加」をクリックします。
      固定ページ作成3
    4. タイトルに「TOPページ」と入力し、「公開」をクリックします。ページのみ作成して内容はホームページの骨格が出来てから作成します。
      固定ページ作成4
    5. 公開してもよいですか?と確認ページになるので、「公開」をクリックします。
      固定ページ作成5
    6. 「TOPページを公開しました。」と表示され、公開完了です。
      固定ページ作成6
    7. 固定ページ一覧に作成した「TOPページ」が表示されました。同様にして残りの3ページを作成します。
      固定ページ作成7
    8. 4個のページが作成完了しました。
      固定ページ作成8
    9. 「設定」-「表示設定」をクリックします。
      「TOPページ」をトップページに設定します。

      固定ページ作成9
    10. 「固定ページ」をクリックし、ホームページを「TOPページ」を選択し、「変更を保存」をクリックします。
      固定ページ作成10
    11. 「設定を保存しました。」と表示されました。
      固定ページ作成11
    12. ホームページを開いて確認します。
      固定ページ作成12

 

ナビゲーションメニューを設定します。メニューを設定するとホームページらしくなってきます。

メニュー1

  1. 「外観」-「メニュー」をクリックします。
    メニュー2
  2. メニュー名に「ヘッダーメニュー」と入力し、「Header Navigation」にチェックを入れ、「メニュー作成」をクリックします。メニュー名は任意の名前を入れてください。
    メニュー3
  3. 「すべて表示」タブをクリックし、固定ページ4個すべてチェックを入れ、「メニューに追加」をクリックします。
    メニュー4
  4. メニュー構造に、固定ページ4個が追加されました。カテゴリーをクリックし「日本酒日記」にチェックを入れ、「メニューに追加」をクリックします。
    メニュー5
  5. メニュー構造に固定ページ4個とカテゴリーが日本酒日記の投稿が追加されました。「メニューを保存」をクリックします。
    メニュー6
  6. 「ヘッダーメニューを更新しました。」と表示され、メニューの設定が完了しました。メニュー7
  7. サイトを確認します。メニューが表示されています。
    メニュー8

8.ウィジェットの設定をする

デフォルトでは、ブログのようなウィジェットが表示されているので削除します。

ウィジェット削除1

  1. 「外観」-「ウィジェット」をクリックします。
    ウィジェット削除2
  2. 「フッター上部」-「アーカイブ」の右側の「▼」をクリックします。
    ウィジェット削除3
  3. 「削除」をクリックします。同様に、カテゴリー、メタ情報も削除します。
    ウィジェット削除4
  4. フッター上部のウィジェットから何もなくなりました。
    ウィジェット削除5
  5. サイトを確認します。ウィジェットがなくなり、シンプルなホームページなりました。
    ウィジェット削除6

9.コンテンツを作りこむ

ホームページの骨格が出来上がりました。

ここからはコンテンツを作りこみ、ページを増やしてホームページを作りこんでいきます。

サンプルホームページ

北海道の日本酒
北海道の地酒を中心に日本酒について情報を発信します



タイトルとURLをコピーしました