【完全保存版】ホームページ立ち上げ方法
- レンタルサーバーの契約
- 独自ドメインの取得
- サーバーとドメインの紐付け
- ドメインのSSL設定（任意）
- データベースの作成（任意）
目次
レンタルサーバーの契約(エックスサーバー)
現状コーポレートサイトやブログをするならエックスサーバー一択です。使いやすい。早い。いいところしかないといった感じです笑
ざっと特徴は、下記に掲載しておきます。エックスサーバーで契約する場合は、そのまま下記のバナーをクリックして進めてください。
上記のバナーからエックスサーバーのトップページに入ったらお申し込みをクリックします。
初めてレンタルサーバーを契約する場合は、下記の10日間無料お試しをクリックします。
サーバーIDは、元々割り振られているIDで問題ありません。プランも最初は、一番安いプランで作成することをお勧めします。スタンダードプランを選択しましょう。
ドメインの決定
次は、そのままドメインも今の時点で決めてしまいます。WordPressクイックスタートに利用するにチェックを入れます。サーバーの契約期間は、任意で設定しましょう。ホームページのドメイン名は、一度決めると後々変更ができないので慎重に決定してください。
ワードプレス情報を入力
次は、ワードプレス情報を入力していきます。情報入力した内容は、後々忘れないようにどこかに保存するかメモをしておいてください。
テーマは、WordPressデフォルトテーマのままエックスサーバーアカウントの登録へ進むをクリックしてください。次の画面でも情報を入力する画面が出てくるので全て入力をして利用規約に同意して次へ進みます。
登録したメールアドレス宛に確認コードが届くので確認コードを入力して次へ進みます。
確認画面に移るのでSMS電話認証へ進むをクリックしてください。
認証コードを取得するをクリックすると登録した電話番号にショートメールが届きます。
ショートメールの認証コードを入力します。認証して申し込みを完了するをクリックします。
下記のようなポップアップが出てきたらサーバーとドメインの登録は、完了です。
サーバーアカウント設定完了のお知らせのメールがきたら開封してください。 メールの下の方に記載がある管理ツール＞ログインURLをクリックします。
クリックすると契約したエックスサーバの画面になるのでお気に入り登録（ブックマーク）などしていつでもアクセスしやすいようにしておきましょう。その後にサーバー管理をクリックしてください。
サーバーのみ取得してドメイン取得を後からやる場合
ドメイン代のお支払い
サーバーのみ先に契約してドメイン取得をしていなかった場合、エックスサーバーアカウントにログインする必要があります。ログインの際には、IDとパスワードが必要です。
ドメイン取得には、who is情報なども必要になり最後にお客様のお支払いを何でするかも決める必要があります。詳しくは、下記で詳しく解説されています。
https://www.xdomain.ne.jp/manual/man_order_domain.php
ドメインの取得には、支払いが完了してからでしか次の工程に進ことはできません。
ドメインの取得の一部やり方の流れをスクショで下記に掲載しておきます。
まずは、サーバーアカウントにログインします。こと時サーバーの所有者にログイン 確認ショートコードが送られるのでそのコードを入力してログインします。
取得したいドメインが取得可能か確認して次に進みます。
who is情報の画面になるので必要事項を記入します。
メールアドレスに設定した人に認証用メールが届きます。
メールの認証をした後に上記の設定するボタンをクリックします。
手続きを続行するをクリックします。
支払い方法を選択して支払いが完了するとドメインの取得が完了となります。
エックスサーバーパネルでドメイン設定の追加
エックスサーバーパネルでドメイン設定の追加を行います。この時、購入したドメイン名を追加設定のところに入力します。
追加するボタンをクリックします。下記の状態になれば追加まで完了した状態です。
この状態になってからサーバーからドメインを確認してみると反映待ちの状態になり数時間から1日ほど反映を待つ必要があります。
WordPress簡単インストールの手順(WordPressクイックスタートを選択した人は、飛ばしてOK)
- サーバーパネルにログイン
- ［WordPress簡単インストール］をクリック
- インストールするドメインの選択
- ［WordPressインストール］をクリック
- 設定項目の入力
サーバーパネルにログイン(WordPressクイックスタートを選択した人は、飛ばしてOK)
［WordPress簡単インストール］をクリックしてインストールをクリックします。
インストールするドメインの選択(WordPressクイックスタートを選択した人は、飛ばしてOK)
インストールするドメインの選択をします。
［WordPressインストール］をクリック(WordPressクイックスタートを選択した人は、飛ばしてOK)
［WordPressインストール］をクリックします。
設定項目の入力をしていきます。
入力内容を確認し、［インストールする］をクリックします。
WordPress管理画面にログインする
簡単インストールの完了画面には、WordPress管理画面のURLが表示されています。
簡単インストールの完了画面を閉じてしまって、URLが確認できない場合は、以下にアクセスしてください。
http://（ドメイン名）/wp-admin/
swellをワードプレスにアップロード
ワードプレスのテンプレートテーマswellの購入が済んでいない方は、下記のswellの購入をしてしまいましょう。正直いってこのテンプレート以外を購入するのは、もったいない。購入して絶対損しないテンプレートがswellだと自信を持って言えます。購入してない人は下記バナーより購入しましょう。
swellのダウンロードが完了したらワードプレス管理画面に戻り外観＞新しいテーマを追加をクリックします。
テーマのアップロードをクリックします。
「ファイルを選択」をクリックし、パソコン上からSWELLのテーマを選択し「今すぐインストール」をクリック。
テーマのインストールが完了したら有効化をクリックします。
有効化をしたら次は、小テーマも同様にダウンロードして有効化します。
PHPのバージョン切り替えが必要な場合は、それぞれのサーバーの取説にしたがって変更してください。
SWELLのユーザー認証が完了していません。
SWELLのユーザー認証が完了していません。と記載された画面が出てくるのでリンクをクリックします。
ユーザー認証を受けているswellの会員アドレスを入力する。認証リクエストを送信します。
メールがくるので認証完了するためURLをクリックする。
認証を完了するとswellのマイページの右下画面に認証が完了と出てきます。
ワードプレス画面に戻りswell アクティベートを完了をクリックする。
完了をクリックして下記の画面と同じ状態になればOKです。
ssl設定(WordPressクイックスタートを選択した人は、飛ばしてOK)
ssl設定の手順は、下記です。
①レンタルサーバーでSSLの設定をする
レンタルサーバーのコントロールパネルにログインしてSSLの設定をしましょう。SSLは共有SSL、独自SSLの2種類があります。今回の設定では独自SSLです。無料のSSLと有料のSSLがありますが、無料版のSSLで問題ありません。
今回は、エックスサーバーを使用している前提で進めます。
サーバーパネルにログインし、「SSL設定」をクリックしてください。
設定するドメインまたはサブドメインを選択し、「変更」をクリックしてください。
ONにするをクリック
SSLの反映までしばらく待ちます。レンタルサーバーによってはSSLが利用できるまで1時間程度かかるものがあります。
反映が完了したらワードプレスのssl設定もしていきます。
②WordPressでSSLの設定をする
WordPressにログインしサイトのアドレスをSSLに切り替えます。
ダッシュボード左手のメニューから「設定」→「一般」を選択。
WordPressアドレス（URL）と、サイトアドレス（URL）をhttp://からhttps://に変更しましょう。
パーマリンクの設定
パーマリンクは、「サイトのURL構造」のことです。SEO 上とても重要ですので早めに設定を完了しましょう。
WordPressにログイン
WordPressダッシュボードにログイン
パーマリンクぺージへ移動
WordPressダッシュボード左手のメニューで、「設定」→「パーマリンク設定」の順で進んでください。
パーマリンクの設定
上部の共通設定の項目から「投稿名」を選択。画面の下にある「変更を保存」をクリックしてください。
一番運用しやすいのは、個人的には、カスタム構造を選択して空白に/%category%/%post_id%/を使用することです。
WordPressプラグインの追加
SEOを強める為に下記の2つは、導入しましょう。
SEO SIMPLE PACK
『SEO SIMPLE PACK』はSWELL開発者さんが作成したプラグインです。
プラグイン>新規プラグインを追加をクリックします。検索画面でSEO SIMPLE PACKで検索します。
SEO SIMPLE PACKの右にある今すぐインストールをクリックします。
有効化をクリックします。
これでシンプルパックの導入まで完了です。
これが完了したらGoogleサーチコンソールで【クロール済み-インデックス未登録】が大量に発生し低品質サイトとならないようにfeed pageの設定をしましょう。
SEO packの特殊ページ設定>feed pageをインデックスさせないをはいにします。
XML Sitemap & Google News
『XML Sitemap & Google News』は検索エンジンにサイトの更新情報を伝えるsitemao.xmlを自動で作成してくれるプラグインです。同じ手順で導入まで済ませてしまいましょう。こちらも必ず有効化まで済ませておきましょう。
ンストールが完了したら「XML Sitemap & Google News」の【設定】をクリックしてください。
サイトマップをGoogleサーチコンソールに設定していきます。
Google search consoleからサイトマップを選択します。設定したいホームページのURLの後にsitemap.xmlと記入して送信します。
完了したら再度ワードプレスのサイトマップ設定画面に戻ると下記のようになっていればOKデス。
Useful Blocks
ブロガーさん向けに、オシャレかつ便利なブロックを集めたプラグイン。こちらは、お好みに合わせて導入してください。
Blocks Animation: CSS Animations for Gutenberg Blocks
アニメーションを取り入れるプラグインで日本語なので非常に使い勝手は、いいです。
EWWW Image Optimizer
画像を圧縮してくれるプラグインなので入れておくことをお勧めします。
サイト全体設定
外観>カスタマイズをクリックします。
サイト全体設定をクリックします。
基本カラーの設定
基本カラーの設定をクリックします。ここでメインカラーなどをお好みで設定してください。
下部固定ボタン・メニュー
下部固定ボタン・メニューは、目次ボタンは、あったほうが見やすいので表示する設定に変更しておきましょう。
ヘッダーのフォント、背景色を指定する方法
ヘッダーの文字の色、ヘッダーの背景色を指定する手順です。「外観」→「カスタマイズ」→「ヘッダー」をクリック。
表示されるメニューのカラー設定から好みの色を指定できます。
ロゴの設定
ヘッダー>ヘッダーロゴの設定から、ロゴ画像をアップロードします。ロゴは、SWELL公式サイトと同じ【1600×360px】で作成してアップロードすることをお勧めします。
ヘッダーの部分で自分好みの設定ができたら公開をクリックすると反映できます。
投稿・固定ページの設定
投稿固定ページをクリックします。
アイキャッチ画像
アイキャッチ画像をクリック。どちらのチェックを外して公開します。投稿記事や固定ページにアイキャッチ画像が表示されるとカッコ悪いので笑
コンテンツのデザイン
コンテンツのデザインは、基本お好みで大丈夫ですがテキストリンクは、わかりやすいようにアンダーラインが付く設定にしましょう。
snsシェアボタン
snsシェアボタンは、投稿ページにあるとカッコ悪いので基本的には、非表示の設定に私は、しています。全てのチェックを外して公開します。
記事下エリア
記事下エリアの著者情報も依頼がなければ非表示にして公開します。
コメントエリアの設定も非表示にします。
トップページの作成
トップページを任意の固定ページに変更する手順を順に解説していきます。まずは、固定ページを一つ作成していきます。
新規ページを作るには、ダッシュボード左手のメニューから「固定ページ」→「新規追加」をクリック。
ページを作成します。タイトルは、わかりやすいようにtopなどとしておきます。その後ページを保存(更新)します。
ページの本文は後ほど入力しましょう。本文として入力した内容がトップページに表示されることになります。もしトップページをサイドバー無しのデザインにしたい場合、編集画面の右手のメニューの「SWELL設定」の中にあるサイドバーを「非表示」にしましょう。
トップページに指定
先ほど作成した固定ページ「top」をトップぺーに指定します。ダッシュボード左手のメニュー「設定」→「表示設定」をクリック。
ホームページの表示で「固定ページ」を選択、ホームページ:で先ほ作成した「top」を指定し、変更を保存。
以上の手順で作成したホームがトップページに表示されます。
メインビジュアルの設定
「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」をクリックすると、設定画面が表示されます。
ブログパーツを作成する。
メインビジュアルで使用するブログパーツを作成します。ブログパーツ＞新規投稿を追加をクリック。
タイトルは、メインビジュアル用にして公開します。
フッターの設定
フッターの添付の部分を作成していきます。
外観＞メニューをクリックします。
新メニューを作成しましょうをクリックします。
メニュー設定下記のフッターをクリックします。フッターにチェックを入れてメニューを保存をクリックします。
フッター下部固定ボタン・メニューの設定
フッター下部固定ボタンを作成します。
カスタマイズをクリック。
サイト全体設定>下部固定ボタン・メニューをクリック、好きな設定にして完了
スマホ専用に固定のフッターを作成したい時には、企業向けに作成する方法も下記で紹介しています。
グーグらぶ
swell スマホ用 フッターボタンをカスタマイズする方法 | グーグらぶ
swellでスマホユーザーにとって最適なスマホ用フッターバナーの作成方法とカスタマイズ方法を、わかりやすく解説します!! フッター用バナーを作成 まず、メール申し込みと…
カテゴリーの設定
記事を投稿する際のジャンルを先に作成しておきましょう。
投稿>カテゴリーから設定します。
タグマネージャーをWordPressに組み込む（SWELLの場合）
タグマネージャーを設定
タグマネージャーにログインします。
「アカウントを作成」というボタンをクリックします。
アカウント名とコンテナ名を入力します。コンテナ名は自社のHPの最初のhttps://は抜いた部分を入力します。ターゲットプラットフォームはWEBにします。そして、作成を押します。すると、利用規約への同意が求められます。それもはいをクリックします。
アカウントを作成すると、以下のようなコードが表示されるので、ひらいたままにしておきましょう。
次は、ワードプレスを開いてタグマネージャーを紐付けしていきます。
外観>カスタマイズ>高度な設定をクリックします。
＜/head＞終了直前 と＜body＞直後という入力欄があるので、そこにタグマネージャーで表示されていたコードを入力します。下記の添付写真を参考にそれぞれの場所に貼り付けて公開してください。
googleアナリティクスを設定(GoogleタグマネージャーとGA4を連携させる)
アナリティクスの設定
WordPress管理画面のサイドメニューから「SEO PACK」→「一般設定」を押します。般設定画面で「Googleアナリティクス」を押します。
Googleアナリティクス設定画面で”Measurement ID” for GA4に「測定ID」をペーストして、「設定を保存する」ボタンを押します。
測定IDはGoogleアナリティクスから取得します。
測定を開始をクリック
アカウント名（会社名）などを入力して次へをクリック
プロパティの詳細も入力して次へをクリック
お店やサービスの詳細も当てはまるものを選択して次へをクリック
ビジネス目標を選択するのは、一番自分が分析の時に必要としている目的に合わせて選択してください。選択したら作成をクリックします。
全てにチェックを入れて同意するをクリックしてください。
webを選択してください。
ウェブサイトのURLとそのサイトの名前をそれぞれ入力してストリームを作成をクリック
測定IDはGoogleアナリティクスの管理画面から確認できます。
管理画面＞プロパティの欄の「データストリーム」>測定したいWEBサイトのストリームを選択。
測定IDとは、G-から始まるコードです。測定IDをコピーして
WordPressの管理画面 SEOpack Measurement ID” for GA4の部分に貼り付けて設定を保存します。
その後アナリティクス(GA4)が正常に読み込みされているかを確認します。
Googleタグマネジャーと連携
Googleタグマネジャーを開きます。
新しいタグを追加ボタンをクリック。
タグの設定をクリック
タグタイプを選択のバー下にある、「Googleアナリティクス：GA4の設定」をクリック。※ユニバーサルアナリティクスは従来のアナリティクスなので、間違わないようにしましょう。
Googleタグマネージャーの測定IDの部分に貼り付けしたらタグを作成をクリック
保存をクリック。タグも追加していく。ここではすべてのページを計測するというようにしたいので、ALLぺーじ、つまりは、すべてのページにおいて閲覧が起きたら、というトリガーを設定します。筆者は「Initialization-ALL Pages」（初期化）を選択しました。
計測ができているかの確認を行う（タグのプレビュー編）
タグマネージャーの設定をしたら、実際にそれが動くのか確認をしましょう。「公開」の横に「プレビュー」があるので、押してください。
プレビューをクリックした後は、ウェブサイトのURL欄に、今回計測したいサイトのURLを入れます。そして、「Connect」を押します。
continueをクリック。tagsの部分赤枠が入っていればOKです。
最後にタグマネージャーの公開を押して完了です✨
サーチコンソールの設定（アナリティクスに紐づける）
サーチコンソールを設定していきます
サーチコンソールで所有者を証明できませんと出てしまった場合は、下記の記事のやり方に従って対処していきましょう。
あわせて読みたい
サーチコンソールで所有者を証明できませんと出た時の対処方法
サーチコンソールで所有者を証明できませんと出た時の対処方法を紹介します。これは、まれになるので覚えておくといいかもしれません笑 焦らず順序通りにやれば必ず修正...
今すぐ開始をクリックしてプロパティを追加をクリックをすると下記の画面が出てきます。
サーチコンソールを入れたいドメインをチェック
google adsの設定
お問合せフォームを作成する。
お問合せのフォームを作成します。
プラグイン＞新規追加でContact Form 7を追加して有効化します。
お問い合せ＞コンタクトフォームをクリック
コンタクトフォーム1をクリック
タイトルをお問合せフォームなどわかりやすい名前に変更。
フォームタブには、下記のコードを貼り付け。
※必要に併せて内容は、変更してください。
<Label> 氏名
[text* your-name autocomplete:name] </label>
<label> メールアドレス
[email* your-email autocomplete:email] </label>
<Label>電話番号
[tel tel-235] </label>
<Label> メッセージ本文（任意）
[textarea your-message] </label>
［submit"送信"］メールタブは、問い合わせがあった時に送信したいアドレスを送信先として
, アドレス
を入力する。
ショートコードをコピーして問い合わせ専用の固定ページに貼り付ける。
他のメール設定のやり方をしたり悩んだときには、下記のサイトも結構わかりやすいかもしれません。参考までに。
メール設定
あわせて読みたい
FTP???եȤ????? | ??륵???С??ʤ饨?å????????С?
??륵???С??֥??å????????С??פΤ????ѥޥ˥奢??ä?????Υ????С?????????Ȥ?FTP??³?????FTP???եȤ????ꤹ?????ơ?FTP?????С?̾?ʤɡˤˤĤ??Ƶ??ܤ??Ƥ??ޤ???
suzunonlog
SMTP設定でフォームからメールを送信する方法【Word Press】
「WordPressでフォームを設置したけど送信したメールが届かない」とお困りの方に、SMTP設定でフォームからメールを送信する方法を紹介します。
デジナビ
Contact Form 7の送信先に複数のメールアドレスを指定する方法（To/Cc/Bcc）
Contact Form 7のコンタクトページから送信されたメールを、複数のアドレスで受信できるようにする方法
サイトマップの登録
サイトマップを登録します。登録するためにプラグインからXML Sitemaps を検索します。
今すぐインストールをして有効化します。設定＞XML-Sitemapをクリックします。
ここまできたらGoogle サーチコンソールにいきます。この時点でサーチコンソールに自分のドメインは、登録がすでに完了している状態にしておきましょう。サーチコンソールでサイトマップをクリックします。
サーチコンソールで所有者を証明できませんと出てしまった場合は、下記の記事のやり方に従って対処していきましょう。
あわせて読みたい
サーチコンソールで所有者を証明できませんと出た時の対処方法
サーチコンソールで所有者を証明できませんと出た時の対処方法を紹介します。これは、まれになるので覚えておくといいかもしれません笑 焦らず順序通りにやれば必ず修正...
自分のドメインに下記のように/sitemap.xml.を追加します。
https://googlab.company/sitemap.xml.うまくいくと下記のように成功のマークが出ます。
これが設定できることによって、記事を投稿するたびに勝手にGoogleに更新情報を通知してくれます。
ホームページの構成を考える
ホームページの構成は、かなり時間がかかるので基本的には、どこかのサイトを真似ていくかチャットGPTに質問しましょう。
下記ようなプロンプトでOKです。
あなたは、SEO専門のエンジニアです。
〇〇のホームページを作成したい。
コーポレートサイトの構成例とサイトマップを作成してください。その後にさらに下記のような質問をしてください。
上記の回答を踏まえてトップページは、どのような構成で書いていけばいいですか。ヘッダーにメニューを作成する。
ヘッダーにメニューを作成していきます。
作りたい固定ページを作成
外観
メニュー
固定ページ
メニューに追加
メニュー構造に追加
この記事が気に入ったら
フォローしてね！