Step2. ワードプレス(ライトニング)初級編【無料版】

ワードプレスは無料・有料あわせ、数千もの既存テーマがあります。

その中でも機能が充実し、多くの人が利用し情報がたくさん共有されているテーマを選ぶ必要があります。

このカリキュラムでは、Lightningテーマでホームページ制作を進めていきます。

使いやすく、無料版でも十分カスタマイズできますので、まずは基本的な設定から進めていきましょう。

テーマの確認（インストール）

すでにエックスサーバーお申込み時に、ワードプレスとLightningテーマのインストールができています。

---

メディア

画像をダウンロードするときは、どこに保存したかきちんと把握しておきましょう。

ダウンロードフォルダ、デスクトップなど、ご自身が指定されたフォルダ、またはデフォルト設定で指定されているフォルダに必ず保存されます。保存する際はきちんと自分で指定するか、ダウンロードされるフォルダを把握しておきましょう。

---

投稿

次に、テストページとして3つ投稿を行います。投稿とは、ブログやお知らせのように、時系列でアップできるものです。（ブログサイトの場合は、この投稿のみでほぼ完結します。）

ここでは、投稿＝ブログとして解説を進めていきます。

新規でブログを投稿する

アイキャッチ画像も設定しておきましょう！

タイトルと文章を入力

アイキャッチを設定する

画像を設定できたら、右上の を押しましょう。

---

固定ページを作る

ブログ投稿の次は、固定ページの作成です。

固定ページとは、トップページ・サービスメニュー・お問い合わせページなど、固定の情報を掲載するページです。

ここでは、HOME（ホーム）・BLOG（ブログ）・CONTACT（コンタクト）の３つのページを作りましょう。（タイトルは英語表記、日本語表記お好きな方で）

新規追加

新規追加（パーマリンクを設定する）

この動画に音声はありません。

パーマリンクはなるべく英語で設定しておきましょう。

日本語で設定すると、共有するときやどこかにURLを掲載する時に記号を含む別の文字列に変換されてしまいます。

テーマのカスタマイズ

テーマは予めレイアウトやデザインが決まっていますが、カスタマイズ性は高く、完全にオリジナルのサイトを作ることができます。

では上記の1〜7を順に進めていきましょう。

1. サイトの基本情報

---

2. メニュー

この辺りから、今まで作ったブログや固定ページがどう表示されるのかが目で見てわかりやすくなります。

まだまだ謎が多いかと思いますが、最後まで1つ1つしっかり進めていくと、だんだん理解しやすくなってきますよ。

音声が入っています。音量注意してください。

ナビゲーションメニューが表示されました。

ウィジェット

ウィジェットとは、Webサイトのサイドバーやフッターにさまざまなパーツを設置できる機能です。 

ここでは、デフォルトのウィジェットは使用しないので削除しておきます。

外観＞ウィジェットから、設定されているウィジェットを削除していきます。

デフォルトでは「フッター上部」にウィジェットが設定されていますが、念の為上から確認していきます。

一番下の「使用停止中のウィジェット」はすでに機能が停止されているので、削除しなくてOKです。

ホームページ設定

ブログサイトを作りたい場合は、デフォルトのまま(最新の投稿にチェック)でもOKです。

ここまで設定できたら、一度サイトを確認してみましょう！！

Lightningデザイン設定

次はいよいよデザインの設定に入ります。

ここからはページ数やどういった構成でホームページを作るか、どう見せたらホームページを訪問するユーザーが見やすくわかりやすいデザインを作れるか、というところでも変わってきます。

パターンはたくさんありますが、まずは同じように作ってみてください。

ヘッダーロゴ画像

キーカラー

次はホームページのキーカラーを設定します。お好きな色で結構ですが、ここではロゴに合わせて「#DB6496」のカラーを使用します。

ロゴが決まっていれば、ロゴのカラーに合わせるのが一番簡単で全体のイメージも整います。

最後に必ず を押してくださいね！

Lightningレイアウト設定

ここではホームページ全体のレイアウトを決めていきます。細かいレイアウトは各ページを作る時に好きなように作れるのですが、トップページは2カラム、固定ページは1カラム、みたいな感じで決めておけます。

カラムとは、簡単にいうと「列」です。

本文があって、サイドにプロフィールやアーカイブページが表示されているイメージですね。基本的には全て1カラムでOKです。

Lightningスライダー設定

トップページの一番上の画像を、ここで設定していきます。

