【超初心者向け】WordPressマニュアル|ホーム画面設定編|Cocoonユーザー用

ブログ運営
Wordpressマニュアル

ホーム画面の設定って何をすればよいの?どんなデザインにしたら良い?

ぽくらん
ぽくらん

ホーム画面はブログの顔となる大切なページなので記事公開前にきちんと設定しておきましょう。


この記事では、基本的な「Wordpressホーム画面の設定方法」をご説明していきます。

一つの参考として私がどのようにホーム画面を設定したか、参考とした記事を中心にご紹介していきます。


私のホーム画面はこんな感じのデザインです。

はじめのいっぽくらんホーム画面


ホーム画面の設定として、こちらでご紹介するのは目次にある通り大きく分けて5つの項目です。

スポンサーリンク

WordPressホーム画面の設定

パソコンとスマホ

こちらで紹介するのは、参考例ですので必要に応じて設定していただければと思います。

Cocoon設定でデザインを選ぶ(スキンの選択)

まず最初にブログデザインをどのようなタイプにするか決めましょう。

Cocoonであれば、デザインのパターン(スキン)がいくつかあるので、お好みのデザインを選択するだけで簡単にデザイン設定をすることができます。


ぽくらん
ぽくらん

ここではデザインの基本となる「スキン設定」だけを行います。細かいカスタマイズはノータッチです。


ダッシュボード画面より「Cocooon設定」>「スキン」の画面を開いてください。

Cocoonスキン


スキン設定の真ん中あたりに「スキン一覧」が出てきます。

Cocoonスキン一覧


ぽくらん
ぽくらん

ファイルを開くとデザインを確認できるのでチェックしてみてください。


全体の雰囲気、見出しやボックスのデザインなどが違ってますのでお好みのデザインを選んでください。

Cocoonスキン


デザインが決まったら、選択し左下の「変更をまとめて保存」ボタンを押してください。

Cocoonスキン設定画面


これでデザインの設定が完了します。

スキン設定は後から変更することも可能ですが、記事作成後に変更してしまうと文章のバランスや表示が変わってしまうこともあるので、先に決めておいたほうが良いでしょう。

スポンサーリンク

ヘッダー画像の設定

ヘッダー画像

次にヘッダー部分を作成しましょう。カテゴリーを含めた「メニューバーの設定」は後ほど行います。

まずは、ブログタイトルやキャッチフレーズを入れた画像を準備しましょう。

ぽくらん
ぽくらん

私は写真アプリとペイントを利用して作成しましたが、簡単に作る方法があるようです。


ヘッダー画像の作成方法については以下の記事を参考にしてみてください。

>>> ブログのオリジナルヘッダーの作り方!画像サイズと設定方法を解説!



画像の作成ができたら、設定を行いましょう。


私のヘッダーは以下のような設定になっています。

✔ ヘッダー背景:こげ茶色

✔ ロゴ画像:タイトル付きの画像


まず、「Coccon設定」>「ヘッダー」から設定画面を開いてください。

Wordpressヘッダー設定



各項目ごとの設定は以下の通りです。

ヘッダーレイアウト センターロゴ(デフォルト)を選択
高さ ブランクでOK
高さ(モバイル) ブランクでOK
ヘッダーロゴ 作成した画像を選択ボタンより指定する
ヘッダーロゴサイズ ブランクでOK
ヘッダーのメニューバー設定

今回はロゴとしてヘッダー画像を設定するので、背景画像やヘッダー文字色は選択していません。ヘッダー全体色だけを選択しましたが、この辺はお好みで。

キャッチフレーズの配置 表示しない
ヘッダー背景画像 選択しないでOK
ヘッダー全体色 ヘッダー全体の色を選択してください。
ヘッダー全体文字色 選択しないでOK
ヘッダーのメニューバー設定

「グローバルナビメニュー幅」は未記入であればデフォルト幅になります。プレビューで確認しながらお好みの幅を設定してみてください。私は以下の幅にしてみました。
(トップメニュー幅:176、サブメニュー幅:240)

Wordpressヘッダー設定


最後に「変更をまとめて保存」を押すとヘッダー画像の設定が完了です!

スポンサーリンク

プロフィールの設定

次にプロフィールの設定を行いましょう。


パソコン画面では右側にプロフィールが表示されるようになっています。(選んだスキンによってデザインが異なるようです)

Wordpresプロフィール設定


まずは、このプロフィール作成方法についてご説明します。


ダッシュボード画面の「ユーザー」>「あなたのプロフィール」より設定画面を開いてください。


以下の通り「ツールバー」の項目にチェックをいれてください。

Wordpresプロフィール設定


必要に応じてそれぞれの項目を入力してください。

Wordpresプロフィール入力画面


ここでプロフィール情報(自己紹介)を入力してください。

