WordPress

ホームページ作成
WordPress（ワードプレス）
を使ってみよう！
特定非営利活動法人ウェッブストーリー
〒 963-8017　郡山市長者 1-7-17 さくらビル 3 階
電話：024-933-7940　メール：info@cafe21.net

2
はじめに
　ワードプレスは、2003 年に誕生した無償のオープンソース（＝ソースコードが公開されていて、改良や
再配布を許可されたプログラムのこと。）のブログ作成ソフトウェアです。
　ワードプレスは管理画面からテキストや画像を登録することで、HTML 言語などのスキルが無くて
もホームページを更新することができるシステムなので、ブログの作成だけではなく、CMS（Content
Management System の略で、ホームページ作成システムのこと。）としても利用されています。
　ワードプレスを使用してホームページを作るメリットとして、次の４点があげられます。
１．ワードプレスは無料で利用できます。
２．従来、ホームページ作成には、PHP や HTML、CBB、MySQL などの専門的な知識が必要で、最初か
　　ら自分でホームページを作成するには高度な知識と膨大な時間が必要でした。
　　しかし、ワードプレスは専門的な知識がなくても、文章や画像を用意すれば誰でもホームページの更新
　　ができます。
３．「テーマ」によって、誰でも簡単にホームページの見た目を変更することができます。
４．「プラグイン」によって、お問合わせやアンケートページなどが簡単に作成できる等、さらに機能を拡
　　張することができます。

3
１章　WordPress でホームページを作成する前の準備
1-1 あらかじめ準備するソフト
　WordPress でホームページを作るために最低限必要なソフトをパソコンに準備しておかなくてはいけませ
ん。おすすめは次の 3 つで、いずれも無償で利用できます。
１．WinSCP
　ファイル転送ソフト。
　パソコンに保存されているプログラムや画像などのデータを、サーバーに送る時に使います。
２．Lhaplus
　圧縮・解凍ソフト。
　インターネット上からプログラムをパソコンからダウンロードする際は、データの意味を保ったまま、大
きさを減らす処理をした形式（有名なのは「～ .zip」という形式です。）になっていることが多いです。こ
れを「圧縮」といいます。一方、Zip ファイルを元の大きさに戻すことを「解凍」といいます。その両方の
作業を行うことができるのが、圧縮・解凍ソフトです。
３．サクラエディタ
　テキストエディタ。
　WordPress は HTML の専門的な知識がなくても更新作業ができるのが大きな利点ですが、ホームページ
の設定をする際に必要なので、HTML、PHP といったホームページを作成するためのプログラム言語を編集
できるテキストエディタを用意しておく必要があります。

1-2 レンタルサーバーとドメインの手配
（１）レンタルサーバーと契約する
　契約する時は、WordPress を動かすのに必要な次の 2 つの機能が使えるプランなのかよく確認をしましょ
う。
　なお、「WordPress 対応」と明示していれば確実です。
　レンタルサーバーの料金は会社によって大きな差があるので、比較検討の必要があります。比較的安価な
料金で利用できるレンタルサーバー会社としては、コアサーバー、さくらレンタルサーバー、ロリポップな
どがよく知られています。
　　①　MySQL……世界中で広く利用されているデータベース管理システム
　　②　PHP………自ら作動するホームページを作るためのサーバー用スクリプト言語
（２）ドメインを決める
　ドメインとは、インターネット上の住所のことで、だれでも取得することができます。
　ただし既に他の人や会社が使用しているドメインや、国・地域が限定されているもの、政府や学校等の機
関専用のドメインは取得不可な場合もあるので、使いたいドメインがあれば、ホームページ作成前に取得で
きるかどうか確認する必要があります。
　ドメインを取得するのは有料で、その金額はドメインの種類やレンタルサーバーによって異なります。
（３）データベースの設定
　契約したレンタルサーバーにおいて、MySQL の下記の項目の設定をします。この情報はとても大切です

