CHAPTER 1

SECTION 01 WordPress の特徴を知ろう

WordPressでWebサイトを作ろう

SECTION

01 WordPress の特徴を知ろう

専門知識不要で Web ページを作成できる
WordPress は Web 制作の専門的な知識や特別なツールがなくても、Web ブラウザ上で Web ページを作成したり内容を更新したりすることが可能です。
こうしたシステムを CMS（コンテンツ・マネジメント・システム）といい、Web ページ内の文書や画像などの管理を誰でもかんたんに行うことができます。

第 1 章では WordPress がどのようなソフトウェアであるのかを知り、パソコンにインストールする

11

図 1-2 WordPress の 投 稿 画 面

WordPress とは
WordPress はもともとブログを作成するためのソフトウェアとして、2003 年に誕生しました。その後、世界中のボランティアによって改良され続け、2010 年頃からはブログだけでなく一般的な Web サイトの作成にも多く採用されるようになりました。
投稿画面からページタイ
トル や 本 文 を 入 力 し たり、 画 像をアップロードしたりします

2022 年現在では世界中の Web サイトのうち約 43％が WordPress で作られ、同種のソフトウェアの中でも圧倒的なシェアを占めています。このため、Web 制作にかかわる人であれば習得しておきたいス
キルの 1 つといえるでしょう。
図 1-1 WordPress.org 日本語サイト（ https://ja.wordpress.org/ ）

図 1-3 生 成され た Web ページ

WordPress の日本語版をダウンロードできるほか、
WordPress の 公 式 情 報が得られます
POINT
WordPress は GPL というライセンスを採用しているため、個人でも商用でも誰もが無料で使用する作成した内容は、自動的に Web ページとして生成されます

ことができます。

012

013

WordPress でWeb サイトを作ろう

WordPress でWeb サイトを作ろう

方法を学びます。まずは、WordPress の特徴について見ていきましょう。

CHAPTER 2SECTION 01 管理画面の見方を覚えよう

WordPressの基本設定を行おう

SECTION

01 管理画面の見方を覚えよう

ダッシュボードの構成
ダッシュボードとは管理画面のトップページのようなもので、以下の項目が表示されています。
ダッシュボードを開くには、メインナビゲーションメニューの＜ダッシュボード＞をクリックします。
図 2-2 ダッシュボ ードの構 成

WordPress にログインすると、まず「ダッシュボード」という画面が表示されます。ここでは管理

1

WordPress へようこそ！

画面の構成を知り、基本的な使い方を覚えましょう。

2

2
2 サイトヘルスステータス

管理画面は主に、上部にある「ツールバー」、左サイドにある「メインナビゲーションメニュー」、中央部の「作業領域」で構成されています。
図 2-1 管 理画面全体の 構成

5 クイックドラフト

3 概要

ツールバー

作業領域
6

4 アクティビティ

❶ WordPress へようこそ！
管理画面内でよく使う機能へのリンクや困った現在の投稿やページ数、コメント数の現況が表示されます。

Press のバージョンによっては、表示内容が異な❹アクティビティ❷サイトヘルスステータス
WordPress 本体やプラグイン、テーマ、サーバー環境など、Web サイトの健全性に関する診断結果

028

❸概要

ときに役立つリンクが掲載されています。Wordる場合があります。

メインナビゲーションメニュー

WordPress イベントとニュースが表示されます。

最近の投稿概要やコメントが表示されます。

❺クイックドラフト
投稿の下書きを簡易的に入力できます。

❻ WordPress イベントとニュース
WordPress 公式ローカルサイトの最新記事やフォーラムへの最新投稿が表示されます。

029

WordPress の基本設定を行おう

WordPress の基本設定を行おう

管理画面全体の構成

CHAPTER 3

SECTION01

SECTION 01 テーマを変更しよう

Webサイトのデザインを設定しよう

検索窓に「twenty seventeen」と入力し❷、テーマを検索します。
「Twenty Seventeen」のサムネイル

