ホーム画面の設定って何をすればよいの？どんなデザインにしたら良い？
ホーム画面はブログの顔となる大切なページなので記事公開前にきちんと設定しておきましょう。
この記事では、基本的な「Wordpressホーム画面の設定方法」をご説明していきます。
一つの参考として私がどのようにホーム画面を設定したか、参考とした記事を中心にご紹介していきます。
私のホーム画面はこんな感じのデザインです。
ホーム画面の設定として、こちらでご紹介するのは目次にある通り大きく分けて５つの項目です。
WordPressホーム画面の設定
こちらで紹介するのは、参考例ですので必要に応じて設定していただければと思います。
Cocoon設定でデザインを選ぶ（スキンの選択）
まず最初にブログデザインをどのようなタイプにするか決めましょう。
Cocoonであれば、デザインのパターン（スキン）がいくつかあるので、お好みのデザインを選択するだけで簡単にデザイン設定をすることができます。
ここではデザインの基本となる「スキン設定」だけを行います。細かいカスタマイズはノータッチです。
ダッシュボード画面より「Cocooon設定」＞「スキン」の画面を開いてください。
スキン設定の真ん中あたりに「スキン一覧」が出てきます。
ファイルを開くとデザインを確認できるのでチェックしてみてください。
全体の雰囲気、見出しやボックスのデザインなどが違ってますのでお好みのデザインを選んでください。
デザインが決まったら、選択し左下の「変更をまとめて保存」ボタンを押してください。
これでデザインの設定が完了します。
スキン設定は後から変更することも可能ですが、記事作成後に変更してしまうと文章のバランスや表示が変わってしまうこともあるので、先に決めておいたほうが良いでしょう。
ヘッダー画像の設定
次にヘッダー部分を作成しましょう。カテゴリーを含めた「メニューバーの設定」は後ほど行います。
まずは、ブログタイトルやキャッチフレーズを入れた画像を準備しましょう。
私は写真アプリとペイントを利用して作成しましたが、簡単に作る方法があるようです。
ヘッダー画像の作成方法については以下の記事を参考にしてみてください。
＞＞＞ ブログのオリジナルヘッダーの作り方！画像サイズと設定方法を解説！
画像の作成ができたら、設定を行いましょう。
私のヘッダーは以下のような設定になっています。
✔ ヘッダー背景：こげ茶色
✔ ロゴ画像：タイトル付きの画像
まず、「Coccon設定」＞「ヘッダー」から設定画面を開いてください。
各項目ごとの設定は以下の通りです。
| ヘッダーレイアウト | センターロゴ（デフォルト）を選択 |
| 高さ | ブランクでOK |
| 高さ（モバイル） | ブランクでOK |
| ヘッダーロゴ | 作成した画像を選択ボタンより指定する |
| ヘッダーロゴサイズ | ブランクでOK |
今回はロゴとしてヘッダー画像を設定するので、背景画像やヘッダー文字色は選択していません。ヘッダー全体色だけを選択しましたが、この辺はお好みで。
| キャッチフレーズの配置 | 表示しない |
| ヘッダー背景画像 | 選択しないでOK |
| ヘッダー全体色 | ヘッダー全体の色を選択してください。 |
| ヘッダー全体文字色 | 選択しないでOK |
「グローバルナビメニュー幅」は未記入であればデフォルト幅になります。プレビューで確認しながらお好みの幅を設定してみてください。私は以下の幅にしてみました。
（トップメニュー幅：176、サブメニュー幅：240）
最後に「変更をまとめて保存」を押すとヘッダー画像の設定が完了です！
プロフィールの設定
次にプロフィールの設定を行いましょう。
パソコン画面では右側にプロフィールが表示されるようになっています。（選んだスキンによってデザインが異なるようです）
まずは、このプロフィール作成方法についてご説明します。
ダッシュボード画面の「ユーザー」＞「あなたのプロフィール」より設定画面を開いてください。
以下の通り「ツールバー」の項目にチェックをいれてください。
必要に応じてそれぞれの項目を入力してください。
ここでプロフィール情報（自己紹介）を入力してください。
次にプロフィール写真を選択し、設定しましょう。
最後に「プロフィール更新」ボタンを押してください。
これで、プロフィールの設定が完了です！
スマホではサイドバーが表示されないので、別途「サイドバー」ボタンの設定を行います。設定方法は後ほど「メニュバーの設定」で解説します。
フッダーの設定
フッダーには以下の４つの項目を入れました。
✔「ホーム」
✔「プライバシーポリシー」
✔「お問い合わせ」
✔「サイトマップ」
また、一番下に「クレジット表記」として、～はじめのいっぽくらん～＠2019を表示させました。
「クレジット表記」の表示設定は以下の画面より設定しましょう。
ダッシュボード画面の「Cocoon設定」＞「フッダー」より設定画面を開いてください。
フッダー色を選択し、表示タイプを選択します。
表記、フッターメニュー幅を入力します。最後に「変更をまとめて保存」ボタンを押してください。
これでヘッダーの一番下にサイト名等が表示されます。
※私のホーム画面では、こげ茶色の背景に白文字が上手く表示されず、以下の追加設定を行いました。上手く表示されない場合は参考にしてください。
ダッシュボード画面の「外観」＞「カスタマイズ」にてCSSを追加する作業を行います。
「追加CSS」に下記3行のコードをコピペします。
.source-org.copyright {
color: #FFFFFF;
}
これで以下の通り表示されました。
プライバシーポリシーの設定
プライバシーポリシーの設定については、こちらの記事がとても分かりやすいので参考にして作ってみてください。
トップページ（メニューバー）に設置する作業が必要となりますが、後ほど「メニューバーの設定」でご説明します。
お問い合わせフォームの設定
記事を読んだ方からコメントや問い合わせをいただくための「お問合わせのフォーム」を設置しましょう。
設定するには、まずフォーム作成用の「 Contact Form 7 」というプラグインを追加します。
以下の記事を参考にプラグインを追加してみてください。
＞＞＞【簡単】Contact Form 7（WordPressお問い合わせフォーム設置）の使い方徹底解説
細かい設定についても書かれているようですが、プラグインを追加、有効にするだけで他の操作は特に必要なかったと思います。
追加後、 トップページ（メニューバー）に設置する作業が必要となりますが、後ほど「メニューバーの設定」でご説明します。
サイトマップの設定
サイトマップとは、サイト内のページリンクをまとめたページのことです。
検索エンジンと検索ユーザーにそのサイトにどのようなページがあるのかを伝える大切なものです。
インデックススピードやクローラーの回遊性の向上にもつながるのでしっかり設定する必要があります。
サイトマップは「Google XML Sitemaps」のプラグインを追加し、設定すればOKです。
「Google XML Sitemaps」 のプラグインは、記事の公開・更新の度にサイトマップを自動生成してくます。さらに、自動で検索エンジンに通知してくれるので大変便利です。
以下の記事を参考にプラグインを追加してみてください。
トップページ（メニューバー）に設置する方法は次の「メニューバーの設定」でご説明します。
メニューバーの設定
最後に今まで設定してきた各項目をホーム画面のヘッダーとフッターにそれぞれメニューバーとして表示させましょう。
ヘッダーのメニューバーの設定
ヘッダーのメニューバーは上記の白い四角で囲んだ部分です。
ここでは「カテゴリー」と「プロフィール」を設置しました。
※ここで表示されている「プロフィール」は、先ほど作ったプロフィールとは別です。（先ほど作ったプロフィールはパソコン画面右側のサイドバーに表示されてます）
必要な場合のみ「固定ページ」の「新規作成」より、詳しいプロフィールページを新たに作成してください。不要であれば「カテゴリー」だけ設置で良いと思います。
「カテゴリー」の作成については、【超初心者向け】WordPressマニュアル｜記事作成編｜Cocoonユーザー用の記事でご紹介していますので、参考にしていただき作成してみてください。
こちらでは、作成した「カテゴリー」と「プロフィール」をメニューバーに設定してみます。
まず、ダッシュボード画面の「外観」＞「メニュー」より設定画面を開いてください。
①「編集するメニューを選択」で、「カテゴリー（ヘッダーメニュー，ヘッダーモバイル,ヘッダーモバイルボタン）」を選択してください。
②左側の「メニュー項目を追加」というところで「カテゴリー」の項目より表示させたい項目全てにチェックを入れてください。
メニュー構造の「メニュー名」は「カテゴリー」と入力。
③「メニューに追加」ボタンを押すと追加されます。
「プロフィール」の追加は、 左側の「メニュー項目を追加」というところで「固定ページ」の項目より「プロフィール」にチェックを入れて「メニューに追加」ボタンを押してください。
画面下の「メニュー設定」では、以下の3点にチェックを入れて、右下の「メニューを保存」ボタンを押してください。
これで、「ヘッダーのメニューバー」の設定は完了です。
フッダーのメニューバーの設定
フッターでは、「ホーム」「プライバシーポリシー」「お問い合わせ」「サイトマップ」を設置します。
ヘッダー同様に、ダッシュボード画面の「外観」＞「メニュー」より設定画面を開いてください。
上記の通り「新しいメニューを作成しましょう」を選択してください。
上記の通りメニュー名に「フッター」と入力し「メニュー作成」ボタンを押してくだい。 すると以下の画面が開きます。
①編集するメニューを選択のところは「フッター（フッターメニュー）」を選択
（メニュー構造の「メニュー名」は「フッター」と入力。）
②右側の「メニュー項目を追加」というところで「サイトマップ」 「お問い合わせ」「プライバシーポリシー」 の項目にチェックを入れてください。
③「メニューに追加」ボタンを押すと「メニュー構造」のところに追加されます。
※「ホーム」ボタンは、上記の「メニュー項目」に出てきません。
自分で「ホーム」ボタンを作成し「メニューに追加」していく方法で設定します。
こちらは、以下の記事に分かりやすく解説がされていますのでご覧ください。
「ホーム」ボタンの追加が完了したら以下の操作を行ってください。
画面下の「メニュー設定」では「フッターメニュー」ボタンにチェックを入れて、右下の「メニューの保存」ボタンを押してください。
これで、「フッダーのメニューバー」の設定も完了です！
最後にスマホ用のフッターの設定についてご紹介です。
スマホでのメニューバー（フッター）の設定
スマホでのメニュー画面のフッター部分は以下のような設定にしました。
※ スマホ用フッターでは「HOME」と「サイドバー」ボタンを追加で表示させました。
こちらは、以下の記事で分かりやすく解説がされていますのでご覧ください。
「HOME」と「サイドバー」ボタンが作れたら、メニューバーに設定していきます。
ダッシュボード画面の「外観」＞「メニュー」より設定画面を開いてください。
「編集するメニューを選択」で「モバイルフッター（フッターモバイルボタン）」を選択して「HOME」と「サイドバー」とその他必要な項目を追加しましょう。
「メニュー設定」では「フッターモバイルボタン」にチェックを入れて、右下の「メニューを保存」ボタンを押してください。
これで、「スマホ用フッターメニューバー」の設定も完了です。
以上で、ホーム画面での基本的な設定は全て終了です！
ここまで、本当にお疲れさまでした！
次は、いよいよ記事の作成です。
記事作成については以下の記事にまとめましたので、是非参考にしていただければと思います。
コメント