4
からメモを取っておきましょう。
　　　・ホスト名　　・ユーザ名　　・パスワード
1-3 WinSCP の設定
　これからホームページを作るにあたり、パソコンに保存された文書や画像などのデータをデータベースに
送る設定を行う必要があります。
（１）WinSCP を起動　⇒　「新規」をクリック。
（２）「WinSCP ログイン」の「セッション」の項目に、先ほど作成したデータベースの情報を入力します。
　　なお、ファイルプロトコルを「FTP」に変更し、「保存」をクリックします。
　　　・ホスト名　　・ユーザ名　　・データベースのパスワード
（３）「セッションの保存名」の画面が現れたら、適当な名前を入力し、「パスワードを保存」にチェックを
　　入れます。以後、「ログイン」を選択するだけでよくなります。

5
２章　WordPress 一式をサーバーにアップロードする
2-1 ワードプレスをダウンロードする
　WordPress 日本公式サイト「WordPress ｜日本語」より、WordPress 日本語版の最新バージョンをダウ
ンロードします。その際、「プログラムで開く」を選択すると、自動的に解凍されて「WordPress」フォル
ダがパソコンに保存されます。当教室のパソコンは、ダウンロードしたファイルはデスクトップに保存され
るように設定されているので、「WordPress」というフォルダがデスクトップにあるか確認してください。
※ Firefox は【ツール　⇒　オプション　⇒　一般】で保存先が指定できます。保存先を「デスクトップ」
　にするとダウンロードしたファイルがすぐ確認できるので便利です。
　なお、Internet Explorer では、【ツール　⇒　ダウンロードの表示　⇒　オプション】から保存先を設　　
定します。
2-2「WordPress」フォルダの名前を変更
（１）フォルダ名を変更する理由
　例えば、取得したドメインが「yamada1234.com」として、「WordPress」フォルダを名前を変えずにそ
のままサーバーにアップロードすると、URL は http://yamada1234.com/wordpress となります。
　1 つのドメインに１つだけ WordPress のホームページを作るのであれば問題はありませんが、何個も
「WordPress」という名前のフォルダをサーバーにアップロードすると、１つの「WordPress」というフォ
ルダに上書きされるだけで、複数のホームページは作られません。
（２）名前の変更
　デスクトップ上の「WordPress」フォルダを右クリック　⇒　「名前の変更」　⇒　講師の指示に従いフォ
ルダ名を変更します。
2-3 フォルダをレンタルサーバーにアップロード
（１）WinSCP を立ち上げる
　　デスクトップ上の「WinSCP」アイコンをダブルクリック
　　　　⇒　セッション名を選択して「ログイン」をクリック
　　　　⇒　左右 2 画面が表示されます。左が自分のパソコン、右がサーバーで、それぞれのファイルやフォ
　　　　　　ルダの内容を確認することができます。画面の大きさや位置を、デスクトップにある名前を変
　　　　　　更した「WordPress」フォルダが見えるように調節すると、後の作業が楽になります。
（２）画面右（サーバー）
　　＜ルート＞をダブルクリックし、同様に以下のフォルダもダブルクリックしていきます。
　　　　⇒　public_html　⇒　ドメイン名　⇒　あらかじめ指定されたフォルダ
（３）デスクトップ上の先ほど名前を変更したフォルダをクリック
　　　　⇒　WinSCP 画面右（サーバー）までドラックし、移動させたら指を離すします。
　　　　⇒　小さなウィンドウが出ますので、「コピー」をクリックします。
以上で WordPress でホームページを作成する準備は終了です。

6
３章　テーマの変更
3-1 テーマとは
　
　テーマとは、一般的なブログでは「テンプレート」と呼ばれるものに相当します。使用するテーマによって、
ホームページのレイアウトや表示する画像などが異なります。テーマを変更すると、着せ替えをするように
簡単にホームページのデザインや機能などを変えることができます。
　　WordPress は様々なテーマが沢山配布されていて、それらの多くは無償で使うことができます。
3-2 テーマを変更する
　　
　WordPress をインストールした直後は、平成 25 年 4 月現在「Twenty Twelve」というテーマになっています。
　ここでは、「Twenty Eleven」という別のテーマに変更します。
（１）ログインし、ダッシュボード（WordPress のいろいろな作業を行う管理画面 ) に入ります。
　　　画面の左側に操作メニューの一覧が表示されています。
（２）メニューの中の「外観」を選択し「テーマ」をクリックすると、「テーマの管理」画面が表示されます。
　　　画面の上には現在使用しているテーマが表示され、その下に利用可能なテーマの一覧が表示されます。
（３）利用可能なテーマの中から「Twenty Eleven」を見つけ、「有効化」をクリックします。
（４）実際のホームページの状態を確認します。ダッシュボードの一番上の黒い帯の部分の、左上に表示さ
　　れている自分のサイト名をクリックしてください。「Twenty Eleven」テーマが適用されていることが
　　わかります。
　これからは、「Twenty Eleven」テーマを使用してホームページ作成の方法を学びます。