テーマを変更しようが表示されたら、マウスポインターを合わせて＜インストール＞をクリックします❸。
自動でインストールが始まるので、完了するまで待ちます。
図 3-2 テーマをインストール

Web サイトを作成するには、まずサイトの見た目を決めるテーマを選択する必要があります。このセクションでは、テーマのインストールから有効化までを解説します。
23

33

マウスポインターを合わせて＜インストール＞をクリック

Web サイトのデザインを設定しよう

Web サイトのデザインを設定しよう

テーマを有効化する「twenty seventeen」と入力

WordPress には、本体をインストールするとデフォルトで付属しているテーマがあります。これを「デフォルトテーマ」といい、毎年のように新しいデフォルトテーマがリリースされています。
本書では、2017 年の WordPress デフォルトテーマである「Twenty Seventeen」を使用して解説を進めます。まずは「Twenty Seventeen」をインストールし、有効化します。

「Twenty Seventeen」を有効化する

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

インストールが完了したら、＜有効化＞をクリックします❶。

管理画面から＜外観＞→＜テーマ＞を開き、＜新規追加＞をクリックします❶。
図 3-3 テーマを有 効 化
図 3-1 テーマ画面で＜新規追加＞をクリック
1＜新規追加＞をクリック

1 ＜有効化＞をクリック

046

047

CHAPTER 4SECTION

01

SECTION 01 投稿と固定ページについて知ろう

Web サイトに載せるコンテンツを作ろう

投稿と固定ページについて知ろう

図 4-1 投 稿で作 成したコンテンツの一 覧 ページ

個別の投稿ページ

WordPress には、「投稿」と「固定ページ」という 2 種類のページ作成機能があります。一見すると違いがわかりにくいのですが、それぞれ異なるしくみを持っています。ここでは 2 つの役割の違いについて理解し、目的に合わせて使い分けられるようにしましょう。

44「投稿」と「固定ページ」の違い

Web サイトに載せるコンテンツを作ろう

Web サイトに載せるコンテンツを作ろう

ブログ記事やニュース、コラムは「投稿」で作成「投稿」には下記のような特徴があり、ブログ記事やニュース、コラムなどのように、時系列やカテゴリー別に積み重ねたいコンテンツを作成するのに適しています。

• 新着順など時系列順に一覧表示できる• カテゴリーやタグで分類できる• RSS が生成される
図 4-2 固 定 ペ ージで作 成した店 舗 概 要 のアクセスペ ージ

会社概要やお問い合わせは「固定ページ」で作成「固定ページ」には下記のような特徴があり、時系列に関係のない常設コンテンツを作成するのに適しています。企業の Web サイトの場合、会社概要やお問い合わせなどの Web ページは、固定ページで作成します。

• 時系列に関係なく、アーカイブページにも表示されない• Web ページに親子関係を持たせ、階層化できる• Web ページごとに異なるテンプレートを適用できる

068

069

CHAPTER 4SECTION

03

SECTION 03 画像を挿入しよう

Web サイトに載せるコンテンツを作ろう

図 4-17 画 像をアップロードする

画像を挿入しよう

3 ＜画像＞をクリック

投稿の本文には、テキストだけでなく画像を配置することも可能です。ここでは、投稿に画像を4挿入する方法を覚えましょう。

5 画像を選択

画像を挿入する4＜アップロード＞をクリック

4
Web サイトに載せるコンテンツを作ろう

Web サイトに載せるコンテンツを作ろう

投稿の本文の下に画像を追加しましょう。P.075 を参考に投稿の新規追加画面で投稿のタイトルと本文を入力したら、v キーを押して新規ブロックを追加します❶。次に、新規ブロックの右側にある＜＋＞をクリックします❷。

6 ＜開く＞をクリック

図 4-16 新規ブロックを追加

アップロードが完了すると、本文の下に画像が挿入されます。

1 vキーを押してブロックを追加

