【ワードプレスの始め方】初心者でもホームページを作るのは難しくない!(ロリポップ編)

プログラミング教育

いちばん簡単なワードプレスの始め方をご紹介します。ワードプレスのダウンロードの仕方や初期設定は難しくありませんよ!SEO最適化済み・高速無料ワードプレステーマの「Luxeritas(ルクセリタス)」も合わせてご紹介します。

ホームページ制作会社の選び方

「ワードプレスの始め方」とタイトルを打っているのに、いきなり「ホームページ制作会社の選び方」のお話になるのは理由があります。ホームページ作成をホームページ制作会社さんに依頼すれば、キレイなホームページが作れます。しかし、キレイなホームページだからアクセスがアップするわけではありません。

大切なのは、ホームページの運営の仕方です。ホームページ制作を業者さんに依頼するなら、業者さんが作成したホームページが実際に集客に成功しているか確認して下さい。

私の知り合いで、「1年後に3万PV/月を保証する」と言われてホームページ制作を依頼した方がいます。現在進行形で運営中ですが、とても1年後に3万PV/月を集める記事のクオリティではありません。ホームページは個人でも作れるのに、お金がもったいない!と思った経験が、この記事を執筆する原動力になりました。

パソコンの画像

サーバーを選ぼう

初心者におすすめのサーバーは、ロリポップです。よく比較されるのが、ロリポップの「スタンダートプラン」とエックスサーバーの「X10」です。さっくり比較すると、1カ月のサーバー代はエックスサーバーはロリポップの倍額になります。ロリポップからエックスサーバーへ引っ越しするのは簡単なので、初心者はホームページの運営が軌道に乗るまではロリポップでの運営をおすすめします。

独自ドメインを取得してネームサーバーを設定しよう

サーバーがロリポップなら、独自ドメインはムームードメインから取得すると紐づけが簡単です。ムームードメインを経由してロリポップを契約すれば、初期費用が500円割引になります。※期間限定:2019年7月22日(月)0:00~2019年12月31日(火)23:59

ネームサーバー(DNS)は、「ドメイン」と「サーバー」の紐づけに使用されます。ムームードメインのネームサーバーは、「ムームーDSN」になります。

独自ドメインを取得したら、ムームードメインのコントロールパネルにログインして「ムームーDSN」のセットアップをします。画面左上の「ドメイン管理」にある「ドメイン操作」をクリックすると、プルダウンメニューが開きます。「ムームーDSN」をクリックして、ムームーDNSのセットアップ情報を変更します。

ネームサーバー設定の画像

セットアップを行うドメインの「利用する」をクリックすると、ムームーDNSを利用する設定になります。※画像ではムームーDSN設定後なので、「変更」となっています。

ムームーDNS設定変更画面が開くので、独自ドメインで表示させたいサービスにチェックを入れましょう。

ネームサーバー設定の画像2

ドメインの項目にある、「ホームページ」と「メール」の項目の右隣りにある「サービス」の項目を、両方とも「ロリポップ」にチェックを入れました。「セットアップ情報変更」をクリックすると、確認画面が表示されます。「セットアップ情報変更」をクリックすれば、セットアップ完了です!ネームサーバー変更が完了するまで、2~3日かかる場合があります。

次に、ロリポップのユーザー専用ページへログインして独自ドメイン設定の画面を開きます。設定する独自ドメイン(ムームードメインで取得した独自ドメイン)を入力して、公開(アップロード)フォルダ名を入力したら「独自ドメインをチェックする」をクリックしましょう。

最終確認の表示がでます。独自ドメインと公開(アップロード)フォルダに間違いが無ければ、「設定」をクリックしましょう。次に、ネームサーバーの認証を行います。

  • ムームーID
  • ムームーパスワード

を入力したら、「ネームサーバーの認証」をクリックします。

ワードプレスをインストールしよう

ロリポップのユーザー専用ページへログインしてWordPress簡単インストールの画面を開きます。

【サイトURL】

プルダウンメニューをクリックして、Wordpressをインストールする独自ドメインを選択します。隣に「入力は任意です」という項目がありますが、ここには何も入力しないで下さい。(サイトURLが無駄に長くなってしまいます。)

【利用データベース】

「新規自動生成」で大丈夫です。ランダムにデータベース名が作成されます。

【サイトのタイトル】

サイト名を入力します。まだサイト名が決まっていない場合は、仮の名前でも大丈夫です。

【ユーザー名】

ここで設定したユーザー名は、Wordpressで使用されます。

【パスワード】

推測されにくい、8桁以上のランダムな英数字を入力して下さい。

【パスワード(確認)】

確認のため、もう1度パスワードを入力します。

【メールアドレス】

「Wordpressにログインがありました」などの連絡を受信するメールアドレスを入力します。

【プライバシー】

チェックした状態にします。

wordpress簡単インストールの画像