Wordpresプロフィール入力画面


次にプロフィール写真を選択し、設定しましょう。

Wordpresプロフィール入力画面


最後に「プロフィール更新」ボタンを押してください。

Wordpresプロフィール入力画面


これで、プロフィールの設定が完了です!

スマホではサイドバーが表示されないので、別途「サイドバー」ボタンの設定を行います。設定方法は後ほど「メニュバーの設定」で解説します。

スポンサーリンク

フッダーの設定

フッダーには以下の4つの項目を入れました。

「ホーム」

「プライバシーポリシー」

「お問い合わせ」

「サイトマップ」


また、一番下に「クレジット表記」として、~はじめのいっぽくらん~@2019を表示させました。

フッター画面

「クレジット表記」の表示設定は以下の画面より設定しましょう。


ダッシュボード画面の「Cocoon設定」「フッダー」より設定画面を開いてください。

Cocoonフッター設定


フッダー色を選択し、表示タイプを選択します。

Cocoonフッター設定


表記、フッターメニュー幅を入力します。最後に「変更をまとめて保存」ボタンを押してください。

Cocoonフッター設定


これでヘッダーの一番下にサイト名等が表示されます。

※私のホーム画面では、こげ茶色の背景に白文字が上手く表示されず、以下の追加設定を行いました。上手く表示されない場合は参考にしてください。

ダッシュボード画面の「外観」「カスタマイズ」にてCSSを追加する作業を行います。

「追加CSS」に下記3行のコードをコピペします。

.source-org.copyright {
color: #FFFFFF;
}

Cocoonカスタマイズ追加CSS

これで以下の通り表示されました。

フッター画像



プライバシーポリシーの設定

プライバシーポリシー

プライバシーポリシーの設定については、こちらの記事がとても分かりやすいので参考にして作ってみてください。

>>>プライバシーポリシーページをWordPressで作る


トップページ(メニューバー)に設置する作業が必要となりますが、後ほど「メニューバーの設定」でご説明します。

お問い合わせフォームの設定

お問い合わせフォーム

記事を読んだ方からコメントや問い合わせをいただくための「お問合わせのフォーム」を設置しましょう。

設定するには、まずフォーム作成用の「 Contact Form 7 」というプラグインを追加します。

以下の記事を参考にプラグインを追加してみてください。

>>>【簡単】Contact Form 7(WordPressお問い合わせフォーム設置)の使い方徹底解説


ぽくらん
ぽくらん

細かい設定についても書かれているようですが、プラグインを追加、有効にするだけで他の操作は特に必要なかったと思います。


追加後、 トップページ(メニューバー)に設置する作業が必要となりますが、後ほど「メニューバーの設定」でご説明します。

サイトマップの設定

サイトマップ

サイトマップとは、サイト内のページリンクをまとめたページのことです。


検索エンジンと検索ユーザーにそのサイトにどのようなページがあるのかを伝える大切なものです。


インデックススピードやクローラーの回遊性の向上にもつながるのでしっかり設定する必要があります。


サイトマップは「Google XML Sitemaps」のプラグインを追加し、設定すればOKです。

「Google XML Sitemaps」 のプラグインは、記事の公開・更新の度にサイトマップを自動生成してくます。さらに、自動で検索エンジンに通知してくれるので大変便利です。


以下の記事を参考にプラグインを追加してみてください。

超簡単!WordPressでサイトマップを作る方法・必要性を図解で詳しく!|mixhost サーバーコラム
サイトを運営する時にあった方が良いのがサイトマップです。つまり、そのサイトのどこに何が書いてあるのかという地図。 もちろ

Google XML Sitemapsの設定方法


トップページ(メニューバー)に設置する方法は次の「メニューバーの設定」でご説明します。

スポンサーリンク

メニューバーの設定

最後に今まで設定してきた各項目をホーム画面のヘッダーとフッターにそれぞれメニューバーとして表示させましょう。

ヘッダーのメニューバーの設定

ヘッダーのメニューバー

ヘッダーのメニューバーは上記の白い四角で囲んだ部分です。

ここでは「カテゴリー」「プロフィール」を設置しました。

※ここで表示されている「プロフィール」は、先ほど作ったプロフィールとは別です。(先ほど作ったプロフィールはパソコン画面右側のサイドバーに表示されてます)

必要な場合のみ「固定ページ」の「新規作成」より、詳しいプロフィールページを新たに作成してください。不要であれば「カテゴリー」だけ設置で良いと思います。


「カテゴリー」の作成については、【超初心者向け】WordPressマニュアル|記事作成編|Cocoonユーザー用の記事でご紹介していますので、参考にしていただき作成してみてください。


ぽくらん
ぽくらん

こちらでは、作成した「カテゴリー」と「プロフィール」をメニューバーに設定してみます。


