【稼ぐブログ塾・第22講】ブログにメニューを設置しよう【初心者向け】

Cocoon(コクーン)ブログトップメニュー

最短で稼ぐためのブログを作る完全初心者向け講座の第22講目です。
理論や解説をできる限り少なくしてスピードを重視しています。

たくす
たくす

コンセプトは「手を動かす」です!

今回は、「メニュー」をブログに設置することがゴールです。
WordPress(ワードプレス)無料テーマCocoon(コクーン)で簡単に説明します。

Cocoon(コクーン)初心者ブロガーの味方、高機能で無料のテーマ「Cocoon(コクーン)」

ブログに「メニュー」を設置!

WordPress(ワードプレス)メニュー

読者は検索結果SNSのリンクから、あなたの記事に訪問します。
そのとき、メニューがなかったらTOPページに行けないですよね。
このままでは、「戻る」ボタンを押して帰ってしまいます!

ちゃんとメニューを設置して、他の記事も見てもらえるようにしておきましょう!

メニューは「トップメニュー」と「フッターメニュー」の2つ作ろう!

ブログサイトに必要最小限なメニューは2つです。
当ブログ「招福ネコログ!稼ぐブログづくり情報サイト」を例に紹介しますと下の通りです。

  1. トップメニュー
    ブログトップメニュー
  2. フッターメニュー
    ブログフッターメニュー

トップメニューグローバルメニューとも呼ばれていて、ブログのトップに設置します。
フッターメニューはブログの一番下にあるやつですね。記事を読み終わったらホームへ戻れるようにしておくのが王道です。

たくす
たくす

ではさっそく作業開始です!

グローバルトップメニューを設置する!

ブログトップメニュー

説明用ブログ「迷い猫の森へようこそ 稼ぐブログづくりの理論サイト」に、トップメニューを設置していきますので、手順を参考にしてください!

1.ダッシュボード「外観」「メニュー」からスタート!

Cocoon(コクーン)トップメニュー

WordPress(ワードプレス)のダッシュボードメニューにある「外観」から「メニュー」をクリックします。

Cocoon(コクーン)メニュ^設定方法

上図の画面になりましたか?

たくす
たくす

メニュー名」に「TOP」など入力してください。
「グローバルメニュー」「トップメニュー」なんでもOK、管理用の名前です。

つづいて「メニューの位置」の「ヘッダーメニュー」にチェックを入れます。
画面右下の「メニューを作成」をクリックしてください。

2.メニューに表示したい内容を選ぶ

続いて、メニューに表示したいものを選んでいきましょう。
画面左にある「メニュー項目を追加」の下を見てください。
下図のような部分があります。

この部分で、メニュー内容を追加していけます。

Cocoon(コクーン)メニュー設定

すべて表示」のタブをクリック。
すると下図のように表示されます。

WordPress(ワードプレス)メニュー設定

全部選ぶのはオススメしません。画面をはみ出してしまうからです!
とりあえず「ホーム」「サイトマップ」「プロフィール」だけ選びました。
そのまま「メニューに追加」をクリック。

前講の「【稼ぐブログ塾・第21講】ブログにサイトマップを設置しよう【初心者向け】」で作成した「人間用サイトマップ」はこのメニューで選択することで表示できます!

続けて「カテゴリ」からも追加しましょう。

Cocoon(コクーン)メニュー設定

さっきと同じ要領で「すべて表示」のタブをクリックします。
カテゴリを2つほど追加してみます。
チェックしたら「メニューに追加」をポチッとしましょう。

Cocoon(コクーン)トップメニュー

3.メニューの順番を変更できる

Cocoon(コクーン)メニュー

上から下に向かって並んでいるメニューは、ドラッグするだけで順番を変更できます。
順番は、一番左に表示させたいものを一番上にします。

あとでいくらでも変更できるので、とりあえず「メニューを保存」。
どんな感じに表示されるかな?

Cocoon(コクーン)トップメニュー

ヘッダーの下にトップメニューが表示されました!
このままでも良いんですが、赤いバックに白抜き文字にしてみたいと思います。

4.トップメニューデザインを変更

ダッシュボードから「Cocoon設定」の「Cocoon設定」をクリック。

Cocoon(コクーン)メニューデザイン

一番上の段、左から3つ目の「ヘッダー」タブをクリックしてください。

Cocoon(コクーン)ヘッダー設定