トップページの画像だから、さっき作った固定ページの「HOME」を編集するんじゃないの？と思われるかもしれませんが、Lightningではこのスライダー設定でトップ画像を表示しています。

テーマによっても変わりますが、だいたいこのパターンが多いように思います。

画像がある方はそちらを使用していただいても良いですが、画像推奨サイズは1900 × 600px。

先ほどのロゴと同じく、Canvaなどで同等サイズの画像をダウンロードするか、お持ちの写真を横長に切り取りしてもらってもOKです。

とりあえずのものでOKな方は、サンプル画像をダウンロードしてください。（サンプル画像は1900 × 800pxで制作しています）

トップページのデザインを作る

いよいよトップページのコンテンツを組み立てていきます。

今回はサロンの紹介・サービスメニュー・ブログの3つのコンテンツで構成していきます。

その前に、固定ページの編集画面への行き方を2通り解説しておきます！

固定ページの編集

次にデザインを作っていきますが、「ホームページを作ろう！」と思ってすぐに制作に入れるわけではありません。

• 掲載内容をリストアップ
• 構成を考える
• 色味やレイアウトなどのデザインを決定
• 画像や素材、文章を用意する

などなど、順番は前後しますがホームページ制作の工程は想像以上にたくさんあります。

ユーザーにとって見やすく使いやすい構造になっているかも重要です。
とはいえ、最初からいろいろ書いてしまうと何から手をつけて良いか分かりませんね。。

実際に自分のホームページを作る時は、最低でも何を掲載したいか、くらいは最初に考えておきましょう！

ここではサンプルサイトのデザインで作っていきますので、同じように進めてみてください。

カラムを追加する

2カラムのブロックを作る→右：画像を追加→左：見出しとテキストと追加→ボタン追加

ボタン（リンク）を追加する

見出し→3カラムブロック→それぞれに画像・見出し・テキストを追加

画像を追加する

---

ブログを固定ページに表示させる

＊ここからちょっとだけ音量が大きくなります。ご注意ください。

設定

• 投稿コンテンツ設定
• アイキャッチ表示
• 画像の位置
• 項目数

---

ブログの内容は、ダッシュボード＞投稿＞編集から、画像や文字を追加してみてください。

固定ページも投稿ページも編集の仕方全く同じです。今までの内容と以下の記事を参考にしながら、編集してみましょう。

ここまできたらあと一歩！

最後はお問い合わせフォームを設定→固定ページの「お問い合わせ」に表示します。

ここでは詳しいことは説明せず、プラグイン（拡張機能）を追加するだけなので簡単です！

お問い合わせフォームの設置

お問い合わせフォームはプラグインを追加して作成していきます。

プラグインとは拡張機能のことで、WordPressに「予約システム」や「会員システム」「ページ複製機能」など、さまざまな便利機能をつけることができます。

数えたらキリがないので、ここでは必要なお問い合わせフォームのプラグイン「Contact Form7」についてのみ解説いたします。

Contact Form7

固定ページにお問い合わせフォームを設置

「Contact Form7」プラグインを追加しただけでは、どのページにも表示されていないので、お問い合わせフォームは機能しません。

そこで、お問い合わせフォームを設置したい固定ページを編集する必要があります。

どのページにも表示可能ですが、ここでは、さきほど固定ページで作った「お問い合わせ」ページに設置していきましょう。

固定ページを編集

この画像に音声はありません。

ここでは、デフォルトで用意されていた「コンタクトフォーム1」を表示したのみですが、フォームの入力項目はいくらでも編集で増やせます。

また、ユーザーや管理者への自動返信メールも自由に変更できます。

基礎的な専門知識が必要ですので、このWordPress講座では深く触れませんが、後のStepでどういった構造になっているのかを解説します。

基礎的な専門知識、といっても、お問い合わせフォームを編集するくらいなら、1から勉強する必要はありません。

ほんの少し構造を理解すれば、元あったコードのコピペ修正や追加くらいはできるようになります。

もし興味がある方は「HTML」や「CSS」についても調べてみてくださいね！

トップページのボタンからコンタクトフォームにアクセスできるようにする

先ほど固定ページの「HOME」に「お問い合わせ」というボタンを作りました。

ここからも「お問い合わせ」ページに飛べるよう、リンクをつけておきます。

コンタクトフォームのURLをコピーし、トップページのお問い合わせボタンに貼り付けます。