図 4-18 アップロードが 完了した

2 ＜＋＞をクリック表示されるメニューから＜画像＞をクリックします❸。＜アップロード＞をクリックするとダイアロ
グボックスが表示されるので❹、任意の画像を選択し❺、＜開く＞をクリックします❻。ここでは、サンプルファイルの muffin.jpg をアップロードします。

078

079

CHAPTER 4SECTION 08 トップページを作ろう

Web サイトに載せるコンテンツを作ろう

店内写真の挿入と、お店の紹介文の入力を行います。P.078 と同様の手順で、画像ブロックを使ってSECTION08 トップページを作ろう

concept.jpg を挿入します❹。画像の設定を変更する必要はありません。
図 4-49 店 内 写 真 の挿 入4 画像を挿入

Web サイトにアクセスした際、一番最初に表示される「トップページ」を作成していきます。ここでは見出しを表示する「見出しブロック」、最新の投稿内容を表示する「最近の投稿ブロック」の使い方を理解しましょう。

44

お店の紹介を入力する

Web サイトに載せるコンテンツを作ろう

Web サイトに載せるコンテンツを作ろう

ここからは、P.096 で作成した固定ページを編集していきます。トップページ（Concept）には、お店の紹介と、新着の投稿記事を表示します。まずは管理画面から＜固定ページ＞→＜固定ページ一覧＞をクリックし❶、固定ページの一覧画面を開きます。＜ Concept ＞にマウスポインターを合わせ❷、＜編集＞をクリックすると❸、「Concept」ページの編集画面が表示されます。
続けて、画像の下の段落ブロックに紹介文を入力します❺。
図 4-48 Concept の編集ペ ージを開く
1＜固定ページ＞→＜固定ページ一覧＞をクリック

2＜ Concept ＞にマウスポインターを合わせる

図 4-50 お 店 の 紹 介 文を入 力

3 ＜編集＞をクリック

5 紹介文を入力

098

099

CHAPTER 5SECTION 01 メインメニューを設定しよう

Web サイトのレイアウトを変えて使いやすくしよう

続いて、新しいメニューを作成します。＜新しいメニューを作成しましょう＞をクリックし❺、「メSECTION

01 メインメニューを設定しよう

ニュー名」に「トップメニュー」と入力して❻、＜メニューを作成＞をクリックします❼。
図 5-2 メニュー名を入 力して＜メニューを作 成 ＞をクリック

5

WordPress では管理画面のメニュー機能を使って、任意のナビゲーションメニューを作成・編

5＜新しいメニューを作成しましょう＞をクリック

5

6「トップメニュー」と入力定します。
7＜メニューを作成＞をクリック

メニューを作成する
ナビゲーションメニューとは、Web サイト内にあるほかの Web ページに移動するためのリンクのことで、PC サイトでは主に Web ページの上部やサイドバーなどに配置されています。ナビゲーションメ
ニューがあることで Web ページ間の移動がスムーズになるのはもちろんのこと、その Web サイトにどのような Web ページがあるのかを明示することができます。

画面左の「固定ページ」に表示されている＜すべて選択＞にチェックを入れ❽、＜メニューに追加＞をクリックします❾。

まずは不要なデータを削除しましょう。管理画面から＜外観＞→＜メニュー＞をクリックし❶、「メニュー」画面を開きます。「編集するメニューを選択」から＜トップメニュー（トップメニュー）＞を選択

図 5-3 メニューを追 加

し❷、＜選択＞をクリックして❸、＜メニューを削除＞→＜ OK ＞をクリックします❹。
図 5-1 不 要なメニュー の削除
1 ＜外観＞→＜メニュー＞をクリック
2＜トップメニュー（トップメニュー）＞を選択

8＜すべて選択＞にチェックを入れる

9＜メニューに追加＞をクリック

3 ＜選択＞をクリック

4 ＜メニューを削除＞をクリック

120

121

Web サイトのレイアウトを変えて使いやすくしよう