7
４章　ホームページのタイトル・キャッチフレーズなど
　最初に WordPress をインストールしたときにホームページのタイトルを入力しましたが、後になってよ
り良いタイトルを思いついたので変更したいということもあるでしょう。WordPress では、後から設定変更
することができます。
ダッシュボードの「設定」　⇒　「一般」をクリックして、設定の変更をしましょう。
4-1 タイトルの変更
　
「サイトのタイトル」の欄に新しいタイトルを入力します。
4-2 キャッチフレーズ
　
自分のホームページがどういうものか、例えば、お店ならどんな商品を取り扱っているのかなど、簡単な説
明ができます。簡潔に「どんなホームページなのか」を表示しましょう。なお、ホームページではタイトル
の直下に表示されます。キャッチフレーズを変更することで、ホームページに変化が出ることがあります。
4-3 メールアドレス
　
記事にコメントが付いたり、問合せフォームを利用して注文があった時など管理者に送信されるメールの宛
先になります。インストール時に、とりあえず仮のメールアドレスを入力した方は、ここで正しいメールア
ドレスを入力してください。
変更が終わったら、下にある「変更を保存」をクリックしてください。
ホームページのタイトルやキャッチフレーズが変更されたことを実際の画面で確認してみましょう。

8
５章　固定ページを作る
　
　固定ページとは、ほとんど更新の必要がないコンテンツを掲載するためのページで、企業のホームページ
では次のようなページなどが考えられます。
　・会社・団体概要　　・代表挨拶　　・アクセス　　・お問合わせ
　では、固定ページを作成して表示してみましょう。
5-1 固定ページを作成する
　WordPress をインストールしたばかりの状態のときは、「ホーム」と「サンプルページ」の２つのページ
が用意されています。
　これから自分のホームページで使う固定ページを作成しましょう。
（１）新しく固定ページを作る。
　　①　ダッシュボードの「固定ページ」から「新規追加」をクリック。
　　　　⇒　「新規固定ページを追加」という編集画面が出てきます。
　　②　タイトルの入力欄に「ホーム」と記載
　　③　「ページ属性」の項目を変更
　　　　⇒　「テンプレート」を変更
　　　　　初期設定は「デフォルトテンプレート」になっているので、「サイドバーテンプレート」に変更する。
　　　　⇒　「順序」には「10」と数字（半角）を入力
　　④　「公開」ボタンをクリック。
5-2 同じように他の固定ページも作成します。
　　「順序」の数字は次のように入力してください。
　・代表あいさつ（20）
　・製品（サービス）（30）
　・アクセス（40）
　・お問い合わせ（50）
　・プライバシーポリシー（個人情報保護）（100）
　全ての固定ページを公開した後でホームページを見ると、２つのサンプルページの後に、自分が作成した
固定ページが順序の数字の順番で表示されます。
5-3 不要な固定ページを削除する。
（１）作成した固定ページを編集する。
　ダッシュボードの「固定ページ」　⇒　「固定ページ一覧」を選択すると、作成した固定ページが確認でき
ます。

