WordPressでホームページを作成する方法（ゼミ）

ゼミ
この記事は約7分で読めます。
  1. #00 ショートカットキーを覚えよう
    1. 「Ctrl」＋「C」コピー
    2. 「Ctrl」＋「V」貼り付け
    3. 「Alt」＋「Tab」画面切り替え
    4. 「Ctrl」＋「Z」１つ戻る
    5. 「Ctrl」＋「S」保存
  2. #01 XFREEのアカウントを作成
    1. 以下のサイトにアクセスし「お申込み」をクリックします。
    2. メールアドレスを入力し「確認メール送信」ボタンをクリックする。
    3. 以下のメールが届くので、URLをクリックする。
    4. 会員情報を入力し「確認画面へ進む」ボタンをクリックする。
    5. 「会員登録を確定する」ボタンをクリックする。
    6. 「ログイン」ボタンをクリック。
    7. サーバーIDを入力し、「サーバーIDの登録（確認）」ボタンをクリックします。
    8. 「サーバーIDの登録（確定）」ボタンをクリックします。
    9. 「無料レンタルサーバー」リンクをクリックします。
  3. #02 エックスフリーでWordPressを利用
    1. WordPressの「利用を開始する」ボタンをクリック。
    2. 初期設定の完了画面が表示される。「無料レンタルサーバー」リンクをクリックする。
    3. 「管理パネルログイン」をクリック
      1. ■3ヶ月ごとに「無料更新」をクリックして契約を更新する必要があります。更新は利用期限の2ヶ月前から可能ですので毎月更新しましょう。
    4. 「新規インストール」ボタンをクリック
    5. 各項目を入力し「次へ進む」をクリック
    6. 確認画面で「確定（WordPressをインストール）」をクリックする。
    7. WordPressのログインURL、ユーザー、パスワードが発行される。「アプリケーション設定画面へ」のリンクをクリックする。
    8. こちらの画面から各種設定が行えます。「wp-admin」のリンクをクリックして管理者画面を開きます。
    9. 以下の情報を管理者画面で入力し「ログイン」ボタンをクリック
    10. WordPressの管理画面にログインできました。
      1. 文字の入力が大変な場合は、以下の見本からコピペしてください。
  4. #03 WordPressの基本設定
    1. 設定＞一般をクリックする。
    2. サイトのタイトル「BAKED SWEETS CAFE」キャッチフレーズ「おいしい珈琲と焼き菓子のお店」を入力し保存する。
    3. 設定＞パーマリンクをクリックし、カスタム構造を選択して「%category%」「%post_id％」のボタンをクリックし保存する。
    4. ユーザー＞プロフィールをクリックし、ニックネーム「管理人」、ブログ上の表示名に「管理人」選択し、保存する。
    5. 設定＞検索エンジンが…のチェックボックスをONにするとGoogleの検索でヒットしないようにできます。
    6. URLを知っている人だけがサイトを見れるようにします。今後、このWordPressをカスタマイズして自分のホームページを作成する場合はOFFにしておいてください。
  5. #04 Webサイトのデザインを設定しよう
    1. 外観＞テーマを選択し、新規追加をクリック
    2. 検索窓に「Twenty Seventeen」と入力し、出てきたテーマの「インストール」をクリック
    3. 「有効化」をクリック
    4. 上部の「サイトを表示」をクリックし、画面を確認する
    5. 上部の「ダッシュボード」をクリックし、管理者画面に戻る
    6. このテーマはヘッダー、メインコンテンツ、サイドバー、フッターの４エリアで構成されている。
    7. サンプルファイルをダウンロードする
    8. 右クリック＞すべて展開をクリック。
    9. チェックボックスをONにして、「展開」をクリック
    10. imageフォルダの中に画像があることを確認する。
    11. 管理者画面に戻り、外観＞ヘッダーをクリック。
    12. 「新規画像を追加」をクリック。
    13. 「ファイル選択」をクリック。
    14. 「header-img.jpg」を選択し、「開く」をクリック
    15. 切り抜く範囲を選択し、「画像切り抜き」をクリック
    16. 「公開」をクリックして保存する。
    17. 画像ではなく、動画を設定したい場合は、動画を選択をクリック
      1. （YouTubeのリンクを貼って動画を指定することも可能）
    18. ファイルを選択をクリック。
    19. Movieフォルダの「movie.mp4」をクリック。
    20. 動画を選択をクリック。
    21. 公開をクリックし、変更を保存する。
    22. 文字を見やすくするために、文字色を設定します。（白背景に黄色文字は読みにくい）
    23. ダッシュボード＞外観＞カスタマイズ
    24. ロゴの設定
  6. #05 Webサイトに載せるコンテンツを作ろう
    1. 作成するサイトの構成図（サイトマップ）
    2. 投稿＞投稿一覧
    3. 投稿＞新規追加
    4. 投稿＞投稿一覧を表示
    5. 投稿＞投稿一覧
    6. 投稿＞新規追加
    7. 文字を装飾して読みやすくする
    8. 投稿＞新規追加 太字設定
    9. 箇条書きリスト設定
    10. 区切り線設定
    11. リンク設定
    12. アイキャッチ画像設定
    13. 投稿＞カテゴリー
    14. カテゴリー追加
    15. カテゴリーをセット
    16. 固定ページ＞固定ページ一覧
    17. Access、Concept、Contact、Menu、Newsの固定ページを作成する
    18. 固定ページ＞固定ページ一覧
    19. 見出しの設定
    20. 最新の投稿の設定
    21. 固定ページ＞固定ページ一覧
    22. 見出しの追加
    23. グーグルマップの設定
  7. #06 Webサイトのレイアウトを変えて使いやすくしよう
    1. 外観＞メニュー
    2. 外観
    3. 設定＞表示設定
    4. 外観＞テーマ
    5. 外観＞カスタマイズ＞テーマ設定
    6. 外観＞ウィジェット
    7. 外観＞ウィジェット
  8. #07 プラグインでWebサイトに便利な機能を追加しよう
    1. Simple Lightbox（画像のポップアップ表示の設定）
    2. Contact Form7（お問い合わせフォームの設置）

