WordPress インターネット ホームページ

【超初心者向け】WordPressで自分のホームページを作ってみよう 第2章 テーマのインストールと記事投稿画面の使い方解説

このシリーズでは、「中学生でも分かる優しさ」をモットーに初心者の方向けに

WordPressを使った自分のホームページを制作する方法を完全解説していきます。

avatar
全章まとめると有料教材並みのクオリティと胸を張って言えます

この記事はこんな人におすすめです

この記事はこんな人におすすめです

・全くの初心者で、WEBエンジニアを目指している
・SEOについて学びたい(後半解説)
・ホームページで稼いてみたいけど、やり方が分からない
・アフィリエイトに興味があるけど、ホームページの作り方が分からない
・自分の体験談や考えを発信するために、ホームページを用意したい

解説環境

  • Windows10 PC
  • お名前.comのレンタルサーバー
  • WordPress バージョン5.6.1

第1章はこちら

第1章では、ホームページの仕組みの簡単な解説と、お名前.comでのドメイン取得からレンタルサーバーへのWordPressインストールを完全解説しています。

こちらのURLからぜひお読みください!

目次

WordPressテーマをインストールする

まずは、お名前.comのレンタルサーバーコントロールパネルに入ります。

ホームから、「WordPress」をクリックします。

お名前.comコントロールパネル画面

前記事で自分が取得したドメインが表示されます。

管理画面「ログイン」をクリックします。

お名前.comコントロールパネルWordPress画面

お名前.comのWordPress設定で作成したユーザー名とパスワードを入力して、ログインします。(第1章参照)

ログインすると、WordPressダッシュボードとご対面です!

WordPressダッシュボード画面

ダッシュボード=管理画面と思ってください。

ここから、様々な操作が行えます。

初めてだと、ダッシュボードが表示されても何をすべきかわからないと思います。

まずは、テーマをインストールしてみましょう。

テーマとは?

WordPressの着せ替えとも言える機能です。

テンプレートファイルとは、WordPressサイトの構成要素です。サイト上のどのWebページを生成するときにも、パズルのピースのように組み合わせることができます

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E5%85%A5%E9%96%80

テーマごとに、ホームページのデザインと機能が変わります。

  • ブロガー向けのテーマ
  • 会社向けのテーマ
  • 医療機関向けのテーマ
  • 飲食店向けのテーマ
  • アフィリエイター(広告収入)向けのテーマ

など様々で、無料のものも有料のものもあり価格はピンキリです。

ちなみに、WordPress初期状態では

  • Twenty Twenty-One
  • Twenty Twenty
  • Twenty Nineteen

の3テーマがインストールされています。

無料テーマ Emanon Freeをインストールしてみよう

Emanonホームページ

Emanonテーマについて

Emanon Freeは、無料テーマです。Emanon Proの購入をご検討されている方向けに、Web集客に必要な機能をコンパクトにまとめたテーマです。Emanon Proの機能を大幅に制限していますが、コンテンツマーケティング用のブログサイトを簡単に作成することができます。

https://wp-emanon.jp/emanon-free-theme/ より

Emanonで解説を進めていく理由

まず、このサイトはEmanon BusinessテーマとEmanon Blockプラグインを使用しています。(両方有料)

Emanonテーマを使用すると、こんなホームページが作れます。

Emanonを使った私のホームページがどれくらい検索・表示されているかは、画像の通り。

検索数推移

※算出期間は2019年11月1日から2020年11月1日

ホームページ開設して、ジワジワとアクセスが伸びていることが分かります。

記事の更新頻度は2週間に1本くらいでした。

少ないですが、ボリュームのある記事の数本がヒットして

この数字の大部分を稼いでくれています。

更新頻度をもっと上げれば、アクセス数はもっと上がっていたと思います。

ホームページ開設時の私はド素人でしたが、それでもアクセス数が伸びたのはEmanonテーマが優秀だからだと思っています。

これが、Emanonで解説を進めてゆく理由です。単純です。

Emanon Freeと、有料のEmanon Business

Emanon Freeは無料で利用できます。

下の画像をクリックすると、Emanonのホームページに移動します。

Emanon Freeは、左の画像です。

右の画像からは、Emanon Businessをダウンロードできます。

有料ですが、Freeと比較すると利用できる機能が非常に多くなります。

「収益化を目指して始めてゆきたい!」

「ビジネス集客を本気で行いたい!」

という方はEmanon Businessテーマで始めてもいいと思います。

Emanon Freeをダウンロードする

Emanon Freeのページの下に移動すると、無料ダウンロードの登録フォームがあります。

ダウンロードURLを受信するメールアドレスを入力し、「送信する」をクリックします。

※利用規約はしっかり読んでください。

Emanonダウンロード部分

「送信する」をクリックすると、「ダウンロードURLを送信しました」というページに移動します。

EmanonダウンロードURL送信完了

先ほど入力したメールアドレス宛に、メールが届くので確認しましょう。

Emanon FreeダウンロードURLのお知らせ

しばらく待っても受信しない場合は、迷惑メールフォルダに入っていないか確認をしましょう。

テーマダウンロードURLは2つあります。

2つともダウンロードします。

URLをクリックするとエクスプローラーが起動するので、任意の場所に保存しましょう。

Emanon Freeダウンロード画面
Emanon Free Childダウンロード画面

