（コピペOK）cocoonカスタマイズ初心者向けグローバルメニューの作成方法

こんにちはレオです。

今回は、僕が愛用しているテーマ『Cocoon』のグローバルメニューの作成方法を紹介していきます。

レオ

初心者の方でもすぐに実用できます。

あなたはCocoonテーマを使用していますか？無料で使い勝手がいいですよね。

僕もブログを始めてから、Cocoonを愛用しています。かなり扱いやすく、え、これ無料でいいの？と思うくらいです。笑

そんなCocoonで作れるグローバルメニューが便利で、サイトの雰囲気を変えてくれたので、やり方を解説します。

レオ

また、コピペもOKなのでジャンジャン使ってください！

Cocoon初心者でもできるグローバルメニュー作成

Cocoon初心者でもできるグローバルメニュー作成①そもそもグローバルメニューとは？

グローバルメニューとは、サイトの案内が載ってる看板みたいなものです。

この看板を設置すると、あなたのサイトを読んでくれている方に親切に案内できます。

逆にグローバルメニューがないと、読者は読みにくいし、親切じゃないな、となります。

レオ

グローバルメニューは、ブログサイトにおいて超超超大事なのです！

Cocoon初心者でもできるグローバルメニュー作成②僕のグローバルメニュー

では、実際に作成したグローバルメニューがこちらです（僕が運営しているReobloです）↓

シンプル＆色を1色に落ち着かせる感じですね。このデザインを作るのは後ほど紹介します。

レオ

これがあるだけで、サイトの見栄えがグッと変わります！

Cocoon初心者でもできるグローバルメニュー作成③wordpressにログイン

では実際に作成していきましょう！ここからは『手を動かして、あなたのサイトを開きながら』やっていきましょう！

まずは、WordPressにログインします。

ログインは、『https://〇〇.com/wp-admin/』なので、〇〇の所に自分のサイトのドメインを入力して、検索窓にぶちこみましょう。

こんな感じになれば成功です↓

今回は僕のもう一つのデモサイトを使って紹介していくので、最初のヘッダー画面はこんな具合です↓　ここにグローバルメニューを作ります。

Cocoon初心者でもできるグローバルメニュー作成④固定ページを作ろう

グローバルメニューに表示させたいページを事前に作ります。これも簡単です。

画面左側にバーがゾロっと並んでると思います。それの真ん中らへん、固定ページをクリックします。

この画面が出る↓と思うので、新規追加を押します。

今回は、『HOME、プロフィール、サイトマップ、プライバシーポリシー、お問い合わせ』の５つを作成しますが、

まずはその中の４つ！『プロフィール、サイトマップ、、プライバシーポリシー、お問い合わせ』を作り、公開します。

レオ

この時、とりあえず何も書かずに４つとも白紙で公開しちゃいましょう！あとから編集できるので！

ここで、『HOME』は特別で、この『HOME』を押した時にあなたのサイトのトップページに飛ぶ設定をします。その方法は後ほど解説します。

Cocoon初心者でもできるグローバルメニュー作成⑤メニューを作ろう

固定ページの作業は終わり、『外観>メニュー』を選択します。

新しくメニューを作成、名前はグローバルメニューにします。

次に、左側の固定ページ欄から、先ほど作った固定ページを選択（すべてを表示を押す）、メニューに追加を押します。

追加したメニュー達は順番が並び替えられるので、画像の順番にしましょう！メニュー設定をヘッダーメニューにし、保存します。

メニュー追加の際、項目の所を『すべてを表示』にしないと全部出てきません！

レオ

僕も、全然表示されずに困ってました。笑

そしたら次の、先程の『HOME』の作成に進みます。

Cocoon初心者でもできるグローバルメニュー作成⑥HOMEをカスタムリンクで作成

『HOME』のボタンを押下したら、あなたのサイトのトップページに飛ぶよう設定します。

これは、左側のカスタムリンクをいじります。URLの部分にあなたのサイトのURLを打ち込み、メニューに追加を押下、

メニュー追加のところで、ナビゲーションラベルを『HOME』に変更し、保存を押したら完了です。

レオ

これにより、『HOME』を押すと、あなたのサイトのトップページに飛べるようになります。

Cocoon初心者でもできるグローバルメニュー作成⑦完成

ここで、左上のマークを押下すると、自分のサイトが表示されます。

ヘッダーに、先ほど作成したグローバルメニューが表示されていれば完成です↓
※選んでいるスキンによって多少違いがあります。

レオ

お疲れ様でした！もう少しデザイン加えたい場合は続きを見てください！

Cocoon初心者が挑戦したいグローバルメニューのカスタマイズ方法

実は、ここからもカスタマイズは可能なんです。もし、僕のサイトようなグローバルメニューにしたい場合は次のセクションの『こちら』を参照してください。

『いや自分で全部オリジナルカスタマイズしたいよ〜』と言う場合はCSSを勉強する必要があるので、自分なりデザインにしたい場合はCSSを勉強しましょう！

レオ

僕は、『ドットインストール』でHTMLとCSSをセットで学びました！

Cocoon初心者が挑戦したいグローバルメニューのカスタマイズ方法①テーマエディターを使おう

CSSカスタマイズする際に、『外観>テーマエディター（style.css）』で編集できます。

ここにCSSを追加してスタイルを編集できます。

Cocoon初心者が挑戦したいグローバルメニューのカスタマイズ方法②僕のサイトのCSSを公開（コピペOK）

実際にブログに使っているCSSコードを紹介します。色はそれぞれ変えられるのでそこは自由にやってみてください！

これ↓を先ほどのテーマエディターにコピー＆ペーストします。
.navi{
margin:0 !important;
background-image: linear-gradient(to left, #deb887 0%, #deb887 100%);
font-weight:bold;
height:40px;
}

.menu-top li:last-of-type{
border-right:initial;
}

好みの色に変更したい場合は、上から２行目の『#deb887』をこちらのカラーコードサイトを参照し変更してみてください！

レオ

このサイトは僕のお気に入りのサイトです！

Cocoonカスタマイズ初心者でもできる方法のまとめ

まとめます！

手を動かして見ると、意外とできちゃいますよね。僕も最初は迷いながらでしたが、見栄えの良いグローバルメニューを作ることができました！

これであなたも、ブログサイトのレベルを1段階上げられましたね！！

レオ

引き続き、ブログ運営頑張ってください！

またTwitter（reoblo_）の方でも有益情報を呟いているので、
良かったらフォローとツイートのチェックをよろしくお願いします！