下へスクロールしてゆくと「グローバルナビメニュー色」というところがあります。
ここで、メニューの背景色文字色を自由に変更できます。

Cocoon(コクーン)グローバルナビメニュー設定

今回は背景色だけ赤色にしてみようと思います。
グローバルナビ色」が背景色です。
デフォルトは薄いグレー?
これを赤色にして、一番下にある「変更を保存」をクリック。

Cocoon(コクーン)ヘッダーメニューデザイン変更

いい感じになりました!
続いて「フッターメニュー」を作りましょう!

フッターメニューを設置する

もう一度、ダッシュボードの「外観」から「メニュー」を選択します。
下図の「新しいメニューを作成しましょう」のリンクをクリック。

Cocoon(コクーン)フッターメニュー

作業はさきほどのトップメニューと同じです。
メニュー名は「fotter」「フッターメニュー」「下のメニュー」なんでもOK。

「フッターメニュー」にチェックを入れて「メニューを作成」をクリック。

フッターメニューCocoon(コクーン)

では、フッターメニューの中身を選択していきましょう。

フッターメニュー設定WordPress(ワードプレス)

フッターメニューはあまり多くないほうが好みなので3つだけにしました。
ただ、フッターメニューには「ホーム」「プライバシーポリシー」の2つは必須です。

フッターメニュCocoon(コクーン)設定

メニューを作成」をクリックしたら完成です。
ブログ画面を確認してみましょう。

フッターメニューCocoon(コクーン)

シンプルでいい感じになりました!

とってもカンタンにできるんですね!

たくす
たくす

ここまで来たら大詰め、あと一歩です!

ブログメニューデザイン作業後は、必ずスマホで確認しよう!

先ほどのフッターメニューをスマホで確認します。
ぼくのスマホはiPhone11、ブラウザはChromeがメインです。

フッターメニュー確認

たくす
たくす

…崩れちゃってますよね。

メニューが崩れていたら短い単語に変えて調整しちゃおう!

プログラミング技術のある人ならCSSを書き換えたりして調整できますが、そこまでしなくても大丈夫です。短い単語に置きかえてしまいましょう。

オススメは、英単語にしてしまう方法です。
こんなふうにしてみましょう。

  • ホーム→TOP
  • プライバシーポリシー→privacy policy
  • サイトマップ→SiteMAP

WordPress(ワードプレス)のダッシュボードにあるメニュー設定画面へ戻ります。

メニュー設定Cocoon(コクーン)

まずは「ホーム」を書き換えます。上図のように下向きの三角形をクリック
すると、詳細設定ができるようになります。

Cocoon(コクーン)メニュー変更

ナビゲーションラベル」の中の「ホーム」を「TOP」に書き換えました。
「HOME」などでもOK、とにかく短くなるように工夫しましょう。

プライバシーポリシー、サイトマップも同じ要領で変更、変更を保存しましょう!

モバイル確認Cocoon(コクーン)

変更保存したらスマホで確認。
確認するときは必ず再読込させましょう!

モバイル画面のフッターメニューもきれいに収まりました!
コピーライトが2段になっちゃったけど…

たくす
たくす

本日はここまで!

まとめ〜メニューはこだわりすぎずにサッと作る

今回の講座を振り返ります。

  1. 「トップメニュー」にはおすすめしたいカテゴリを表示
  2. 「フッターメニュー」にはブログトップへのリンクを表示

トップメニューには読者に読んで欲しい「カテゴリ」を入れておきましょう。
一方、フッターメニューには「TOPへ戻る」と「プライバシーポリシー」の2つは必須です。

意外とカンタンでしたね!
本日はここまで!

 

アドセンス登録には最低10記事必要

第25講座ではGoogleAdSense(グーグルアドセンス)の申請をします。

GoogleAdSense(グーグルアドセンス)

最低でも10記事はないとGoogleAdSense(グーグルアドセンス)に審査通過しません(あえて言い切りますが、ほぼ間違っていないと思います)。

別記事「[2020年]アドセンス審査のチェックポイント〜6ブログ合格の経緯」も参照下さい。

とにかく、1ヶ月以内に10記事を書き上げて公開しましょう。

失敗なんて恐れず、とりあえず「読者に喜ばれる情報を発信する10記事」を1ヶ月以内に書き上げることを目標に頑張ってみましょう!

今回も最後まで読んでいただきありがとうございます。

たくす
たくす

第22講は以上です、おつかれさまでした!

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