9
（２）「サンプルページ」を削除する。
　「サンプルページ」をポイント、「編集｜クイック編集｜ゴミ箱｜表示」と表示が出ます。
　「ゴミ箱」をクリックします。サンプルページがゴミ箱に移動し、一覧から削除されます。
　削除した記事は、「投稿」画面の左上にある「ゴミ箱」をクリックすると確認することができます。
（３）「ホーム」を 1 つにする。
　サンプルページを削除しても、ホームページを確認すると「ホーム」が 2 つ表示されています。今度は「ホー
ム」を 1 つだけ表示させるようにします。
①　ダッシュボードの「設定」　⇒　「表示設定」をクリック。
②　「フロントページ（最初に表示されるページのこと）の「表示」の項目を変更します。
　初期状態では「最新の投稿」にチェックが入っています。
　この設定になっていると、ホームページにアクセスするたびに、常に最新の記事が一番最初に表示される
ようになっているいます。
　ここを「固定ページ」に変更します。
　次に「フロントページ」の右側の▼マークを選択すると、これまで作成した固定ページの一覧が表示され
るので、この中から「ホーム」を選択します。これで、「ホーム」が１つだけ表示されるようになります。
5-4 コメント欄を表示させないようにする
　WordPress を始めた当初は、固定ページの下に「コメントを残す」という欄が表示されています。
　これは閲覧者が記事に対してのコメントをホームページの管理者に送ることができる機能で、ブログとし
て利用する場合には読者と簡単に意見交換をすることができます。
　しかし、会社や団体のホームページでは一般には必要のない機能ですので、コメント欄を表示させないよ
う設定を変更しましょう。
（１）固定ページの編集画面を表示してから、画面の右上にある表示オプションを選択すると、隠れていた
　　画面が見えるようになります。
（２）全ての「表示する項目」にチェックを入れます。すると、ページ本文の編集画面の下に新しい項目が
　　表示されるようになります。
　　 1 つの固定ページでこの作業を行うと、以後他のページでも同じように項目が表示されます。
（３）「ディスカッション」のチェックを外します。
　　　新しく表示された項目のうち、「ディスカッション」の項目には、初期状態では
　　　　・コメントの投稿を許可する。
　　　　・このページでトラックバックとピンバックを許可する。
　　の項目にチェックが入っています。このチェックは２つとも外しましょう。
　　これでコメント欄の表示が消えます。
（４）他のページでも同じように操作し、全ての固定ページのコメント欄を消してください。

10
６章　「Twenty Eleven」のヘッダー画像を変更する。
　「Twenty Eleven」ではページを表示させることにヘッダー（ページ上部の写真 ) がランダムに切り替わる
機能が付いています。
　ここでは、最初から用意されている画像をホームページにふさわしい画像に変更する２つの方法を紹介し
ます。
6-1 WinSCP を利用して画像を入れ替える方法
１．デスクトップ上に新しい画像を保存する「headers」フォルダを作る
（１）以前ダウンロードした「WordPress」フォルダの中から、「themes」　⇒　「twentyeleven」⇒　「images」
　　⇒　「headers」フォルダを探し、フォルダにカーソルを合わせて右クリックして「コピー」を選択。
（２）次にカーソルをデスクトップの空いている個所に移動させて右クリックし、「貼り付け」を選択
　　⇒　新しく「headers」フォルダが作られます。
２．「～ -thumbnail.jpg」という名前の画像を削除する。
　「headers」フォルダを開くと、1 種類につき 2 枚ずつ、合計 16 枚の画像が入っています。同じ画像でも、
例えば「hanoi.jpg」と「hanoi-thumbnail.jpg」というように、名前に「thumbnail」と付く画像と付かない
画像があります。
　これは、本来の大きさの画像とは別に、「thumbnail（サムネイル）」という、多数の画像を一覧表示する
ために縮小された画像が入っているからです。「～ -thumbnail.jpg」と名前の付いた 8 枚のファイルは今後
の作業に必要ないので、削除します。
３．新しい画像を検索する
（１）Firefox を立ち上げ、Google のページを表示します。
　画面上部の項目から「画像」を選択すると、検索結果で画像だけを表示させることができます。自分の作
成しているホームページの内容に合う単語を入力して検索します。
（２）横長で大きいサイズの画像を選ぶ
　最初の検索結果の画像は、大きいサイズの画像も小さいサイズの画像も混ざった状態で表示されています。
「Twenty Eleven」のテーマでは、ページ上部に表示される画像の推奨サイズは、横 1000px　×　縦 288px
です。
　大きいサイズの画像だけを検索したいときには、「検索ツール」　⇒　「サイズ」　⇒　「大」の順に選択す
ると、大きいサイズの画像だけ表示されるようになります。
　検索ツールでは、色や種類（写真かイラストか）などでも条件の絞り込みができるので試してみましょう。
（３）使用する画像をコピーする
　使いたい画像をクリックすると拡大表示されます。画像にカーソルを合わせて右クリック　⇒　「画像を
コピー」をクリックします。

