INDEX
目次
前の章に戻る7章 固定ページとサイトカスタマイズ
この章の目安学習時間：70分
この章で到達できるゴール
本章は、単なる記事の集合体から「見やすいWebサイト」へと構造とデザインを整える実践パートです。
以下の状態になれば、この章はクリアとなります。
以下の状態になれば、この章はクリアとなります。
- 作成した固定ページを「トップページ」や「メニュー」に正しく設定し、ユーザーが迷わず回遊できるWebサイトの形を構築できる
- テーマ独自の設定機能（Cocoon設定など）を使って、配色やヘッダーの変更、不要なボタンの非表示などを行い、サイト全体のデザインを自分好みにカスタマイズできる
【7-1】固定ページの基本
目安の学習時間：10分
固定ページの作成方法
サンプルページを作成していきます！
①【タイトル】サンプルページと入力→画像を追加→【段落】これはサンプルページです。
②【サイドメニューバー】→【固定ページ】→【リンク】sampleと入力。
③【公開】→【固定ページを表示】でレイアウトを確認しましょう！
②【サイドメニューバー】→【固定ページ】→【リンク】sampleと入力。
③【公開】→【固定ページを表示】でレイアウトを確認しましょう！
WordPress 7-1
この動画はデモンストレーション動画になります。
音声は入っておりません。
【7-2】メニューとトップページの作成方法
目安の学習時間：30分
ヘッダーメニューの作成
①【外観】→【メニュー】→【メニュー名】を「MENU」と入力→【メニューを保存】
②【メニュー項目を追加】→【固定ページ】→全て選択→【メニューに追加】
③【メニュー設定】で以下の項目にチェックを入れる→【メニューを保存】
・ヘッダーメニュー
・ヘッダーモバイルメニュー
・フッターメニュー
・フッターモバイルボタン
固定ページを開いてヘッダーとフッターに設定したメニューが反映されているか確認しましょう。
②【メニュー項目を追加】→【固定ページ】→全て選択→【メニューに追加】
③【メニュー設定】で以下の項目にチェックを入れる→【メニューを保存】
・ヘッダーメニュー
・ヘッダーモバイルメニュー
・フッターメニュー
・フッターモバイルボタン
固定ページを開いてヘッダーとフッターに設定したメニューが反映されているか確認しましょう。
WordPress 7-2
この動画はデモンストレーション動画になります。
音声は入っておりません。
メニュー項目を追加
今回は固定ページをメニューとして作成しましたが、他にもメニューに追加できるアイテムがたくさんあります！
メニュー項目を追加する手順
1. 「外観」＞「メニュー」を選択
2. 「メニュー項目を追加」セクションを確認
3. 項目種別を選択
a.【投稿】：ブログ記事をメニューに追加できます
b.【カスタムリンク】：URLをリンクに使用できます
c.【カテゴリー】：投稿で作成したカテゴリーをリンクで使用できます。
使用例としては・・・・
【カスタムリンク】：予約ページを別の媒体で管理している場合にURLでリンクさせることが多いです。例えば飲食店の場合予約ページをぐるなび等にリンクさせていたりします。
【カテゴリー】：カテゴリーにお知らせを作成しお知らせを一覧表示させることが可能です。
メニュー項目を追加する手順
1. 「外観」＞「メニュー」を選択
2. 「メニュー項目を追加」セクションを確認
3. 項目種別を選択
a.【投稿】：ブログ記事をメニューに追加できます
b.【カスタムリンク】：URLをリンクに使用できます
c.【カテゴリー】：投稿で作成したカテゴリーをリンクで使用できます。
使用例としては・・・・
【カスタムリンク】：予約ページを別の媒体で管理している場合にURLでリンクさせることが多いです。例えば飲食店の場合予約ページをぐるなび等にリンクさせていたりします。
【カテゴリー】：カテゴリーにお知らせを作成しお知らせを一覧表示させることが可能です。
トップページの設定方法
WordPressではどのページをトップページにするかを自分で決める必要があります。
先ほど作成したサンプルページをこのホームぺージのトップページに設定していきましょう！
【テーマ】→【カスタマイズ】→【ホームページ設定】→固定ページ→【ホームページ】：サンプルページに設定して【公開】をクリックする。
こちらの設定でトップページが先ほど作成したサンプルページへと変更されました。
次はホームページのデザインを修正しましょう。
先ほど作成したサンプルページをこのホームぺージのトップページに設定していきましょう！
【テーマ】→【カスタマイズ】→【ホームページ設定】→固定ページ→【ホームページ】：サンプルページに設定して【公開】をクリックする。
こちらの設定でトップページが先ほど作成したサンプルページへと変更されました。
次はホームページのデザインを修正しましょう。
WordPress 7-3
この動画はデモンストレーション動画になります。
音声は入っておりません。
【7-3】Webページのデザイン変更
目安の学習時間：30分
全体設定
【Cocoon設定】→【全体】→①～⑦をお好きな色やフォントに変更してみてください
①サイトキーカラー→ヘッダーやフッターに反映されます。
②サイトキーテキストカラー→ヘッダーやフッターに反映されます。
③サイトフォント→サイト全体のフォントに反映されます。
④文字色→サイト全体のデフォルトフォントに反映されます。
⑤サイトリンク色→サイト内のリンクテキストに反映されます。
⑥サイト選択文字色→サイト内の文字を選択した際に反映されます。
⑦サイドバーの表示状態→全てのページで非表示にする。
今回は非表示に設定していきましょう！
①サイトキーカラー→ヘッダーやフッターに反映されます。
②サイトキーテキストカラー→ヘッダーやフッターに反映されます。
③サイトフォント→サイト全体のフォントに反映されます。
④文字色→サイト全体のデフォルトフォントに反映されます。
⑤サイトリンク色→サイト内のリンクテキストに反映されます。
⑥サイト選択文字色→サイト内の文字を選択した際に反映されます。
⑦サイドバーの表示状態→全てのページで非表示にする。
今回は非表示に設定していきましょう！
WordPress 7-4
この動画はデモンストレーション動画になります。
音声は入っておりません。
ヘッダーの設定
【Cocoon設定】→【ヘッダー】
①ヘッダーレイアウト→トップメニュー（右寄せ）
②ヘッダーを固定する→チェックを入れる
③キャッチフレーズの配置→表示しない
今回はシンプルなデザイン修正ですがCocoonではロゴに画像を配置したり、ヘッダーの背景やメニューの幅なども細かく設定できます！
①ヘッダーレイアウト→トップメニュー（右寄せ）
②ヘッダーを固定する→チェックを入れる
③キャッチフレーズの配置→表示しない
今回はシンプルなデザイン修正ですがCocoonではロゴに画像を配置したり、ヘッダーの背景やメニューの幅なども細かく設定できます！
WordPress 7-5
この動画はデモンストレーション動画になります。
音声は入っておりません。
SNSシェアボタンの非表示
【Cocoon設定】→【SNSシェア】
①メインカラムトップシェアボタンを表示する→チェックを外す
②シェアボタンを表示するページの切り替え→チェックを外す
③メインカラムボトムシェアボタンを表示する→チェックを外す
【変更をまとめて保存】を押してサイトを確認してみましょう！
①メインカラムトップシェアボタンを表示する→チェックを外す
②シェアボタンを表示するページの切り替え→チェックを外す
③メインカラムボトムシェアボタンを表示する→チェックを外す
【変更をまとめて保存】を押してサイトを確認してみましょう！
WordPress 7-6
この動画はデモンストレーション動画になります。
音声は入っておりません。
SNSフォローの非表示
【Cocoon設定】→【SNSフォロー】
①フォローボタンを表示する→チェックを外す
②フォローボタンを表示するページの切り替え→チェックを外す
③キャッシュを有効にする→チェックを外す
【変更をまとめて保存】を押してサイトを確認してみましょう
①フォローボタンを表示する→チェックを外す
②フォローボタンを表示するページの切り替え→チェックを外す
③キャッシュを有効にする→チェックを外す
【変更をまとめて保存】を押してサイトを確認してみましょう
WordPress 7-7
この動画はデモンストレーション動画になります。
音声は入っておりません。
Cocoonのスキン設定
Cocoonでは「スキン」と呼ばれるデザインの着せ替え機能があり、サイト全体のデザインを簡単に一括変更できます。
簡単にレイアウトの修正ができるので是非活用してみてください！
教材で何度か紹介していますが、デザインの設定はテーマによりできることやダッシュボードの見た目がまったく異なります！今回はCocoonで説明していますが、課題を通していろいろなテーマを試して自分に合うテーマを見つけていきましょう！
簡単にレイアウトの修正ができるので是非活用してみてください！
教材で何度か紹介していますが、デザインの設定はテーマによりできることやダッシュボードの見た目がまったく異なります！今回はCocoonで説明していますが、課題を通していろいろなテーマを試して自分に合うテーマを見つけていきましょう！
WordPress 7-8
この動画はデモンストレーション動画になります。
音声は入っておりません。
第7章 章末問題
目安学習時間：20分
問題
この章で学んだことを用いて「行き来ができるWebサイトの形」(完成見本の形)を作成してください。
第8章からの本格的なサイト制作の前に、この構造作りをマスターしましょう！
わからないところは下にあるヒントを参照してください。
第8章からの本格的なサイト制作の前に、この構造作りをマスターしましょう！
わからないところは下にあるヒントを参照してください。
完成見本
以下の画像のように、「トップページ」「会社概要」「お問い合わせ」の3つのページがあり、メニューから自由に行き来できる状態を目指します。
要件
- 3つの固定ページがあること
- 「ホーム」「会社概要」「お問い合わせ」の3ページを作成してください。（中身は空でOK）
- それぞれのURLスラッグは 「home」「about」「contact」に設定してください。
- ヘッダーメニューがあること
- サイトの上部に上記3つのページが表示されるようにしてください。
- 並び順は左から「ホーム → 会社概要 → お問い合わせ」にしてください。
- トップページが固定されていること
- サイトのトップ（表紙）にアクセスした際、ブログ記事一覧ではなく、作成した「ホーム」が表示されるようにしてください。
ヒント
【STEP 1】 必要な「固定ページ」を作る
まずはサイトに必要な3つのページを作成します。
中身（本文）は空っぽ、または一行程度の文章で構いません。
中身（本文）は空っぽ、または一行程度の文章で構いません。
- 「固定ページ」→「新規固定ページを追加」から、以下の3つのページを作成・公開してください。
- タイトル：ホーム （URLスラッグ：home）
- タイトル：会社概要 （URLスラッグ：about）
- タイトル：お問い合わせ （URLスラッグ：contact）
▼ 正解の状態
固定ページ一覧に、この3つが並んでいればOKです。
【STEP 2】 メニューを作成して表示する
作ったページがサイト上に表示されるよう、メニューを設定します。
この時、「左から順に」きれいに並ぶように並び替えも行いましょう。
この時、「左から順に」きれいに並ぶように並び替えも行いましょう。
- 「外観」→「メニュー」へ移動します。
- 「メニュー名」に「グローバルナビ」などと入力し、メニューを作成します。
- 画面左側の「固定ページ」エリアから、先ほど作った3つのページを選び、「メニューに追加」します。
-
右側の「メニュー構造」に追加されたパネルをマウスでドラッグ（掴んで移動）し、上から以下の順になるように並べ替えてください。
ホーム →会社概要→お問い合わせ
- メニュー設定（画面下部）の「ヘッダーメニュー」にチェックを入れ、「メニューを保存」します。
▼ 正解の状態
【STEP 3】 「ホーム」をトップページに設定する
今のままだと、トップページには「ブログ記事の一覧」が表示されてしまいます。
これを、STEP1で作った「ホーム」という固定ページが表示されるように変更します。
これを、STEP1で作った「ホーム」という固定ページが表示されるように変更します。
- 「外観」→「カスタマイズ」→「ホームページ設定」を開きます。
- 「ホームページの表示」を「固定ページ」に切り替えます。
- 「ホームページ」のプルダウンから、作成した「ホーム」を選択します。
- 「公開」ボタンを押します。
▼ 正解の状態
最終確認
サイトを表示（左上の家マーク）してみてください。
- トップページが「ホーム」の内容になっていますか？
- ヘッダーのメニューをクリックして、それぞれのページに移動できますか？
これができれば、第7章 章末問題は完了です！
これで【7章 固定ページとサイトカスタマイズ】の解説を終わります。
お疲れ様でした！
お疲れ様でした！