Web サイトのレイアウトを変えて使いやすくしよう

集することが可能です。ここでは、第 4 章で作成した固定ページをナビゲーションメニューに設CHAPTER 6SECTION01

SECTION 01 プラグインをインストールしよう

プラグインで Web サイトに便利な機能を追加しよう

プラグインをインストールしよう

POINTLocal で WordPress をインストールした場合は「WP Multibyte Patch」がインストールされていませんが、国内のレンタルサーバーから WordPress を自動インストールした場合は、あらかじめ「WPMultibyte Patch」がインストールされていることがあります。その場合はインストールは不要です。

インストールが完了すると＜有効化＞ボタンが表示されます。プラグインはインストールしただけで6は動作しないため、＜有効化＞をクリックします❹。しばらくすると、「プラグインを有効化しました。
」

ンを利用すると、WordPress サイトに必要な機能をかんたんに追加することができます。まずは、と表示されます❺。
「WP Multibyte Patch」は特別な設定を必要とせず、有効化するだけで機能します。

日本語環境の WordPress に必須の「WP Multibyte Patch」というプラグインをインストールしま

なお、有効化したプラグインを停止したり、削除したりするには、管理画面から＜プラグイン＞→＜イしょう。

ンストール済みプラグイン＞をクリックして「プラグイン」画面に移動し、プラグインの＜無効化＞や＜削除＞をクリックします。
図 6-2 プラグインを有 効 化「WP Multibyte Patch」をインストールする

4 ＜有効化＞をクリック

WordPress はもともと英語圏で作られているため、日本語のようなマルチバイト文字を使用すると不都合が生じる場面があります。これを解消し、正しく動作させるためのプラグインが「WP MultibytePatch」です。
管理画面から＜プラグイン＞→＜新規追加＞をクリックし❶、「プラグインを追加」画面を開きます。
検索フォームに「WP Multibyte Patch」と入力し❷、「WP Multibyte Patch」が表示されたら、＜今すぐインストール＞をクリックします❸。
図 6-1 プラグインを検索してインストール
1 ＜プラグイン＞→＜新規追加＞をクリック

2

3「WP Multibyte Patch」と入力＜今すぐインストール＞をクリック

5 プラグインが有効化された

COLUMN

プラグインの注意点

管理画面から追加できるプラグインは、すべてボランティアの開発者によって作られています。無料で使用できる反面、プラグインの名前が変わってしまったり、突然プラグインがなくなってしまったり、アップデートなどのサポートが行われなくなったりするといったケースもあります。

142

143

6
プラグインでWeb サイトに便利な機能を追加しよう

プラグインでWeb サイトに便利な機能を追加しよう

プラグインとは、アプリケーションに機能を付け加えるためのソフトウェアのことです。プラグイ

CHAPTER 7

SECTION 01 テーマをカスタマイズしよう

CSS でデザインをカスタマイズしよう

SECTION

01 テーマをカスタマイズしよう
7

テーマのカスタマイズに必要な知識
テーマの見た目をカスタマイズするうえで最低限必要なのは、HTML と CSS の基礎知識です。本書ではカスタマイズの手順を解説します。

既存のテーマは、そのまま使用するだけで見栄えのよい Web サイトが完成しますが、見せ方を既存テーマを選択する工夫したかったり、よりオリジナリティを出したかったりと、カスタマイズが必要となる場面があ

既存テーマを選ぶ際には、作りたい Web サイトのイメージや構成にできるだけ近いものを選びます。

るでしょう。ここでは、CSS（カスケーディングスタイルシート）を用いて既存テーマをカスタマイ

シンプルなテーマは独自の機能が少ない反面、カスタマイズしやすいというメリットがあります。逆に、ズする方法について解説します。

多機能なテーマはファイルが複雑でカスタマイズが難しい場合があります。本書では、ここまで利用し7てきた「Twenty Seventeen」をカスタマイズしていきます。

