INDEX
目次
前の章に戻る7章 固定ページとサイトカスタマイズ
【7-1】固定ページの基本
固定ページの作成方法
サンプルページを作成していきます！
①【タイトル】サンプルページと入力→画像を追加→【段落】これはサンプルページです。
②【サイドメニューバー】→【固定ページ】→【リンク】sampleと入力。
③【公開】→【固定ページを表示】でレイアウトを確認しましょう！
②【サイドメニューバー】→【固定ページ】→【リンク】sampleと入力。
③【公開】→【固定ページを表示】でレイアウトを確認しましょう！
WordPress 7-1
この動画はデモンストレーション動画になります。
音声は入っておりません。
【7-2】メニューとトップページの作成方法
ヘッダーメニューの作成
①【外観】→【メニュー】→【メニュー名】を「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ページのデザイン変更
全体設定
【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章 固定ページとサイトカスタマイズ】の解説を終わります。
お疲れ様でした！
お疲れ様でした！