COURSECONTACTサイト作成マニュアル【FirstStep】WordPressの簡単サイト作成マニュアル<全7ステップ>Reira2018-06-21『後は記事を書くだけ!』の状態まで、誰でも簡単に出来るサイト作成マニュアルです。WordPressインストール後の初期設定完了後からの、サイト作成のステップを順を追って分かりやすく紹介していきますヾ(๑╹◡╹)ノ”●ワードプレスのインストールがまだの方は、先にこちらを参考にして下さい。SSL化までの全5ステップ!...●ワードプレスのインストールしただけの状態で、初期設定がまだの方はこちらを参考にして下さい。h...WordPress簡単サイト作成7ステップ基本的なサイトの構成サイトの全体像を考よう!→Clickカテゴリーを作成しよう!→Click固定ページで必要なページを作成しよう!→Clickメニューを設定しよう!→Clickウィジェットの設定をしよう!→Clickデザインのカスタマイズをしよう→Click記事を投稿してみよう!→Click目次の中から見たいステップの『Click』をクリックするとスクロールします。・基本的なサイトの構成サイトの作成をする前に基本的なサイトの構成を説明していきます。基本的にサイト名やロゴを表示させる部分グローバルメニューサイトのメニュートップ画像トップページに表示させるメイン画像メインコンテンツサイトのトップページのメインコンテンツサイドバーサイドのコンテンツ(サイド無しが1カラム・サイド1つが2カラム・サイド2つが3カラム)フッターサイトの一番下の部分サイトによって構成(レイアウト)は様々ですが、基本的な部分は上記の表に記載している部分です。自分の作りたいイメージのサイトなどを参考に色々見て、どんな構成(レイアウト)になっているかなど見ておくと分かりやすいと思います。サイトの全体像を考えよう!これからサイトを作成していくのに、一番最初にサイトの全体像を考えていきます。最初に全体像を考えておく事で、次のステップからの作成もスムーズになって時間も短縮出来るので、ある程度の全体像を作成前に考えます。誰でも簡単に出来る方法で、「でも、イメージも何も全然決まってない」なんて方にも、簡単に出来るようにポイントを分けて紹介していくので参考にして下さいヾ(๑╹◡╹)ノ”1サイトの目的・種類を考えるこれから作成するサイトが「何のサイトか」「何のためのサイトか」を、まず考えていきます(╹◡╹)例えばお店のサイトなら基本的に「お店のサービスを伝えるサイト」「集客のためのサイト」という感じになりますね。「何のサイトを、何のために作成するのか」これを最初に決めておくだけでも自然と必要なコンテンツやメニュー構成、カテゴリーなども決めやすくなってくるので、まず考えてみましょう。2どのような情報を入れていくのか考えるこれから作るサイトに、どのような情報(コンテンツ)を入れていくのか考えます。このサイトの目的は『自由に楽しくサイト作成』というテーマで、発信している情報(コンテンツ)には、ワードプレスの情報や、サイトデザインの情報、その他リブランディングサービスのサポート情報(リブランディング紹介・アフターサポート・ワードプレス講座など)を入れてあります。ブログ一つでも日々のブログダイエットブログ子育てブログビジネスブログと、様々にありますよね。「何のサイトを、何のために作成するのか」を、踏まえた上でもサイトに入れていく内容を考えていきます。3サイトの構成を考える全体的なサイトの構成を考えていきます。サイトの枠組み(レイアウト)のようなものですが、本格的なものを考えて作らなくてもいいので、1・2で考えた内容も元に構成を考えていきます。考えるポイントとしては、サイトのメニューサイドバーに入れるコンテンツ(2カラム・3カラムの場合)サイトに入れたいコンテンツこの3点だけでも大丈夫です。どのようなサイトメニュー(グローバルメニュー)にしたいのか?サイドバーには、どのようなコンテンツを入れるのか?サイトにどのようなコンテンツを入れたいか?この辺りをメモなどしておくと便利です。これを踏まえた上でカテゴリーの作成に進みます。カテゴリーを作成しよう!カテゴリーを作成していきます。^カテゴリーとは??カテゴリーとは、サイトの記事のジャンルを分けるためのものです。カテゴリーを効果的に設定する事で、サイトの中を効果的に整理出来るので、SEO効果やサイトの訪問者にとっても見やすく分かりやすくなります。●ジャンル分けは洋服ダンスを仕分けるような感じです。サイトを洋服ダンスに置き換えた時に靴下はここ、肌着はここ、上着はここ、のような感じで、何がどこにあるか直ぐに分かるように整理するためのものです。●カテゴリーは、親カテゴリーに子カテゴリーと階層を作る事も出来ます。靴下(親カテゴリー)の中でも、さらに・くるぶし丈の靴下(子カテゴリー)・膝丈の靴下(子カテゴリー)といったように、さらに細かく分けて探しやすくする事が出来ます。ワードプレスでカテゴリーを作成する方法(親カテゴリー)1ワードプレスの管理画面から投稿より、『カテゴリー』をクリックします。2カテゴリーページが開かれるので、下の画像の赤枠内「新規カテゴリー追加」を使ってカテゴリーを作成していきます。3「名前」にカテゴリー名、「スラッグ」にURLに適した名前を記入して、『新規カテゴリー追加』をクリックします。ハイフンのみが基本使用されます。下の画像のように、カテゴリー名が「ダイエット日記」の場合は、「dietdiary」のように英語表記で内容の分かりやすい物がオススメです。パーマリンクにカテゴリー名を設定している場合、スラッグで使用した表記がURLのカテゴリー部分になります。4カテゴリーを作成していくと、下の画像の赤枠内のようにカテゴリー一覧に表示されます。●「サイトを訪れた方が分かりやすい」という事を意識して、必要なカテゴリーを設定していきましょう。●パーマリンクにカテゴリーを設定している場合、後からカテゴリーを変えるとURLが変わってしまいます。記事ごとのカテゴリーの設定修正が必要になる事もあるため、適当にカテゴリーを作成してしまうと後で大変な事もあるので、サイトにあったカテゴリーを作成していきましょう。次に子カテゴリーの作成方法です。画像赤枠内『親カテゴリー』をクリックしてプルダウンメニューで、カテゴリー一覧を表示させます。親カテゴリーに設定したいカテゴリー名を選んで、設定したら『新規カテゴリーを追加』をクリックして完了です。2子カテゴリーが追加されると、下の画像のように親カテゴリーに対して子カテゴリーが設定された状態で表示されます。3子カテゴリーに対して、さらに階層を深めて『子子カテゴリー(孫カテゴリー)』を作成していく事も出来ます。子カテゴリーの作成と同じように、親カテゴリーに指定したカテゴリー名の下の階層のカテゴリー(子カテゴリー)として設定されていきます。4下の画像のように、子カテゴリーのさらに下の階層に設定されます。子カテゴリーの階層は、何階層でも深くして作成出来ますが、サイト訪問者が混乱してしまったり分かりにくくなってしまいます。それ以上の階層が必要になってしまう場合は、分かりやすいカテゴリー名やカテゴリー分けを意識して作成しましょう。カテゴリーの修正方法1修正したいカテゴリー名にカーソルを合わせるとメニューが表示されます。『クイック編集』をクリックすると、カテゴリー名と、スラッグを簡単に編集する事が出来ます。修正が出来たら『カテゴリーを更新』で完了です。2修正したいカテゴリー名にカーソルを合わせて『編集』をクリックすると、クイック編集よりも、詳細を編集することが出来ます。テーマにとって編集項目が、さらに設定できるものもあります。記事のカテゴリーの設定方法カテゴリーを記事に設定する方法です。後ほど「Step8の記事の投稿をしてみよう」でも紹介するので、簡単に説明していきます。1WordPressの管理画面から投稿より、『新規追加』または『カテゴリーを設定したい記事』クリックします。2記事の編集画面が開かれるので、下の画像の赤枠内『カテゴリー』の設定項目より、設定したいカテゴリーを選択します。3設定したいカテゴリーにチェックを入れる設定が出来ます。カテゴリーは複数チェックを入れることが出来ますが、設定するカテゴリーは1つがSEO的にも推奨されています。固定ページを作成しよう!必要な固定ページを作成していきます。固定ページとは?固定ページとは、投稿ページ(記事)とは違ってサイトに固定して使用するページです。・お問い合わせなどの1つのページとして独立して使うページです。固定ページの作成方法WordPress管理画面から、固定ページより『新規追加』をクリックします。『新規固定ページを追加』画面から、固定ページを作成する事ができます。下の画像、赤枠内にタイトルを記入します。お問い合わせページなら「お問い合わせ」「contact」のような、ページ名にもなる部分です。パーマリンクの編集パーマリンクの横『編集』をクリックすると、パーマリンクを編集する事が出来ます。パーマリンクの設定によっては、編集できない事もあります。パーマリンクの詳細は、こちらの記事のStep2のパーマリンクの設定に詳細があります。(クリックすると記事内Step2に飛びますので、パーマリンクの設定まで読み進めてください。下の画像、赤枠内に本文を記入します。こちらのツールバーのメニューから、本文の装飾が出来ます。カーソルを合わせると『太字』『番号付きリスト』など、名前が表示されます。試しながら慣れていきましょう。再度クリックする事で、効果の無効化が出来ます。装飾のツールバーは、テーマやプラグインの追加によってその他装飾アイコンが追加されたり、その他効果を適用したりする事ができます。使用方法は基本的に同じです。プラグインやテーマによってマニュアルもあるので、確認しながら操作に慣れていきましょう。本文の記入方法には『ビジュアル』と『テキスト』があります。『テキスト』はHTMLエディタでの記入になります。『ビジュアル』で記入する事で、ほぼ投稿される見た目のままで確認しながら編集出来るので、『ビジュアル』で基本編集して細かい修正の必要な部分を『テキスト』で編集するのがオススメです。『メディアを追加』から画像・動画・音声ファイルを本文中に表示させる事が出来ます。挿入したい位置をクリックして選択した状態で、『メディアを追加』をクリックしてファイルを選択して『投稿に挿入』する事で、指定した位置に挿入されます。『表示オプション』をクリックすると、各種設定が出来ます。こちらもテーマなどにより、表示されるメニューオプションに多少の違いが出る事があります。『固定ページ追加画面』上に、表示されない設定項目などがあった時は『表示オプション』を確認してチェックしてください。固定ページの属性を選択出来ます。テーマにより、「1カラムテンプレート」「2カラムテンプレート」など選択出来る、テンプレートが用意されている事があります、アイキャッチ画像の設定が出来ます。基本的に固定ページでのアイキャッチの設定は必要ない事が多いですが、設定する事で本文の頭に表示されたり、サイト上のアイキャッチ画像として表示される画像を設定する事が出来ます。編集した記事の管理が出来ます。編集して出来た部分までを実際に表示して確認出来ます。一般公開されない状態で保存しておく事が出来ます。ステータス記事の公開・非公開を変更する事が出来ます。公開する公開日を好きな日時に編集をする事が出来ます。記事の作成が出来たら『公開』で一般公開されます。メニューを設定しよう!グローバルメニューの作成をします。テーマによってはフッターメニューなど、その他メニューの作成して設定する事も出来ます。作成の仕方は基本的に同じです。一部テーマによっては違う作成方法もあるので、テーマのマニュアルも参考にしてください。グローバルメニューの作成1WordPress管理画面から、外観より『メニュー』に進みます。メニューページが開かれるので、『新規メニューを作成』をクリックします。2メニュー名に名前を記入して、『メニューを作成』をクリックします。メニュー名は特に決まりはありません。分かりやすい名前を設定しておけば大丈夫です。3メニューに追加する項目を選択できるようになるので、左枠内から設定したい項目にチェックを入れて、『メニューに追加』をクリックするとメニューに設定されます。固定ページ(固定で作成したページ)投稿ページ(投稿で作成したページ)カスタムリンク(リンクさせたいURL)カテゴリー(作成したカテゴリー)の中から選択して、メニューに設定する事が出来ます。5追加したメニューは一覧で表示されます。上からの順番でサイト上に表示されるので、メニューの順番を変えたい場合は順番を変えたい項目をドラッグ&ドロップで動かして、順番を修正していきます。6メニューの設定が出来たら、メニューの位置にチェックを入れて『メニューを保存』をクリックして完了です。メニューの位置にフッターメニューの項目がある場合などは、フッターメニューに設定したいメニューを作成して、フッターメニューにチェックを入れて作成するとフッターメニュを作成する事が出来ます。チェックは複数選択する事も出来ます。サイトを表示させて確認してみると、作成したメニューが設定されています。設定したメニュー項目の中で、修正したい項目の右側▽をクリックすると、編集画面が開かれます。ここで各種メニューの編集が出来ます。階層を指定する事が出来ます削除メニューから削除する事が出来ますメニューの階層は、ドラッグ&ドロップでも設定出来ます。カテゴリー同様、分かりやすいメニュー表示を意識しましょう。ウイジェットの設定をしよう!ワードプレスでは、ウィジェットを使ってサイト上の様々な箇所にコンテンツを追加する事が出来ます。新着記事ランキングバナーカテゴリーなどです。ワードプレスはウィジェットを使って簡単にコンテンツを追加したり、削除したり出来ます。テーマやプラグインの追加によって設定出来る項目や、箇所は違ってきます。ウィジェットの追加・管理1ワードプレス管理画面から外観より、『ウィジェット』に進みます。ウィジェット画面が開かれますので、ここでウィジェットの追加や管理を行います。2左が追加出来るウィジェット一覧、右側が設定出来る場所と設定されているウィジェットが表示されます。ウィジェット画面はドラッグ&ドロップで操作出来ます。サイドバーにウィジェットを設定したい場合は、ドラッグ&ドロップで右側『ブログサイドバー」に追加する事で有効化(表示)されます。無効化(非表示)にしたい場合は、サイドバーよりドラッグ&ドロップで外す事で無効化されます。3追加したいウィジェットをクリックする事で、設定項目が表示されるので追加したい場所を選んで、『ウィジェットを追加』をクリックする事で追加する事もできます。ドラッグ&ドロップか、ウィジェットをクリックして設定項目より編集を行います。4設定したウィジェットをクリックする事で、表示方法やタイトルなど編集する事が出来ます。●ウィジェット画面もメニュー作成画面同様にドラッグ&ドロップで操作可能です。サイドバーに設定したウィジェットの表示順を変更したい場合なども、ドラッグ&ドロップで順番を入れ替えたり直感的に操作出来ます。●デフォルトの状態で設定されているメタ情報は必要ないので、削除しても構いません。デザインのカスタマイズをしよう!ワードプレスはカスタマイズ画面で、簡単にサイトのデザイン等をデザインする事が出来ます。テーマによってカスタマイズ画面の設定項目なども違いますが、どのテーマも基本的にカスタマイズ画面でトップ画像やロゴなど大まかなデザインを簡単に操作出来るようになっています。今回はワードプレスのインストール時にデフォルトで設定されているテーマを参考に操作していきます。カスタマイズ画面での操作1ワードプレス管理画面、外観より『カスタマイズ』に進みます。2カスタマイズ画面が開かれるので、実際にサイトのデザインを見ながら操作していく事が出来ます。下の画像の赤枠内の項目が、このテーマでのカスタマイズ画面で操作可能な設定項目です。案内に従ってカスタマイズしていきます。4カスタマイズが完了したら、歯車のマークで公開状況を設定できます。『公開』をクリックする事で、サイトにカスタマイズが反映されて一般公開されます。5下の各デバイスのアイコンをクリックすると、各デバイスでの表示を確認する事が出来ます。6先ほどのデフォルトの状態から、『トップ画像』『ロゴ』『サイトカラー』を変えるだけでも、サイトデザインのイメージは変わります。テーマに合わせた設定項目で簡単にサイトのデザインをカスタマイズしていきましょう。^操作に慣れてきたらもっとカスタマイズしたり、プラグインを使って機能を追加したりドンドン自分好みのサイトに育てていきましょう。最後に記事の投稿を行なっていきます。記事を投稿してみよう!記事の投稿は、固定ページと操作方法は同じです。記事の作成ワードプレス管理画面から、投稿より『新規追加』に進みます。新規投稿を追加画面が開かれるので、固定ページと同様に記入していきます。●カテゴリー(選択は1つ推奨)●アイキャッチ(基本的にサイトの記事一覧・記事の頭に表示される画像)●その他、記事の設定項目(テーマによって項目も違います)そして、『プレビュー』で実際の表示を確認・『公開』でサイトにアップされて反映されます。記事の作成について記事の装飾に便利なプラグインや、テーマによっても機能が付いてる物もあります。●ビジュアル・テキストエディターの使い方など、記事一つでも操作方法に慣れてきたらドンドン取り入れると便利だったり効果的なポイントもたくさんあるので、他の記事も参考にしてみてください。以上でStep1〜Step7までは全て終了です!お疲れ様でしたヾ(๑╹◡╹)ノ”今回ワードプレスのインストール前の準備から、記事を書くだけまでのサイト作成方法を3つの記事にまとめました。これから始める方に向けたマニュアルなので、簡単な説明で必要なポイントのみをまとめている所もあります。講座、サポートコンサルティング●代官山の大手広告デザイン会社との提携を視野に入れたWeb部署の立ち上げサポートRe-Brandingのレベルアップと合わせて、Design×Brandingを軸に活動させて頂いてます。