既存テーマをカスタマイズするには、「追加 CSS」という機能を利用します。元のテーマファイルを直完全にオリジナルな Web サイトを作るのであれば、オリジナルテーマをイチから作ることが望ましいのですが、それには多くの知識や労力が必要となります。そこで、ぜひ身に付けておきたいのが、テー接編集することなく、必要な部分だけを上書きしてカスタマイズするため、PHP などの難しい知識は必要ありません。

マのカスタマイズテクニックです。
既存テーマを利用して、見た目を変更したい部分だけをカスタマイズすることで、オリジナルに近い

図 7-2 「追 加 CSS 」は 変 更した いところだ け記 述すればよい

Web サイトを比較的かんたんに作ることができます。また、昨今の既存テーマのほとんどがスマートフォンなどのマルチデバイスに対応した「レスポンシブ Web デザイン」で作られているため、特別な知識がなくてもスマートフォンで見やすい Web サイトを作ることができます。
図 7-1 オリジナルテーマの作成と既存のテーマのカスタマイズの比 較

オリジナルテーマの作成
静的コーディング

サイト設計

デザイン

（HTML・CSS・JavaScript）

WordPress のテンプレート化

WordPress の設定

コンテンツ入力

完成

既存テーマのカスタマイズ
既存テーマの選択

160

WordPress の設定

コンテンツ入力

変更したい部分のカスタマイズ

完成

161

CSS でデザインをカスタマイズしよう

CSS でデザインをカスタマイズしよう

既存テーマのカスタマイズには「追加 CSS」を使う

既存テーマを利用するメリット

CHAPTER 8SECTION01

SECTION 01 レンタルサーバーと契約しよう

Web サイトをインターネットに公開しよう

レンタルサーバーと契約しよう

主なレンタルサーバー
レンタルサーバーで有名なのは、「エックスサーバー」（https://www.xserver.ne.jp/）、「さくらインターネット」（https://www.sakura.ad.jp/）、「ロリポップ！」（https://lolipop.jp/）などです。いずれも容量や機能に応じて複数のプランが用意されていますが、必ず WordPress に対応したプランを選択してください。利用するサービスを決めたら、Web サイトの＜お申し込み＞などのボタンをクリックして、契約者情報などの必要事項を入力し、申し込みを行います。申し込み完了後はメールが届くので、内容をWeb サイトをインターネット上に公開するためにはサーバーが必要となります。自分でサーバー確認しておきましょう。

を構築するのは難しいので、レンタルサーバーを契約しましょう。ここではレンタルサーバーの選び方、独自ドメインの取得、WordPress の自動インストールについて解説します。

8

図 8-1 エックスサーバ ー

8

レンタルサーバーと契約する

Web サイトをインターネットに公開しよう

Web サイトをインターネットに公開しよう

ここまで、ローカル環境で Web サイトを構築してきましたが、Web サイトをインターネット上に公開するためには Web サーバーが必要となるため、まずはレンタルサーバーと契約をします。
レンタルサーバーを選ぶ際には、WordPress が動作する要件を満たしているかを、必ず確認しましょう。また、WordPress をかんたんにインストールできる機能が提供されていると非常に便利です。一般
的に個人が契約するレンタルサーバーの月額費用は、おおむね 500 円〜 1,500 円程度です。レンタルサー
バーを選ぶ際には価格だけでなく、安全性・安定性・サポート体制も比較したうえで検討しましょう。
● WordPress日本語版の推奨動作環境• PHP バージョン 7 以上

図 8-2 さくらインターネット• MySQL 5.6/MariaDB 10.0 以上
次のページでは、WordPress の自動インストール機能に対応している主なレンタルサーバーを紹介します。契約の手順はレンタルサーバーによって異なるので、それぞれの画面に従って操作してください。

POINT
多くのレンタルサーバーでは、無料で試すことができる「お試し期間」が設けられています。こうしたサービスを利用して、実際の使い勝手などを比較検討するとよいでしょう。

174

175