『後は記事を書くだけ！』の状態まで、誰でも簡単に出来るサイト作成マニュアルです。
WordPressインストール後の初期設定完了後からの、サイト作成のステップを順を追って分かりやすく紹介していきますヾ(๑╹◡╹)ﾉ”
●ワードプレスのインストールがまだの方は、先にこちらを参考にして下さい。
[sitecard subtitle=関連記事 url=https://estellamariss.com/preparation/986/]●ワードプレスのインストールしただけの状態で、初期設定がまだの方はこちらを参考にして下さい。
[sitecard subtitle=関連記事 url=https://estellamariss.com/preparation/1072/]
WordPress簡単サイト作成７ステップ
- 基本的なサイトの構成
- サイトの全体像を考よう！→Click
- カテゴリーを作成しよう！→Click
- 固定ページで必要なページを作成しよう！→Click
- メニューを設定しよう！→Click
- ウィジェットの設定をしよう！→Click
- デザインのカスタマイズをしよう→Click
- 記事を投稿してみよう！→Click
目次の中から見たいステップの『Click』をクリックするとスクロールします。
基本的なサイトの構成
サイトの作成をする前に基本的なサイトの構成を説明していきます。
各種サイトの部分の名前を頭に入れておいてもらえたらと思います^ ^
| ヘッダー | 基本的にサイト名やロゴを表示させる部分 |
|---|---|
| グローバルメニュー | サイトのメニュー |
| トップ画像 | トップページに表示させるメイン画像 |
| メインコンテンツ | サイトのトップページのメインコンテンツ |
| サイドバー | サイドのコンテンツ（サイド無しが１カラム・サイド１つが２カラム・サイド２つが３カラム） |
| フッター | サイトの一番下の部分 |
サイトによって構成（レイアウト）は様々ですが、基本的な部分は上記の表に記載している部分です。
自分の作りたいイメージのサイトなどを参考に色々見て、どんな構成（レイアウト）になっているかなど見ておくと分かりやすいと思います。
では早速サイトの作成に進みたいと思いますヾ(๑╹◡╹)ﾉ”
Step１ サイトの全体像を考えよう！
これからサイトを作成していくのに、一番最初にサイトの全体像を考えていきます。
最初に全体像を考えておく事で、次のステップからの作成もスムーズになって時間も短縮出来るので、ある程度の全体像を作成前に考えます。
例えばお仕事で依頼を受ける時など、先にサイトの枠組みを作ったりするのですが、
誰でも簡単に出来る方法で、「でも、イメージも何も全然決まってない」なんて方にも、簡単に出来るようにポイントを分けて紹介していくので参考にして下さいヾ(๑╹◡╹)ﾉ”
①サイトの目的・種類を考える
これから作成するサイトが「何のサイトか」「何のためのサイトか」を、まず考えていきます（╹◡╹）
例えばお店のサイトなら基本的に「お店のサービスを伝えるサイト」「集客のためのサイト」という感じになりますね。
「何のサイトを、何のために作成するのか」
これを最初に決めておくだけでも自然と必要なコンテンツやメニュー構成、カテゴリーなども決めやすくなってくるので、まず考えてみましょう。
②どのような情報を入れていくのか考える
これから作るサイトに、どのような情報（コンテンツ）を入れていくのか考えます。
例えばこのサイトの目的は『自由に楽しくサイト作成』というテーマで、発信している情報（コンテンツ）には、ワードプレスの情報や、サイトデザインの情報、その他リブランディングサービスのサポート情報（リブランディング紹介・アフターサポート・ワードプレス講座など）を入れてあります。
ブログ一つでも
- 日々のブログ
- ダイエットブログ
- 子育てブログ
- ビジネスブログ
と、様々にありますよね。
その中でも例えであげると、
『ダイエットブログ』
- 毎日のダイエット記録記事（毎日更新ブログ）
- オススメダイエット紹介（様々な方法を紹介）
- オススメダイエットグッズ（アフィリエイト）
- ダイエット豆知識
のように、ダイエットブログ一つでもサイトに入れていく情報（コンテンツ）は、自分の作りたいサイトによっても（どのように何を発信していきたいのか）違うので、
「何のサイトを、何のために作成するのか」
を、踏まえた上でもサイトに入れていく内容を考えていきます。
③サイトの構成を考える
全体的なサイトの構成を考えていきます。
サイトの枠組み（レイアウト）のようなものですが、本格的なものを考えて作らなくてもいいので、①・②で考えた内容も元に構成を考えていきます。
考えるポイントとしては、
- サイトのメニュー
- サイドバーに入れるコンテンツ(2カラム・３カラムの場合）
- サイトに入れたいコンテンツ
この３点だけでも大丈夫です。
どのようなサイトメニュー（グローバルメニュー）にしたいのか？
サイドバーには、どのようなコンテンツを入れるのか？
サイトにどのようなコンテンツを入れたいか？
この辺りをメモなどしておくと便利です。
では、これを踏まえた上でカテゴリーの作成に進みます。
Step２ カテゴリーを作成しよう！
カテゴリーを作成していきます。
後から追加も出来ますが、ある程度決められる部分は先に入れておくとスムーズです^ ^
カテゴリーとは？？
カテゴリーとは、サイトの記事のジャンルを分けるためのものです。
カテゴリーを効果的に設定する事で、サイトの中を効果的に整理出来るので、
SEO効果やサイトの訪問者にとっても見やすく分かりやすくなります。
●ジャンル分けは洋服ダンスを仕分けるような感じです。
サイトを洋服ダンスに置き換えた時に
靴下はここ、肌着はここ、上着はここ、
のような感じで、何がどこにあるか直ぐに分かるように整理するためのものです。
●カテゴリーは、親カテゴリーに子カテゴリーと階層を作る事も出来ます。
靴下（親カテゴリー）の中でも、さらに
・くるぶし丈の靴下（子カテゴリー）
・膝丈の靴下（子カテゴリー）
といったように、さらに細かく分けて探しやすくする事が出来ます。
ワードプレスでカテゴリーを作成する方法（親カテゴリー）
①ワードプレスの管理画面から投稿より、『カテゴリー』をクリックします。
②カテゴリーページが開かれるので、下の画像の赤枠内「新規カテゴリー追加」を使ってカテゴリーを作成していきます。
③「名前」にカテゴリー名、「スラッグ」にURLに適した名前を記入して、『新規カテゴリー追加』をクリックします。
スラッグはURLに適した半角小文字・英数字とハイフンのみが基本使用されます。
下の画像のように、カテゴリー名が「ダイエット日記」の場合は、「dietdiary」のように英語表記で内容の分かりやすい物がオススメです。
パーマリンクにカテゴリー名を設定している場合、スラッグで使用した表記がURLのカテゴリー部分になります。
④カテゴリーを作成していくと、下の画像の赤枠内のようにカテゴリー一覧に表示されます。
●「サイトを訪れた方が分かりやすい」という事を意識して、必要なカテゴリーを設定していきましょう。
●パーマリンクにカテゴリーを設定している場合、後からカテゴリーを変えるとURLが変わってしまいます。
記事ごとのカテゴリーの設定修正が必要になる事もあるため、適当にカテゴリーを作成してしまうと後で大変な事もあるので、サイトにあったカテゴリーを作成していきましょう。
子カテゴリーを作成する方法
次に子カテゴリーの作成方法です。
①先ほどと同じように、新規カテゴリーを追加にカテゴリー名とスラッグを記入して、
画像赤枠内『親カテゴリー』をクリックしてプルダウンメニューで、カテゴリー一覧を表示させます。
親カテゴリーに設定したいカテゴリー名を選んで、設定したら『新規カテゴリーを追加』をクリックして完了です。
②子カテゴリーが追加されると、下の画像のように親カテゴリーに対して子カテゴリーが設定された状態で表示されます。
③子カテゴリーに対して、さらに階層を深めて『子子カテゴリー（孫カテゴリー）』を作成していく事も出来ます。
子カテゴリーの作成と同じように、親カテゴリーに指定したカテゴリー名の下の階層のカテゴリー（子カテゴリー）として設定されていきます。
④下の画像のように、子カテゴリーのさらに下の階層に設定されます。
子カテゴリーの階層は、何階層でも深くして作成出来ますが、サイト訪問者が混乱してしまったり分かりにくくなってしまいます。
理想は２階層です。
それ以上の階層が必要になってしまう場合は、分かりやすいカテゴリー名やカテゴリー分けを意識して作成しましょう。
カテゴリーの修正方法
①修正したいカテゴリー名にカーソルを合わせるとメニューが表示されます。
まず『クイック編集』をクリックすると、
カテゴリー名と、スラッグを簡単に編集する事が出来ます。
修正が出来たら『カテゴリーを更新』で完了です。
②修正したいカテゴリー名にカーソルを合わせて『編集』をクリックすると、
クイック編集よりも、詳細を編集することが出来ます。
テーマにとって編集項目が、さらに設定できるものもあります。
記事のカテゴリーの設定方法
カテゴリーを記事に設定する方法です。
後ほど「Step８の記事の投稿をしてみよう」でも紹介するので、簡単に説明していきます。
①WordPressの管理画面から投稿より、『新規追加』または『カテゴリーを設定したい記事』クリックします。
②記事の編集画面が開かれるので、下の画像の赤枠内『カテゴリー』の設定項目より、設定したいカテゴリーを選択します。
③設定したいカテゴリーにチェックを入れる設定が出来ます。
カテゴリーは複数チェックを入れることが出来ますが、設定するカテゴリーは１つがSEO的にも推奨されています。
以上で「Step２カテゴリーを作成しよう！」は完了ですヾ(๑╹◡╹)ﾉ”
Step３ 固定ページを作成しよう！
必要な固定ページを作成していきます。
固定ページとは、投稿ページ（記事）とは違って
サイトに固定して使用するページです。
例えば、
・コンセプト
・プロフィール
・利用規約
・お問い合わせ
などの１つのページとして独立して使うページです。
固定ページの作成方法
WordPress管理画面から、固定ページより『新規追加』をクリックします。
『新規固定ページを追加』画面から、固定ページを作成する事ができます。
タイトルの記入
下の画像、赤枠内にタイトルを記入します。
お問い合わせページなら「お問い合わせ」「contact」のような、ページ名にもなる部分です。
パーマリンクの編集
パーマリンクの横『編集』をクリックすると、パーマリンクを編集する事が出来ます。
パーマリンクの設定によっては、編集できない事もあります。
パーマリンクの詳細は、こちらの記事のStep２のパーマリンクの設定に詳細があります。
（クリックすると記事内Step２に飛びますので、パーマリンクの設定まで読み進めてください。）
本文の編集
下の画像、赤枠内に本文を記入します。
こちらのツールバーのメニューから、本文の装飾が出来ます。
カーソルを合わせると『太字』『番号付きリスト』など、名前が表示されます。
最初は慣れないかもしれませんが、名前の通りの装飾が出来るので、
色々少しずつ試しながら慣れていきましょう。
装飾を適用したい部分をドラッグして指定、またはこれから記入したい位置をクリックして指定した状態で、
使用したいアイコンをクリックする事で、効果の適用
再度クリックする事で、効果の無効化が出来ます。
装飾のツールバーは、テーマやプラグインの追加によって
その他装飾アイコンが追加されたり、その他効果を適用したりする事ができます。
使用方法は基本的に同じです。
プラグインやテーマによってマニュアルもあるので、確認しながら操作に慣れていきましょう。
本文の記入方法には『ビジュアル』と『テキスト』があります。
『ビジュアル』はHTMLの知識が少ない方
『テキスト』はHTMLエディタでの記入になります。
『ビジュアル』で記入する事で、ほぼ投稿される見た目のままで確認しながら編集出来るので、『ビジュアル』で基本編集して細かい修正の必要な部分を『テキスト』で編集するのがオススメです。
『メディアを追加』から画像・動画・音声ファイルを本文中に表示させる事が出来ます。
挿入したい位置をクリックして選択した状態で、『メディアを追加』をクリックしてファイルを選択して『投稿に挿入』する事で、指定した位置に挿入されます。
固定ページの、その他設定
『表示オプション』をクリックすると、各種設定が出来ます。
こちらもテーマなどにより、表示されるメニューオプションに多少の違いが出る事があります。
『固定ページ追加画面』上に、表示されない設定項目などがあった時は『表示オプション』を確認してチェックしてください。
固定ページの属性を選択出来ます。
テーマにより、「１カラムテンプレート」「２カラムテンプレート」など選択出来る、テンプレートが用意されている事があります、
アイキャッチ画像の設定が出来ます。
基本的に固定ページでのアイキャッチの設定は必要ない事が多いですが、設定する事で本文の頭に表示されたり、サイト上のアイキャッチ画像として表示される画像を設定する事が出来ます。
編集した固定ページの管理
編集した記事の管理が出来ます。
| プレビュー | 編集して出来た部分までを実際に表示して確認出来ます。 |
|---|---|
| 下書きとして保存 | 一般公開されない状態で保存しておく事が出来ます。 |
| ステータス | 記事の公開・非公開を変更する事が出来ます。 |
| すぐに公開する | 公開日を好きな日時に編集をする事が出来ます。 |
| 公開 | 記事の作成が出来たら『公開』で一般公開されます。 |
以上で、Step３固定ページを作成しよう！は完了ですヾ(๑╹◡╹)ﾉ”
Step４ メニューを設定しよう！
グローバルメニューの作成をします。
テーマによってはフッターメニューなど、その他メニューの作成して設定する事も出来ます。
作成の仕方は基本的に同じです。
一部テーマによっては違う作成方法もあるので、テーマのマニュアルも参考にしてください。
グローバルメニューの作成
①WordPress管理画面から、外観より『メニュー』に進みます。
メニューページが開かれるので、『新規メニューを作成』をクリックします。
②メニュー名に名前を記入して、『メニューを作成』をクリックします。
メニュー名は特に決まりはありません。
分かりやすい名前を設定しておけば大丈夫です。
③メニューに追加する項目を選択できるようになるので、左枠内から設定したい項目にチェックを入れて、『メニューに追加』をクリックするとメニューに設定されます。
④メニューに追加出来る項目は、
- 固定ページ（固定で作成したページ）
- 投稿ページ（投稿で作成したページ）
- カスタムリンク（リンクさせたいURL）
- カテゴリー（作成したカテゴリー）
の中から選択して、メニューに設定する事が出来ます。
⑤追加したメニューは一覧で表示されます。
上からの順番でサイト上に表示されるので、メニューの順番を変えたい場合は順番を変えたい項目をドラッグ&ドロップで動かして、順番を修正していきます。
⑥メニューの設定が出来たら、メニューの位置にチェックを入れて『メニューを保存』をクリックして完了です。
メニューの位置にフッターメニューの項目がある場合などは、フッターメニューに設定したいメニューを作成して、フッターメニューにチェックを入れて作成するとフッターメニュを作成する事が出来ます。
チェックは複数選択する事も出来ます。
サイトを表示させて確認してみると、作成したメニューが設定されています。
細かい設定・修正
設定したメニュー項目の中で、修正したい項目の右側▽をクリックすると、編集画面が開かれます。
ここで各種メニューの編集が出来ます。
| ナビがーションラベル | サイト上のメニューに表示させたい名前 |
|---|---|
| 移動 | 階層を指定する事が出来ます |
| 削除 | メニューから削除する事が出来ます |
メニューの階層は、ドラッグ&ドロップでも設定出来ます。
カテゴリー同様、分かりやすいメニュー表示を意識しましょう。
以上で、Step４メニューを作成しよう！は完了ですヾ(๑╹◡╹)ﾉ”
Step５ ウイジェットの設定をしよう！
ワードプレスでは、ウィジェットを使ってサイト上の様々な箇所にコンテンツを追加する事が出来ます。
基本的に良く見る分かりやすい物は、サイドバー設定されている
- 検索
- 新着記事
- ランキング
- バナー
- カテゴリー
などです。
ワードプレスはウィジェットを使って簡単にコンテンツを追加したり、削除したり出来ます。
テーマやプラグインの追加によって設定出来る項目や、箇所は違ってきます。
ウィジェットの追加・管理
①ワードプレス管理画面から外観より、『ウィジェット』に進みます。
ウィジェット画面が開かれますので、ここでウィジェットの追加や管理を行います。
②左が追加出来るウィジェット一覧、右側が設定出来る場所と設定されているウィジェットが表示されます。
ウィジェット画面はドラッグ&ドロップで操作出来ます。
例えばサイドバーにウィジェットを設定したい場合は、ドラッグ&ドロップで右側『ブログサイドバー」に追加する事で有効化（表示）されます。
無効化（非表示）にしたい場合は、サイドバーよりドラッグ&ドロップで外す事で無効化されます。
③追加したいウィジェットをクリックする事で、設定項目が表示されるので追加したい場所を選んで、『ウィジェットを追加』をクリックする事で追加する事もできます。
ドラッグ&ドロップか、ウィジェットをクリックして設定項目より編集を行います。
④設定したウィジェットをクリックする事で、表示方法やタイトルなど編集する事が出来ます。
●ウィジェット画面もメニュー作成画面同様にドラッグ&ドロップで操作可能です。
サイドバーに設定したウィジェットの表示順を変更したい場合なども、ドラッグ&ドロップで順番を入れ替えたり直感的に操作出来ます。
●デフォルトの状態で設定されているメタ情報は必要ないので、削除しても構いません。
以上でStep５ ウィジェットの設定をしよう！は完了ですヾ(๑╹◡╹)ﾉ”
Step６ デザインのカスタマイズをしよう！
ワードプレスはカスタマイズ画面で、簡単にサイトのデザイン等をデザインする事が出来ます。
テーマによってカスタマイズ画面の設定項目なども違いますが、どのテーマも基本的にカスタマイズ画面でトップ画像やロゴなど大まかなデザインを簡単に操作出来るようになっています。
今回はワードプレスのインストール時にデフォルトで設定されているテーマを参考に操作していきます。
カスタマイズ画面での操作
①ワードプレス管理画面、外観より『カスタマイズ』に進みます。
②カスタマイズ画面が開かれるので、実際にサイトのデザインを見ながら操作していく事が出来ます。
下の画像の赤枠内の項目が、このテーマでのカスタマイズ画面で操作可能な設定項目です。
③操作したい設定項目をクリックすると、編集画面が開かれます。
各項目、編集画面の案内に従ってカスタマイズしていきます。
④カスタマイズが完了したら、歯車のマークで公開状況を設定できます。
『公開』をクリックする事で、サイトにカスタマイズが反映されて一般公開されます。
⑤下の各デバイスのアイコンをクリックすると、各デバイスでの表示を確認する事が出来ます。
⑥先ほどのデフォルトの状態から、『トップ画像』『ロゴ』『サイトカラー』を変えるだけでも、サイトデザインのイメージは変わります。
テーマに合わせた設定項目で簡単にサイトのデザインをカスタマイズしていきましょう。
以上で、Step６ デザインのカスタマイズをしよう！は完了ですヾ(๑╹◡╹)ﾉ”
ここまで出来たらサイトのデザインや構成は、必要最低限に出来ている状態です^ ^
操作に慣れてきたらもっとカスタマイズしたり、プラグインを使って機能を追加したりドンドン自分好みのサイトに育てていきましょう。
最後に記事の投稿を行なっていきます。
Step７ 記事を投稿してみよう！
記事の投稿は、固定ページと操作方法は同じです。
記事の作成
ワードプレス管理画面から、投稿より『新規追加』に進みます。
新規投稿を追加画面が開かれるので、固定ページと同様に記入していきます。
●タイトル
●パーマリンク（パーマリンクの設定により）
●本文
●カテゴリー（選択は１つ推奨）
●アイキャッチ（基本的にサイトの記事一覧・記事の頭に表示される画像）
●その他、記事の設定項目（テーマによって項目も違います）
そして、『プレビュー』で実際の表示を確認・『公開』でサイトにアップされて反映されます。
記事の作成について
記事の装飾に便利なプラグインや、テーマによっても機能が付いてる物もあります。
●プラグインを使った記事の装飾
●適切な本文の文章作成
●テーマによっての各項目設定
●ビジュアル・テキストエディターの使い方
など、記事一つでも操作方法に慣れてきたらドンドン取り入れると便利だったり効果的なポイントもたくさんあるので、他の記事も参考にしてみてください。
以上でStep１〜Step７までは全て終了です！お疲れ様でしたヾ(๑╹◡╹)ﾉ”
今回ワードプレスのインストール前の準備から、記事を書くだけまでのサイト作成方法を３つの記事にまとめました。
これから始める方に向けたマニュアルなので、簡単な説明で必要なポイントのみをまとめている所もあります。
『まずは慣れる』事が大事なので、難しく考えずに記事を見ながら流れにそって操作していき、慣れてきたらその他プラグインの記事やデザインの記事など参考に自分のサイトを育てて貰えたら嬉しいですヾ(๑╹◡╹)ﾉ”
