【初心者向け】Xserver × WordPress × Lightningで作るホームページの手順とお役立ち情報まとめ

こんにちは。
このページでは、エックスサーバー(Xserver)を使ってWordPressサイトを立ち上げる手順を、初心者の方にもわかりやすくまとめています。

実際の画面スクリーンショットも載せながら、WordPressの無料テーマ「Lightning」で作るホームページの流れを紹介します。

Information

このページは暫定的に公開しています。後日パスワード設定する予定です。

目次

1. 初期設定

1-1. Xserverでドメインを取得する

引用元:XServer


まずは、自分のサイトURL(ドメイン)を決めるところからスタートします。

「.com」や「.net」など、希望のドメインをXserverで取得します(有料)取得後、管理画面から簡単にWordPressをインストールできます。

引用元:XServer
Success

WordPress.com(単体)を使う場合、無料プランだとプラグインが使えず、広告も出せません。将来、収益化を考えているなら、XServer × WordPressの構成がオススメです。

【 XServer友達紹介キャンペーン 】あります!

「紹介した人・された人」双方に特典がつくので、利用して損はないかと思います。少しでもお得に... よろしければ使ってください。

1-2. WordPressサイトを作成する

ドメインが取得できたら、そこにWordPressをインストールします。


以下の内容を設定します。

  • サイト名(あとから変更可能)
  • メールアドレス(通知・ログイン用)
  • 管理画面のログインパスワード
  • デザイン設定(テーマ:Lightning 子テーマ含むを選択)


WordPressの管理画面URL(例:https://●●●/wp-admin)をブックマークしておきましょう。ここが、すべての作業のスタート地点になります。

1-3. WordPress管理画面の基本



管理画面(ダッシュボード)からできることは、大きく分けて以下の4つ。他にも細かい設定は可能ですが、まずはここだけ押さえておきましょう。

  • 投稿:ブログ記事の作成・編集
  • 固定ページ:プロフィールやプライバシーポリシーなどの作成
  • 外観:サイトデザインの設定
  • プラグイン:機能の追加

2. プラグイン設定(便利な機能を追加)


プラグインとは、WordPressに後から追加できる機能のこと。入れすぎると動作が重くなるため、最初は以下の3つがおすすめです。

  • Jetpack
    → アクセス分析・セキュリティ PVやアクセス元を確認できる
  • Duplicate Post
    → 投稿の複製 レイアウトをコピーして効率UP
  • Simple TOC(または Easy Table of Contents)
    → 目次は SEO対策にも効果があります

3. 投稿(ブログ記事の作成)

3-1. 基本構成


WordPressの投稿画面は、「タイトル」「本文エリア」に分かれています。ブロックエディター形式で、文字・画像・見出しなどを自由に追加できます。

本文エリアに追加できるもの(一例)

  • リスト
  • カラム
  • 目次(プラグイン)
  • ボタン
  • 吹き出し
  • 画像

3-2. 設定項目の説明


投稿画面 右側の設定項目も重要です。

  • アイキャッチ画像:Canvaなどで作成がおすすめ
  • 投稿日時:予約投稿も可能
  • スラッグ:URLに使われる短い英単語
  • カテゴリ・タグ:記事を分類する
  • 抜粋:記事一覧での紹介文(空欄でも自動で抜粋されます)

4. 固定ページ(独立したページを作る)


固定ページとは、カテゴリーに属さない独立したページのこと。ホームページの基礎情報や、運営方針などをまとめるのに使います。

よく作られる固定ページ例

  • ホームページ(トップページ)
  • サイトマップ
  • プライバシーポリシー(個人情報の扱い方)
  • 免責事項(情報利用に関する注意書き)
  • 記事一覧(投稿ページ)
  • プロフィール
  • お問い合わせ

5. 外観(デザイン設定)

5-1. テーマ:Lightning Child


初期設定のデザイン「Lightning Child」のまま進めます。

ちなみに、子テーマとは、親テーマのデザインを引き継ぎつつ、自分好みにカスタマイズできる仕組みのこと。これにより、テーマのアップデート時に設定が消える心配がありません。

5-2. LP設定(ランディングページ)


トップページの大きな画像は、管理画面 左側の「外観」→「カスタマイズ」の画面で設定します。スライドショーも設定するとスタイリッシュになる一方で、動作が重くなることに注意が必要です。


設定した画像がうまく表示されない場合は、管理画面 左側の「設定」→「一般」のURLを http → https(sを追加) に直すと改善することが多いので、試してみてください。

5-3. 背景・ヘッダー・フッター設定(追記予定)

背景:単色・画像どちらもOK
ヘッダー/フッター:メニューやSNSアイコンを設定可能

固定ページや外部リンクも設置できます

👉 画像サンプル

【小ネタ】デザインを少しだけ格上げするコツ

アイコン設定
文字の前に表示される小さなアイコン、実はデフォルト機能で簡単に設定可能。これだけで見た目がぐっと整います。

上部のバナーのデザイン変更
カテゴリや固定ページ上部に表示あるバナー、実は変更可能です。単色のままだと味気ないので、画像に変更するだけで雰囲気がガラリと変わります。

👉 画像サンプル

まとめ

WordPress × Lightning × Xserverの組み合わせは、初心者でも扱いやすく 自由度が高いのが魅力です。

最初は 設定に戸惑うかもしれませんが、一度流れをつかめば、自分のペースでサイトを育てていくことができますよ。

――― ちょっとしたお知らせ ―――

わたし個人としては、【グローバル兄弟 育成ログ】というブログを書いています。

  • おうち英語の実践記録
  • 英検に関する体験談と勉強法
  • 家庭学習・習い事レビュー
  • 海外生活・駐在ネタ
  • 便利ツール・リソース紹介
  • イベント・体験型学びの紹介

ご家庭での英語学習や海外教育に興味のある方は、ぜひ覗いてみてくださいね。