11
４．画像編集ソフトで加工する
　コピーした画像の大きさを適切なサイズに切り取ったり、色や明るさを調節したりしてホームページに
掲載するために使用するのが画像編集ソフトです。当教室では画像編集ソフトの定番である「Photoshop
Elements10」を使用して画像の編集を行います。
　「Photoshop Elements10」には様々な機能が搭載されていますが、授業ではホームページに写真を掲載す
るのに必要な機能に絞って操作方法を説明します。
（１）「Photoshop Elements10」を起動すると、編集作業を行う画面が表示されます。
　　⇒　「Ctrl」キーと「N」キーを同時押し、「新規」画面が出たら「OK」を押します。
　　⇒　「Ctrl」キーと「V」キーを同時押すと、コピーした画像が貼り付けられます。
（２）画像をホームページの上部に表示させる大きさに切り取ります。
　　⇒　画面左側の「ツールボックス」の中から「切り抜き選択ツール」を選択
　　　　画像の上にカーソルを合わせると、カーソルが矢印から切り抜き選択ツールと同じ形に変わり、切
　　　　り抜きができる状態になったことがわかります。
（３）数値の入力
　画面上部に幅と高さ、解像度の数値を入力する欄が出てくるので、次のように半角で入力します。
　　　幅　⇒　1000px　　　高さ　⇒　288px　　　解像度　⇒　72
※解像度を「72」としたのは、インターネットで画像を見るのに適した標準的な値とされているからです。
なお、商用印刷物では 300 ～ 400px といわれています。
（４）画像を切り取る
　カーソルを画像の上に移動させ、切り抜く範囲を指定します。あらかじめ幅と高さを決めているので、数
値を超えた大きさ以上には範囲指定できません。ホームページに表示されることを考えながら、切り取る範
囲を適切な位置に移動させましょう。この際、キーボードの方向キーを使うと、マウスを使って移動させる
よりもより細やかに上下左右に移動させることができます。
範囲が決まったら、選択範囲の右下に表示されている「確定」（緑色のレ点マーク）をクリックして、範囲
を確定してください。
また、その隣にある赤いマークを押すと範囲指定が解除され、作業をやり直すことができます。
（５）画質を調整する
　「Photoshop Elements10」には画像の色や明るさを簡単に補正する機能が備わっています。元の画像の色
や明るさを調節して、より良い画像にしてみましょう。
　この作業は「画質調整」から選択して操作します。代表的な補正機能としては次の４つです。
　①　自動スマート補正　　写真の色を総合的に補正します。
　②　自動レベル補正　　写真全体の色とコントラストを補正します。白と黒の明暗と色を整えるように補
　　　　　　　　　　　　正されるので、はっきりとした色調になります。
　③　自動コントラスト補正　　　色を維持してコントラストを補正する機能です。自然な立体感が欲しい
　　　　　　　　　　　　　　　　ときに使います。
　④　スポット修復ブラシツール
　写真の中の不要な人物や看板などを簡単に消すことができます。画面左側の「ツールボックス」の中から「ス
ポット修復ブラシツール」を選択し、画面の上に表示される「種類」は「コンテンツに応じる」を選びます。
　左上にブラシの種類や大きさの選択画面が出てくるので、使いやすい大きさにしてから、消したい部分を