#00 ショートカットキーを覚えよう

「Ctrl」＋「C」コピー

「Ctrl」＋「V」貼り付け

「Alt」＋「Tab」画面切り替え

「Ctrl」＋「Z」１つ戻る

「Ctrl」＋「S」保存

#01 XFREEのアカウントを作成

ホームページを公開するには、インターネット上にファイルを置くための場所を借りる必要があります。

レンタルサーバーには有料・無料のものがありますが今回は無料の「XFREE（エックスフリー）」というものを使用します。

■3ヶ月ごとに「無料更新」をクリックして契約を更新する必要があります。更新は利用期限の2ヶ月前から可能ですので毎月更新しましょう。

以下のサイトにアクセスし「お申込み」をクリックします。

無料レンタルサーバー「シンフリーサーバー」
「シンフリーサーバー」は最新の技術を積極的に取り込む革新性を重視した無料レンタルサーバーです。
www.xfree.ne.jp

メールアドレスを入力し「確認メール送信」ボタンをクリックする。

以下のメールが届くので、URLをクリックする。

会員情報を入力し「確認画面へ進む」ボタンをクリックする。

「会員登録を確定する」ボタンをクリックする。

「ログイン」ボタンをクリック。

サーバーIDを入力し、「サーバーIDの登録（確認）」ボタンをクリックします。

ここで入力したIDがWebサイトのアドレスになります。

「サーバーIDの登録（確定）」ボタンをクリックします。

「無料レンタルサーバー」リンクをクリックします。

#02 エックスフリーでWordPressを利用

WordPressの「利用を開始する」ボタンをクリック。

初期設定の完了画面が表示される。「無料レンタルサーバー」リンクをクリックする。

「管理パネルログイン」をクリック

■3ヶ月ごとに「無料更新」をクリックして契約を更新する必要があります。更新は利用期限の2ヶ月前から可能ですので毎月更新しましょう。

「新規インストール」ボタンをクリック

各項目を入力し「次へ進む」をクリック

確認画面で「確定（WordPressをインストール）」をクリックする。

WordPressのログインURL、ユーザー、パスワードが発行される。「アプリケーション設定画面へ」のリンクをクリックする。