入力が完了したら、「入力確認」をクリックします。確認事項に間違いが無ければ、画面下の「承諾する」にチェックを入れて「インストール」をクリックするとインストールを開始します。

インストールが完了すると、

  • サイトURL
  • 管理者ページURL
  • 利用データベース

が表示されますので、ブラウザに「管理者ページURL」を入力してWordpressのダッシュページが表示されるかどうか確認して下さい。もし表示されたら、Wordpressは正常にインストールされています。

サイトを独自SSL化しよう

WordPressをインストールした当初は、サイトアドレスが

http://~

になっています。

こちらを独自SSL化して、

https://~

へ変更します。

ロリポップのユーザー専用ページへログインして、独自SSL証明書お申込み・設定の画面を開きます。

ロリポップの独自SSL(無料)設定マニュルこちら

ワードプレスの初期設定をしよう

一般設定

WordPressのダッシュボードへログインしましょう。

  1. 設定
  2. 一般設定

とクリックします。

【サイトのタイトル】

サイト名を入力します。

【キャッチフレーズ】

入力不要です。

【Wordpressアドレス(URL)】

独自SSL化した独自ドメイン(https://~で始まるURL)を入力します。

【サイトアドレス(URL)】

WordPressアドレス(URL)と同じURLを入力します。

【メールアドレス】

コメントがあったときなどに通知してくれるアドレスになります。

画面を下にスクロールして、「変更を保存」をクリックします。

ディスカッション設定

  1. 設定
  2. ディスカッション

とクリックします。ディスカッション設定では、コメントに対するアクションの設定ができます。コメントを受け付けないときは、以下の設定でs大丈夫です。コメントを受け付けるときは、赤で囲っている項目を変更して下さい。

ディスカッション設定の画像

画面を下にスクロールして、「変更を保存」をクリックします。

メディア設定

  1. 設定
  2. メディア

とクリックします。サムネイルが自動生成されてしまうと、データベースの容量を食ってサイトが重くなりやすいので、全ての数値を「0」に変更しましょう。数値を「0」とすることで、無駄な画像が生成されなくなります。

メディア設定の画像

画面を下にスクロールして、「変更を保存」をクリックします。

パーマリンク設定

  1. 設定
  2. パーマリンク設定

とクリックします。Wordpressデフォルトのパーマリンク設定だと、

https://xn--r9j1d0b6i8jx814a8sl.com/?p=123

となっています。これを、以下のように「投稿名」へ変更することで

https://xn--r9j1d0b6i8jx814a8sl.com/sample-post/

と、URLに意味がある単語が挿入されます。SEO的にみて、後者のほうが好ましいとSearch Consoleヘルプで紹介されています。

パーマリンク設定の画像

画面を下にスクロールして、「変更を保存」をクリックします。

ワードプレステーマ「Luxeritas」をインストールしよう

ダウンロードアルファベットの画像

「Luxeritas」公式サイトのダウンロードページで、

  • 本体
  • 子テーマ

をそれぞれPCにダウンロードします。(zipフォルダーのままでOKです!解凍はしません。)

ワードプレスのダッシュボード>外観>テーマ

をクリックして、画面左上にある

  1. 新規追加
  2. テーマのアップロード

の順にクリックして「本体」のzipフォルダーをアップロードします。同様に、「子テーマ」のzipフォルダーもアップロードしましょう。子テーマの方を「有効化」にします。

ワードプレステーマインストールの画像

これで、ワードプレステーマのインストールが完了しました!あとは外観を変更したり、各種設定をしていきます。

Luxeritas公式サイトの設定マニュアルこちら

ワードプレステーマに「Luxeritas」をすすめする理由

電球のイラストの画像

ページ表示速度が速い

ユーザーがホームページへアクセスして、サイトが表示されるまでの速さが遅いとSEO的に不利になります。サイトの表示速度をで計測できる「Google PageSpeed Insights」は、ページのURLを入力して「分析」をクリックするだけでページ表示スコアと改善のアドバイスをしてくれる無料ツールです。

数か月前に、私がこちらのツールでサイトの表示速度を測定したときは、「70点」でした。提案アドバイスがズラリと表示されましたが、ネットでググっても専門的なことだらけで何をどうしたら良いのか分からず途方に暮れました。そんなとき、藁をもすがる気持ちでワードプレステーマを「luxeritas」へ変更してみました。すると、今まで悩んでいたのがウソのようにページ速度が改善されたんです!

Google PageSpeed Insightsの画像

なんとサイトの表示速度「70点」だったのがワードプレステーマを「Luxeritas」へ変更しただけで「96点」まで改善されました!もっと早くワードプレスのテーマを変更すれば良かったです。しかし、こちたの結果はデフォルトの設定。まだまだサイトの表示速度を早くする「奥の手」もあるんですよ!

ワードプレステーマ「Luxeritas」でさらにサイトの表示を早くする方法こちら

レスポンシブに対応している

1つのHTMLでスマホやタブレットなど、さまざまなデバイス用に表示を最適化してくれるのが「レスポンシブデザイン」です。「Luxeritas」は、レスポンシブデザインに対応しているのはもちろん、レスポンシブデザインのデザインファイルが配布されています。自分の好みに合わせて、スマホ用の表示を選べるのは嬉しいですね。

プラグインなしでAMPに対応できる

Googleが推進しているAMPプロジェクト(モバイルページの表示高速化)に対応する方法の一つに、プラグインを利用してホームページをAMP化する方法があります。

しかし、「Luxeritas」では

ワードプレスのダッシュボード>Luxeritas>カアスタマイズ>AMP

をクリックして、「AMP有効化」にチェックを入れるだけでAMP化することができます。

PWAに対応している

AMPと比べるとまだ導入しているWebサイトが少ないPWAですが、「Luxeritas」はPWAに対応しています。

PWAはアプリとWebサイトの中間のようなもので、Webサイトのアイコンをアプリと同様にスマホのホーム画面に表示することができるようになります。インストール不要なのに、アプリのようにプッシュ通知をすることも可能です。プリキャッシュ機能があるので、サイトがサクサク表示されるのが特徴です。

「Luxeritas」では

ワードプレスのダッシュボード>Luxeritas>カスタマイズ>PWA

をクリックして、「PWA有効化」にチェックを入れるだけでPWA化することができます。※SSL化が必須条件です。

プラグインなしで「旧エディタ」が使える

ワードプレス5.0のブロック型エディター「Gutenberg(グーテンベルグ)」が使いにくい!という人は、プラグイン「Classic Editor(クラシックエディター)」を利用している人も多いと思います。

でも、「Luxeritas」なら

ワードプレスのダッシュボード>Luxeritas>管理機能>

をクリックして、「ブロックエディタ無効化」にチェックを入れることで旧エディタが使えるようになります。

プラグインなしで「ブログカード」が使える

カード式でリンクを表示できる「ブログカード」は、

  • 記事タイトル
  • アイキャッチ画像
  • 概要

が表示されるので、通常のリンクよりも注目されます。

通常は、プラグインもしくはHTMLコードの入力が必要なブログカードも、「Luxeritas」なら編集画面からボタン1つで挿入できます。

おすすめのプラグイン

プラグインは、Wordpressのテーマに含まれていない機能を追加するツールです。しかし、以下のようなデメリットがあります。

  • WordPressの動作が重くなる(表示速度に影響あり)
  • プラグイン同士で機能が競合する場合がある(同じような機能のプラグインをインストールした場合)
  • プラグインがそれぞれのタイミングでアップデートするため、プラグインの数だけ更新する作業が発生する。また、アップデートにより今まで正常に動いていたWordpressに不具合が起こることもある。

これらの不具合を避けるためにも、プラグインのインスト-ルは必要最小限にしておいたほうが良いです。

ボードにプラグインと書かれた画像

「Luxeritas」では、SEO対策に必須とされているプラグイン「 All in One SEO Pack」をインストールする必要はありません。「 All in One SEO Pack」を入れなくても、「Luxeritas」がすべてカバーしてくれます。そこで、「Luxeritas」ユーザーにおすすめのプラグインをご紹介します。

  • Google XML Sitemaps(XMLサイトマップを自動的に更新するプラグイン)
  • Contact Form 7(お問合せフォームを設置するプラグイン)
  • SiteGuard WP Plugin(ロリポップで推奨しているセキュリティプラグイン)
  • EWWW Image Optimizer(画像を圧縮してサイトを軽くしてくれるプラグイン)
  • UpdraftPlus – Backup/Restore(バックアップ・復元してくれるプラグイン)
  • wordpress popular post(人気記事を計測して表示してくれるプラグイン)

トラッキングコードをサイトに埋め込もう

アクセスのアルファベットの画像

最後に、アクセス解析をするためにGoogleアナリティクスのトラッキングコードをサイトに埋め込みましょう。Googleアナリティクスへアクセスして、

管理>トラッキング情報>トラッキングコード

の順にクリックします。トラッキングコードをコピーしましょう。

トラッキングコードの画像

ワードプレスのダッシュボード>Luxeritas>子テーマの編集>アクセス解析(head)

の順にクリックします。「Google Alalytics等、アクセス解析のJavascriptは、?>以降に書いて下さい。」のメッセージの少し後ろにある「?>」の下にトラッキングコードを貼り付けて「保存」をクリックしましょう。

トラッキングコード設置の画像

これで、トラッキングコードが設置されました。

まとめ

「Luxeritas」は、デフォルトのままでもサイトの表示速度がグンと上がるワードプレステーマです。サイトを運営していく中で、サイトが重いと感じたときにもっと早くなる手段が温存されているのもありがたいですよね。

ワードプレスは、初心者さんでも簡単にホームページが作れる魔法のツールです。ロリポップの「簡単インストール」を使えば、初心者でも簡単にワードプレスが始められますよ。