12
マウスでドラッグして塗りつぶしていくと、消したいものが消去されます。
※　作業をやり直したいときには、「編集」　⇒　「取り消し」を選択すると、最後に行った作業を取り消す
ことができます。「取り消し」は頻繁に使う機能なので、「Ctrl」＋「Z」キーを同時に押しても、同じように
できることを覚えておきましょう。
５．加工した画像を保存する
　画質の調整まで終わったら、次はホームページに掲載する形式に画像を保存します。
（１）「ファイル」　⇒　「Web 用に保存」をクリックします。
　画面が変わり、左側に元の画像、右側に加工後の画像が比較できるように並んで表示されます。
（２）ファイル形式と画質の変更
　　①　ファイルの形式は「JPEG」を選択
　　②　右側の画像の下に表示された数字は、画像のデータ量を表していて、単位の「K」は「キロバイト」
　　　　を表しています。
　データ量が大きいほど高品質ですが、その分、インターネットで画像が表示されるまでに時間がかかりま
す。現在のように光回線や ADSL という高速回線が普及していなかった時代には、データ量の大きい画像は
パソコンの画面に表示されるまでに非常に時間がかかりました。
　そこで、ファイル形式の下の「低画質」から「最高画質」まで、5 段階の画質を選択して、インターネッ
トで画像を表示させるのに適した 50 ～ 100K 程度になるように調節します。
（３）画像の保存
　　①　ファイル形式と画質が決まったら「OK」をクリック　⇒　保存画面へ
　　②　「保存する場所」は「デスクトップ」　⇒　「headers」に設定します。
　　③　フォルダ内にある 8 枚の画像のうち 1 枚を選んでクリック
　　　　⇒　「ファイルの置き換え」の画面が出るので「置換」をクリック
　　　　⇒　ファイルの名前はそのままで、新しい画像が保存されます。
　残りの画像も（３）から（５）までの作業を繰り返し、「headers」フォルダ内にある 8 枚の画像すべてを
入れ替えます。
６．入れ替えた画像をサーバーにアップロードする。
（１）「headers」フォルダを開いたまま、WinSCP にログインする。
　　右側（サーバー）は「twentyeleven」→「images] →「headers」を表示させます。
（２）「headers」フォルダ内の画像全てを選択する。
　　「Ctrl」＋「A」キーを押すと、8 枚の画像が全て選択されます。
（３）選択した画像をドラッグ＆ドロップで WinSCP の右側に移動させます。
（４）「コピー」を選択　⇒　「上書きしますか？」と聞かれたら「全てはい」を選択
　
　Firefox で「ツール」　⇒　「最近の履歴を消去」をクリックし、「表示したページとダウンロードの履歴」
にチェックがついていることを確認し、「今すぐ消去」をクリックします。この操作で「Twenty Eleven」の
ヘッダー画像が、自分の選んだ画像に入れ替わります。

13
6-2 WordPress のダッシュボードから新しい画像をアップロードする方法
　
　WordPress では、WinSCP を使わずにダッシュボードから画像をサーバーにアップロードすることもでき
ます。この方法で新しい画像を自分のホームページに表示させましょう。
１．画像を加工する
　6-1 の（３）から（５）で説明したとおり、入れ替える画像をインターネットで検索して、「Photoshop
Elements10」で加工します。「Web 用に保存」をする時のファイル名は、自分で決めた名前で保存して構い
ません。
　なお、入れ替える画像は、自分がデジタルカメラなどで撮影した画像を利用することもできます。その際、
元になる画像の画素数は、加工後の仕上がりがよりきれいな画像になるので、できるだけ大きい画素数で撮
影しましょう。
２．ダッシュボードから画像をアップロードする
（１）ダッシュボードのメニューから「外観」　⇒　「ヘッダー」をクリック。
（２）「カスタムヘッダー」が表示されます。プレビュー画面下の「画像を選択する。」の項目にある「自分
　　のコンピュータから画像を選択」の「参照」をクリック。
（３）「ファイルのアップロード」画面が表示されたら、保存した画像をクリックして「開く」をクリック。
（４）「アップロードした画像」に選択した画像が表示されます。
　　表示させる画像の数に制限はありませんので、操作を繰り返して新しい画像を追加しましょう。
　
　アップロードした画像の中から使わない画像を消したいときは、ダッシュボードのメニューから「メディ
ア」　⇒　「ライブラリ」をクリックすると、自分がアップロードした画像の一覧を見ることができます。
　画像を削除したいときは、一覧の中から使わない画像のファイル名にカーソルを合わせ、「完全に削除する」
をクリックします。
　複数の画像を一度に削除したいときは、削除したい画像の横にチェックを入れ、一覧の上にある「一括操
作」を「完全に削除する」に変更し、　「適用」をクリックします。
３．画像の表示の設定
　6-1 の方法で入れ替えた画像をランダムに表示させたいときは、「デフォルト画像」の項目の「ランダム」
にチェックを入れます。
6-2 の方法で追加した画像をランダムに表示させたいときは、「アップロードした画像」の項目の「ランダム」
にチェックを入れます。
　常に 1 枚の画像だけ表示させたいときは、画像のどれか 1 枚にチェックを入れます。
　設定が終わったら、「変更を保存」を押します。これで、自分のホームページの内容に合った画像が表示
されるようになりました。

WordPress

More Related Content

Similar to WordPress (20)

Recently uploaded (17)

WordPress