【ここだけ見れば作れちゃう！】初心者向けホームページの作り方まとめ
今回は、これからワードプレスを初めて触る初心者の方向けに、管理画面を中心としたWordPressの使い方について説明していきます。
■2分でわかるWordPressでホームページ作成動画
※2017年10月11日時点での手順になります。
【メルマガ登録はこちら！！】
ワードプレスの便利な使い方情報をGET
WordPressとは 基本的使い方と管理操作
WordPressとは
はじめに、ワードプレスの仕組みについて簡単に説明します。
もともとWordPress(ワードプレス)は、2003年にブログを作成するシステムとして登場しました。その後、徐々に進化・発展していき、今ではブログ以外にも企業のホームページ・ウェブサイトとして多く利用されています。
そして、現在ではホームページ作成するためのシステム(CMS)のなかでは世界・日本共にNo1の非常に有名なシステムとなりました。
2016年時点 世界のワードプレスシェア
2015年時点 日本のワードプレスシェア
その特徴として、豊富なテーマ（デザインテンプレート）やプラグイン（スマホのアプリのようなもの）があり、オリジナルのデザインで会員サイトやネットショップなどを作ることも可能です。
WordPress テーマ 追加画面
ワードプレス プラグイン追加画面
また、ワードプレス自体は無料で誰でも利用でき商用利用も可能ですので、勉強すればだれでもワードプレスでホームページを作ることができます。
以下はワードプレスの構成、いわゆるシステムの実体です。
通常のホームページの場合は、HTMLファイルや画像ファイルなどのファイル類で構成されますが、
ワードプレスはこれらのフォルダ・ファイル類に加えて、MySQLと言われるデータベース（データの蓄積される場所）を利用しています。
実はブログ情報(文章)などもデータベースに蓄積されていて、このデーターベースとHTML・CSS・PHPなどのファイル類と連携して、ワードプレスのシステムを提供しています。
WordPressへのログイン
WordPressを管理・設定するためには、まずWordPressへログインしなければなりません。
下記のURLでアクセスするとログイン画面が表示されます。
http://WordPressをインストールしたドメイン/wp-admin/
管理用のユーザーIDとパスワードを入力します。
WordPress ログイン画面
管理者でログイン成功すれば、管理画面が表示されます。
WordPress ダッシュボード(管理画面)
WordPressの管理画面
ここでは、WordPressの管理画面でよく使う下記の項目を中心に説明していきます。
WordPress 管理画面 (ダッシュボード)
| 項目 | 内容 |
|---|---|
| 投稿 | ブログとして利用できる機能です。時系列で最新情報が一番上に表示されていきます。お知らせ情報やブログなど投稿機能を利用するのが一般的です。 |
| 固定ページ | 会社情報やお問い合わせページなど決まった場所の決まった箇所に表示しておきたいページを固定ページで作成します。ページ作成の機能自体は投稿とほぼ同じです。 |
| 外観 | その名の通り、サイトの外観(デザイン)系の設定を外観から設定します。テンプレートやメニューバーなどもここで設定できます。 |
| プラグイン | スマートフォンでいうアプリの追加機能です。お問い合わせ機能やサイトマップなどWordPress自体が持っていない機能をプラグインという形で追加することができます。 |
| 設定 | サイト名やURLの構造設定、トップページの設定などの各設定ができます。 |
それでは、順番に説明していきます。
WordPress 投稿の使い方
「投稿」はブログとして利用できる機能です。お知らせ情報やブログに書くような内容を書くのが一般的です。
また、ブログ一覧(初期状態だとトップページ)ページでは時系列で最新の投稿一覧が表示されています。
投稿一覧ページでは書いたブログが時系列順で一覧で表示されます
投稿を追加するには、管理画面から投稿>投稿一覧を選択します。投稿一覧が表示されますので新規登録ボタンを押下します。
WordPress 投稿機能
投稿画面が表示されます。タイトルと記事の内容を記述していきます。
投稿のビジュアルエディタとテキストエディタ
投稿画面では、HTMLなどのコードを知らなくてもビジュアル的に記事を編集・表示してくれるビジュアルエディタとHTMLで細かい書き方ができるテキストエディタがあります。
下記はビジュアルエディタです。HTML文を知らなくても視覚的に記事を作成することができます。書きやすいので、はじめはこちらのビジュアルエディタを利用して文章を書くと良いと思います。
WordPress ビジュアルエディタ
下記はテキストエディタです。HTML文で記述することができます。インラインでCSSも記述できるので、より細かい表現をすることができるようになります。
WordPress テキストエディタ
投稿で画像・動画を追加する
画像や動画を追加する場合は投稿画面で「メディアを追加」を押下します。
WordPress 投稿画面
ファイルアップロードで追加したいファイルをアップロードします。
WordPress ファイルアップロード
追加したファイルを選択して「投稿に挿入」ボタンを押下します。
WordPress ファイル選択
投稿画面に画像が追加されたことを確認します。
WordPress 投稿画面 画像追加
投稿でアイキャッチを追加する
ブログには「アイキャッチ」という、いわゆるサムネイル表示機能があります。アイキャッチを設定していると、記事の一覧表示で下記のようにサムネイルが表示されます。
ブログ一覧で表示されるアイキャッチ(サムネイル)
アイキャッチは投稿画面右下の「アイキャッチ画像を設定」から設定することができます。
前述に説明した画像の追加と同じように、画像ファイルを指定してアイキャッチ画像を設定します。
アイキャッチ画像を追加
ブログ一覧ページで設定したアイキャッチの画像が表示されていれば完了です。
ブログ一覧で表示されるアイキャッチ(サムネイル)
投稿でカテゴリー・タグを追加する
記事にはカテゴリーやタグを追加することができます。
カテゴリーやタグを追加することで、何のテーマかわかりやすくなったり、カテゴリー・タグ一覧の記事を閲覧できるようになります。
カテゴリーとタグの表示
投稿画面の右下にあるカテゴリーと追加・選択することができます。初期状態は「未分類」というカテゴリーにチェックが付いています。
カテゴリーの追加
追加したカテゴリーにチェックを入れます。
カテゴリーの選択
また、カテゴリーのすぐ下にタグを設定する箇所がありタグの追加ができます。
タグの追加
投稿のカテゴリー・タグから新規追加したり、作成したカテゴリ・タグの編集することも可能です。
投稿＞タグのページ
投稿＞カテゴリーのページ
投稿で記事のURLを変更する
記事のURLは下記の編集ボタンより変更することができます。
初期状態は、記事のタイトルがURLに設定されています。このままではタイトルを変更するたびにURLも変わってしまうため、英語表記に変更することをオススメしています。
パーマリンクを投稿名に設定。初期はタイトル名がURLに設定される
意味をそのままで英語表記に変更する
パーマリンク(URL構造)の共通設定は下記をご参照ください。
6-3. パーマリンク設定方法
投稿で記事を公開する
記事を下書きしたり、プレビューで確認の上、記事が完成したら公開ボタンを押下します。
WordPress 投稿機能
プレビュー画面
WordPress プレビュー画面
公開範囲を設定することもできます。公開状態の項目で編集ボタンを押下します。
記事にパスワードをつけることができます。パスワードを知っている人だけが記事を閲覧できるようになります。
WordPress 固定ページの使い方
つぎに固定ページについて説明します。固定ページは投稿とほぼ同じ機能になりますが、通常ナビゲーションバー(メニューバー)にあるような会社情報やお問い合わせページは固定ページで作成します。
下記は固定ページをメニューバーに設定した時のサンプルです。
固定ページを押下すると固定ページの一覧が表示されます。追加する場合は「新規追加」を押下します。
WordPress 固定ページ一覧
固定ページ画面が表示されますので、投稿と同じ要領で記事を作成できます。
WordPress 固定ページ
投稿にあるような「カテゴリー」といった機能はなく、投稿にように記事一覧にも表示されません。
(※)ページ作成の機能自体は投稿とほぼ同じですのでここでは割愛します。
外観の使い方
外観では、その名の通り、サイトの外観(デザイン)系の設定を設定します。テンプレート(テーマ)やメニューバーの設定も外観からできます。
WordPress 外観
ここでは、「テーマ」・「メニュー」・「ウィジェット」の3つについて説明していきます。
外観＞テーマの設定方法
WordPressでは、テーマというデザインのテンプレートを利用します。
テーマは自作することもできますが、無料・有料含めて様々なテーマがリリースされていて、それらを利用することができます。
初期状態はサボテンの「TwentySeventeen」というテーマです(2017年10月時点)。
WordPressではそれらの既成テーマを使えば自作しなくても綺麗なデザインのホームページを作ることができます。ここでは、WordPressの公式テーマ(※)を設定する方法を説明していきます。
(※)公式テーマはWordPressがそのテーマが一定の基準をクリアしたものと認めたもので、WordPressの管理画面から検索してダウンロードすることができます。
WordPressの管理画面上の外観＞テーマを選択します。
新規追加ボタンを押下します。
検索窓で探しているテーマを入力します。ここでは有名なテーマである「Lightning」を使います。
「Lightning」と入力して表示された下記のテーマをインストールします。
有効化します。
以上でテーマの適用は完了です。
トップページを参照するとテーマが適用されて、見た目がガラリと変わっていることがわかります。
補足 サイトからテーマをダウンロードして設定する方法
公式テーマ以外にも無料・有料含めたくさんの魅力的なテーマがリリースされています(※)。
(※)グローバル対応や審査時間・プロセスなど問題で、有名なテーマでも公式テーマとして登録されていないものもたくさんあります。審査を経ていないため高品質なものから低品質なものまでいろいろもありますので、気になる方は適用前にテーマ名で検索してそのテーマの評判を確認してみると良いでしょう。
公式以外のテーマは前述のように検索しても出て来ないので、テーマを販売サイトからダウンロードして適用する必要があります。
ここでは、テーマをzip形式でダウンロードして適用する方法を紹介します。
ここで紹介するサイトは「テンプレートキング」です。テンプレートキングとはWordPressなどのデザインテンプレート(テーマ)や画像素材を無料で利用出来るサイトです。
テンプレートキングにアクセスしてトップページで「テンプレート一覧」を押下します。
テンプレートキング
WordPress テンプレートキング トップページ
たくさんのテンプレートが表示されます。好きなテーマを選択してダウンロードを進めていってください。
WordPress テンプレートキング テンプレートの選択
ダウンロードしたzipファイルを任意の場所に保存しておきます（解凍はしないでください）
テンプレートキング zipファイル
次にWordPress側でダウンロードしたzipファイルを適用します。外観＞テーマから新規追加ボタンを押下します。
テーマのアップロードボタンを押下します。
WordPress テーマのアップロード
ファイルを選択ボタンを押下します。
WordPress テーマのアップロード
先ほどの手順でダウンロードしたzipファイルを選択します。
テンプレートキング zipファイル
今すぐインストールボタンを押下します。
WordPress テーマのインストール
インストール完了後回画面に遷移しますので、有効化ボタンを押下します。
WordPress テーマの有効化
サイトを表示ボタンを押下します。(http://wordpressをインストールしたURLでもアクセスできます)
WordPress テンプレートキング サイト表示
ダウンロードしたテーマが適用されていれば完了です。
WordPress テンプレートキング テーマ適用後
外観＞メニューバーの設定方法
ここでは、下記のようにナビゲーションバー(メニューバー)を作成する手順を説明していきます。(※)メニューバーの位置や見え方はテーマによって異なります。
WordPress メニューが反映されていることを確認
(※)事前準備として、下記のように固定ページでいくつか記事を作成しておいてください。
WordPress 固定ページ一覧 サンプル
それでは、メニューバーの設定方法を説明していきます。外観＞メニューの設定を選択します。
WordPress 外観＞メニュー
まずメニューを作成します。ここでは、「Menu1」と入力してメニューを作成ボタンを押下します。
メニュー「Menu1」を作成
Menu 1が作成されました。このままメニューを保存ボタンを押下して、作ったメニューを保存します。
メニュー「Menu1」を保存
次に作ったメニューに対して、項目を追加していきます。
左側にあるリストから追加したい項目を選択します。ここでは事前に作った固定ページの項目をチェックして、メニューに追加します。
メニューとなる項目を選択
追加したメニューは、ドラッグ&ドロップでメニューの順番を変えたり、各メニューの表示名を変更したり、追加・削除することができます。
ドラッグ＆ドロップでメニュー項目の順番を変更
メニュー項目の表示名は▼を押して変更できます。
メニュー項目(▼)で編集できる
WordPress 外観>メニューの設定 リネーム
同様に▼（▲）を押して削除リンクから削除することもできます。
WordPress 外観>メニューの設定 削除
設定が完了したら、最後にメニューの位置にある「Header Navigation（※テーマにより名称が異なります）」にチェックを入れて保存ボタンを押下します。
メニューの位置の設定
メニューバー設定完了後にトップページを確認します。設定した通りに表示されていればOKです。
WordPress メニューが反映されていることを確認
■メニューバーの設定方法(動画版)
外観＞ウィジェットの設定方法
WordPressでは、ウィジェットというページの特定部分の表示をカスタマイズできる機能があります。
サイドバーやフッターなどの部分でウィジェットでバナーを追加したり、投稿一覧を表示したりなど設定することができます。
ウィジェットは外観＞ウィジェットから設定します。
左側の追加したいウィジェットタイプを選択してドラッグ＆ドロップで任意の箇所にウィジェットを追加します。
下記はテキストタイプのウィジェットです。設定後に保存して完了です。
トップページで、サイドバーにテキストウィジェットが追加されたことを確認して完了です。
プラグインの使い方
プラグインは、スマートフォンでいうアプリ機能に相当します。
プラグインでは、お問い合わせ機能やサイトマップなどWordPress自体が持っていない機能をプラグインという形で追加することができます。
プラグインを選択すると現在インストールされているプラグインの一覧が表示されます。新しくプラグインを追加する場合は、「新規追加」を押下します。
WordPress プラグイン
追加画面が表示されますので、追加したいプラグイン名などで検索してプラグインを追加することができます。
WordPress プラグイン 追加
知っておきたい有名＆おすすめ WordPress プラグイン 一覧
設定の使い方
設定では、サイト名やパーマリンク(URLの構造)、トップページ設定などの各種設定ができます。
WordPress 設定
一般設定
一般設定では、サイト名やキャッチフレーズ、メールアドレスなどを設定できます。
WordPress 設定 一般設定
なお、上記のWordPressアドレス(URL)、サイトアドレス(URL)は誤った設定をするとログインでできなくなる場合もあるため、設定変更の際はご注意ください。
表示設定
表示設定では、トップページ(フロントページの)の表示や投稿一覧の表示件数などを設定できます。
WordPress 設定 表示設定
フロントページ・投稿(ブログ)ページを設定する
トップページではデフォルトの状態は、最新の投稿記事が表示されている状態です。
ここでは、表示設定からフロントページやブログ一覧のページを設定する方法を紹介します。
設定＞表示設定で、フロントページの表示でトップページ用の固定ページ(ここでは事前に作成した「HOME」)を設定します。
同様に、投稿に事前に作成した「BLOG」という固定ページを設定します。
WordPress 設定＞表示設定 フロントページの設定
サイトのトップ(http://WordPressをインストールしたドメイン/)を表示した際に設定した固定ページが表示されていれば完了です。
また、BLOGページにブログ一覧が表示されていれば完了です。
パーマリンク設定
パーマリンク設定では、投稿ページのURLなどが設定できます。
パーマリンクとは、WordPressで作成した投稿(ブログ)のURL形式のことです。下記のようにワードプレスは複数のURL構造から自分の好きな方式を選択できます。
管理する上では上記の基本の「?p=123」などの自動連番が楽ですが、ユーザーや検索エンジン視点で考えると意味のない英数字の羅列よりも意味のある表記の方が理解しやすく推奨されています。
また、上記の日付と投稿名「/2017/10/06/sample-post/」などの日付がURLに入れる方式は、古い記事を最新情報に更新した時にURLだけ古い日付で古い情報のイメージを与えるため本サイトでは採用せずに、
「http://ドメイン名/投稿名」にして投稿名を英語に修正しておりオススメの設定です。
パーマリンクを投稿名に設定。初期はタイトル名がURLに設定される
意味をそのままで英語表記に変更する
なお、複数の投稿でURLが重複した場合は、連番で-2などが自動で末尾に加えられるので重複の心配はありません。
testというURL
もう一つtestというURLを設定すると自動的に「test-2」と連番が付与される
共通設定は、ダッシュボード（管理画面）にて、設定＞パーマリンク設定を選択します。
設定＞パーマリンク設定
ここでは、共通設定で投稿名を選択して保存します。
パーマリンクの設定 URL構造の設定
以上でパーマリンクの共通設定は完了です。
まとめ
今回は、WordPress 使い方 を理解するために、基本操作画面と以下のよく使う各項目の意味を説明しました。
| 項目 | 内容 |
|---|---|
| 投稿 | ブログとして利用できる機能です。時系列で最新情報が一番上に表示されていきます。お知らせ情報やブログなど投稿機能を利用するのが一般的です。 |
| 固定ページ | 会社情報やお問い合わせページなど決まった場所の決まった箇所に表示しておきたいページを固定ページで作成します。ページ作成の機能自体は投稿とほぼ同じです。 |
| 外観 | その名の通り、サイトの外観(デザイン)系の設定を外観から設定します。テンプレートやメニューバーなどもここで設定できます。 |
| プラグイン | お問い合わせ機能やサイトマップなどWordPress自体が持っていない機能をプラグインという形で追加することができます。 |
| 設定 | サイト名やURLの構造設定、トップページの設定などの各設定ができます。 |
自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。
【ここだけ見れば作れちゃう！】初心者向けホームページの作り方まとめ
今回は以上になります。最後までご覧いただきありがとうございました。
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。
【メルマガ登録はこちら！！】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室
PICK UP みんなの仕事インタビュー
WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。
ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。
コメントを残す