こちらの画面から各種設定が行えます。「wp-admin」のリンクをクリックして管理者画面を開きます。

以下の情報を管理者画面で入力し「ログイン」ボタンをクリック

WordPressの管理画面にログインできました。

文字の入力が大変な場合は、以下の見本からコピペしてください。

Baked Sweets Cafe – おいしい珈琲と焼き菓子のお店
oneday-wp.com

一人でも進められそうな人はどんどん進めてください！

#03 WordPressの基本設定

設定＞一般をクリックする。

サイトのタイトル「BAKED SWEETS CAFE」キャッチフレーズ「おいしい珈琲と焼き菓子のお店」を入力し保存する。

キャッチフレーズとは、Webサイトの内容を簡潔に表した説明文のことです。

設定＞パーマリンクをクリックし、カスタム構造を選択して「%category%」「%post_id％」のボタンをクリックし保存する。

ユーザー＞プロフィールをクリックし、ニックネーム「管理人」、ブログ上の表示名に「管理人」選択し、保存する。

設定＞検索エンジンが…のチェックボックスをONにするとGoogleの検索でヒットしないようにできます。

URLを知っている人だけがサイトを見れるようにします。今後、このWordPressをカスタマイズして自分のホームページを作成する場合はOFFにしておいてください。

#04 Webサイトのデザインを設定しよう

外観＞テーマを選択し、新規追加をクリック

検索窓に「Twenty Seventeen」と入力し、出てきたテーマの「インストール」をクリック

「有効化」をクリック

上部の「サイトを表示」をクリックし、画面を確認する

上部の「ダッシュボード」をクリックし、管理者画面に戻る

このテーマはヘッダー、メインコンテンツ、サイドバー、フッターの４エリアで構成されている。

サンプルファイルをダウンロードする

https://gihyo.jp/assets/files/book/2022/978-4-297-12695-7/download/wp-sample.zip
gihyo.jp

右クリック＞すべて展開をクリック。

チェックボックスをONにして、「展開」をクリック

imageフォルダの中に画像があることを確認する。

管理者画面に戻り、外観＞ヘッダーをクリック。

「新規画像を追加」をクリック。

「ファイル選択」をクリック。

「header-img.jpg」を選択し、「開く」をクリック

切り抜く範囲を選択し、「画像切り抜き」をクリック

「公開」をクリックして保存する。

画像ではなく、動画を設定したい場合は、動画を選択をクリック

（YouTubeのリンクを貼って動画を指定することも可能）

ファイルを選択をクリック。

Movieフォルダの「movie.mp4」をクリック。

動画を選択をクリック。

公開をクリックし、変更を保存する。

文字を見やすくするために、文字色を設定します。（白背景に黄色文字は読みにくい）

ダッシュボード＞外観＞カスタマイズ

ロゴの設定

#05 Webサイトに載せるコンテンツを作ろう

作成するサイトの構成図（サイトマップ）

投稿＞投稿一覧

投稿＞新規追加

投稿＞投稿一覧を表示

投稿＞投稿一覧

投稿＞新規追加

文字を装飾して読みやすくする

投稿＞新規追加 太字設定

箇条書きリスト設定

区切り線設定

リンク設定

アイキャッチ画像設定

投稿＞カテゴリー

カテゴリー追加

カテゴリーをセット

固定ページ＞固定ページ一覧

Access、Concept、Contact、Menu、Newsの固定ページを作成する

固定ページ＞固定ページ一覧

見出しの設定

最新の投稿の設定

固定ページ＞固定ページ一覧

見出しの追加

グーグルマップの設定

〒162-0846 東京都新宿区市谷左内町２１−１３
〒162-0846 東京都新宿区市谷左内町２１−１３
www.google.co.jp

#06 Webサイトのレイアウトを変えて使いやすくしよう

外観＞メニュー

外観

設定＞表示設定

外観＞テーマ

外観＞カスタマイズ＞テーマ設定

外観＞ウィジェット

外観＞ウィジェット

#07 プラグインでWebサイトに便利な機能を追加しよう

Simple Lightbox（画像のポップアップ表示の設定）

Contact Form7（お問い合わせフォームの設置）

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