今回はデスクトップに保存しました。

Emanonをインストールする

ダッシュボードから「外観」→「テーマ」をクリックします。

自動でテーマのページに移動します。

上部の「新規追加」をクリックします。

「テーマを追加」ページに自動で移動します。

ここから、WordPress上で用意されている様々なテーマを追加可能です。

今回はダウンロードしたEmanonを手動で追加するかたちになります。

上部「テーマのアップロード」をクリックします。

「ファイルを選択」をクリックすると、エクスプローラーが起動します。

まずはemanon-free.1.5.0.zipを選択して、「開く」をクリックします。

テーマのインストールが開始します。

私の環境では、5秒ほどでインストールが完了しました。

インストール完了したら、「有効化」をクリックします。

これで、Emanon Freeテーマがインストールされました!

お疲れ様でした!

サイトの基礎を作る

テーマのインストールが完了し、いよいよ記事投稿・・・

といきたいところですが、まだやるべきことがあります。

ホームページのHTTPS(SSL)化

安全な鍵のアイコン

これは非常に重要。

現時点のホームページ、「http」であることにお気づきでしょうか?

これを「https」にすることをSSL化と呼びます。

SSL化は必須の作業ですので、早い段階で必ず行いましょう。

HTTPSとは?

Wikipediaより一部引用します。

HTTPS(Hypertext Transfer Protocol Secure)は、HTTPによる通信をより安全に(セキュアに)行うためのプロトコルおよびURIスキームである。

https://ja.wikipedia.org/wiki/HTTPS より引用

HTTPSにするメリット

通信が暗号化されるため、改竄、盗聴などの攻撃を防ぐことができる。

通信の最適化も改竄の一種であるので、同様に防げる。

HTTP/2対応でブラウザ表示が高速化される。

SEOに有利になる。

https://ja.wikipedia.org/wiki/HTTPS より引用

httpsだと、訪問者とサーバーのデータ通信が暗号化されます。

情報を外部から読み取られるリスクが減るため、セキュリティが向上します。

2021年現在、WEBサイトのHTTPS化は必須の作業です。

Google Chromeでは「保護されていない通信」という警告が表示されてしまいます。

https非対応によるChromeの警告メッセージ

iPad・iPhoneでは、「安全ではありません」という表示が出てしまいます。

https非対応によるiPadOSの警告メッセージ

これでは、訪問者からのイメージもよくありません。

お名前.comのレンタルサーバーでは、HTTPS化に必要となるSSL証明書を無料で発行できます。

無料なので、ぜひ活用しましょう。

無料SSL証明書を発行する

お名前.comのレンタルサーバーのコントロールパネルに入り、「セキュリティ」に移動します。

お名前.com コントロールパネル画面

「SSL証明書」をクリックします。

お名前.com セキュリティ設定画面

SSL証明書の申し込み画面が表示されます。

「申し込む」をクリックします。

お名前.com SSL証明書申し込み画面

SSL証明書の種類を選択する画面が表示されます。

一番左の「無料SSL」を選択し、「確認する」をクリックします。

お名前.com SSL証明書種類選択画面

申し込み内容確認の画面が表示されます。

問題なければ、「完了する」をクリックします。

お名前.com SSL証明書 申し込み確認画面

これでSSL証明書の発行申し込みは完了です!

「一覧に戻る」をクリックします。

お名前.com SSL証明書申し込み完了画面

レンタルサーバーコントロールパネルからSSL証明書のステータスをみると、「設定中」になっていることが確認できます。

お名前.com SSL契約ステータス画面

証明書発行には少し時間がかかります。

私の場合は30分ほどでした。

発行完了すると「無料SSL設定完了」が含まれた件名のメールが届きます。

お名前.com 無料SSL設定完了

SSLを有効にする

お名前.comのレンタルサーバーコントロールパネルにログインし、WordPress一覧から対象ドメインのSSLを「有効にする」をクリックします。

お名前.com WordPressコントロール画面

SSL有効化の確認画面が出てきます。

注意事項に同意し、「有効にする」をクリックします。

お名前.com SSL有効化確認画面
お名前.com SSL有効化完了画面

有効化が完了したら、管理画面にログインしてみましょう。

WordPressログイン画面

ChromeでURLの鍵のマークをみると、「この接続は保護されています」という表示に変化したことがわかります。

Chrome 接続は保護されていますの表示

これで、サイトのHTTPS化は完了です!

通信が安全なホームページになりました!

次回は、いよいよ記事の投稿の仕方を解説します!

次の記事はこちら



人気記事

1

Apple Siliconへの各社アプリ対応状況まとめです。2021年6月現在、徐々にネイティブ対応完了のアプリが増えてきました。随時更新です。

2

Apple Watchって何ができるの?初代から5年間使用している私が、Apple Watchの機能と魅力をゆっくり解説してゆきます。

3

自分でWindows7からWindows10にアップグレードする方法を、徹底解説します!
2021年1月現在、今でもMedia Creation Toolを使えばWindows10への無料アップグレードは可能です!

4

長い間パソコンを使っていると発生しがちなWindowsの不具合を解消するための、4つの対処法を解説します。
セーフモード起動やDISM.exe、SFCスキャンを使用してメンテナンスをしてあげましょう。

-WordPress, インターネット, ホームページ
-, , ,

© 2021 サムライ コンピューター