まず、ダッシュボード画面の「外観」「メニュー」より設定画面を開いてください。

ヘッダーのメニューバー設定

①「編集するメニューを選択」で、「カテゴリー(ヘッダーメニュー,ヘッダーモバイル,ヘッダーモバイルボタン)」を選択してください。


②左側の「メニュー項目を追加」というところで「カテゴリー」の項目より表示させたい項目全てにチェックを入れてください。

メニュー構造の「メニュー名」「カテゴリー」と入力。

「メニューに追加」ボタンを押すと追加されます。

ヘッダーのメニューバー設定

「プロフィール」の追加は、 左側の「メニュー項目を追加」というところで「固定ページ」の項目より「プロフィール」にチェックを入れて「メニューに追加」ボタンを押してください。

ヘッダーのメニューバー設定

画面下の「メニュー設定」では、以下の3点にチェックを入れて、右下の「メニューを保存」ボタンを押してください。

ヘッダーのメニューバー設定

これで、「ヘッダーのメニューバー」の設定は完了です。

フッダーのメニューバーの設定

フッターのメニューバーの設定

フッターでは、「ホーム」「プライバシーポリシー」「お問い合わせ」「サイトマップ」を設置します。

ヘッダー同様に、ダッシュボード画面の「外観」「メニュー」より設定画面を開いてください。

ヘッダー設定

上記の通り「新しいメニューを作成しましょう」を選択してください。

上記の通りメニュー名に「フッター」と入力し「メニュー作成」ボタンを押してくだい。 すると以下の画面が開きます。

フッター設定

①編集するメニューを選択のところは「フッター(フッターメニュー)」を選択
(メニュー構造の「メニュー名」「フッター」と入力。)

②右側の「メニュー項目を追加」というところで「サイトマップ」 「お問い合わせ」「プライバシーポリシー」 の項目にチェックを入れてください。

「メニューに追加」ボタンを押すと「メニュー構造」のところに追加されます。

「ホーム」ボタンは、上記の「メニュー項目」に出てきません。

自分で「ホーム」ボタンを作成し「メニューに追加」していく方法で設定します。

こちらは、以下の記事に分かりやすく解説がされていますのでご覧ください。

>>> 超簡単WordpressでメニュバーにHOMEボタンを設置する方法



「ホーム」
ボタンの追加が完了したら以下の操作を行ってください。

画面下の「メニュー設定」では「フッターメニュー」ボタンにチェックを入れて、右下の「メニューの保存」ボタンを押してください。

フッターのメニューバー設定

これで、「フッダーのメニューバー」の設定も完了です!

同じような説明になりますが、より細かい詳細まで書かれている記事を見つけましたのでこちらの記事も参考にしてみてください。




ぽくらん
ぽくらん

最後にスマホ用のフッターの設定についてご紹介です。


スマホでのメニューバー(フッター)の設定

スマホでのメニュー画面のフッター部分は以下のような設定にしました。

フッターのメニューバー

※ スマホ用フッターでは「HOME」「サイドバー」ボタンを追加で表示させました。

こちらは、以下の記事で分かりやすく解説がされていますのでご覧ください。

>>>スマホ閲覧者の操作性アップ。スマホメニューカスタイマイズ


「HOME」「サイドバー」ボタンが作れたら、メニューバーに設定していきます。


ダッシュボード画面の「外観」「メニュー」より設定画面を開いてください。

「編集するメニューを選択」「モバイルフッター(フッターモバイルボタン)」を選択して「HOME」「サイドバー」とその他必要な項目を追加しましょう。

モバイルフッターの設定

「メニュー設定」では「フッターモバイルボタン」にチェックを入れて、右下の「メニューを保存」ボタンを押してください。

モバイルフッターのメニュー設定

これで、「スマホ用フッターメニューバー」の設定も完了です。



以上で、ホーム画面での基本的な設定は全て終了です!

ぽくらん
ぽくらん

ここまで、本当にお疲れさまでした!


次は、いよいよ記事の作成です。


記事作成については以下の記事にまとめましたので、是非参考にしていただければと思います。




>>>ブログ記事作成・更新代行サービス

>>>「SEOコンサルティング」で着実にアクセスアップ

この記事を書いた人

ぽくらん

◆男の子(小4)と女の子(小1)の二児のママ。
◆日常の気付きや育児・生活に役立つ情報を発信。
◆ゆるっと気軽に資産運用もしてます。
◆可愛い雑貨が大好き。
◆頑張るあなたの「はじめの一歩」を応援します。
◆保有資格:英語検定2級、日商簿記3級、漢字検定3級、合気道初段

ぽくらんをフォローする
ブログ運営
スポンサーリンク
ぽくらんをフォローする
はじめのいっぽくらん

コメント

タイトルとURLをコピーしました