ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【③グローバルメニューを整えるCSS】

ブログ

こんにちは
ニワトリです

『ヘッダーのメニュー
 を見やすくオシャレにしたい・・・』

『自分のブログを可愛く
 カッコよくしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回はグローバルメニューについて
紹介をしていきますね!

当ブログのグローバルメニューは
このようになっています。

スマホ
パソコン

スマホでは横にスライドすると
他のメニューが出てくる仕組みです。

グローバルメニューを整えることで
ブログ内の流動性を高めることができます!

今回のカスタマイズ
  • グローバルメニューの編集
  • メニューデザインの調整

グローバルメニューに表示するメニューを編集する

やり方
  • グローバルメニューに表示する
    カテゴリーを作成する
  • グローバルメニューをCSSで調整する

グローバルメニューを作成する

前回までの①②のカスタマイズ後、
ブログページはこのようになっています。

またしても殺風景なページの登場です…

こちのページの上部に
グローバルメニューを設定してきます。

グローバルメニューに表示できる項目

グローバルメニューに表示できる項目
  • 固定ページ
  • 投稿
  • カスタムリンク
  • カテゴリー
  • タグ

今回はカテゴリーで紹介していくね!

グローバルメニューに表示するカテゴリーを作成する

やり方
  • wordpressメニュー
  • 投稿
  • カテゴリー

やり方
  • 新規カテゴリーを追加
  • カテゴリー名を入力
    短いカテゴリー名が良いです
  • 「新規カテゴリーを追加」を押す
  • 作りたいカテゴリーの分だけ
    同様の流れで作成していきます

作成したカテゴリーをグローバルメニューに表示する

やり方
  • wordpressメニュー
  • 外観
  • メニュー
  • 中段右上の
    「新しいメニューを作成しましょう」
    を押す

やり方
  • メニュー名
    ここでは「グローバルメニュー①」としてます
  • ヘッダーメニューに✓
  • ヘッダーモバイルメニューに✓
  • 右下「メニューを作成」を押す

メニューを作成を押したあとは
下の画面に遷移します

やり方
  • メニュー項目を追加のカテゴリーの
    横にある▼を押す
  • 中央タブの「全て表示」を押す
  • グローバルメニューに追加したい
    カテゴリー名の横のチェックボックスに
    チェックを入れる
  • 「メニューに追加」を押す

やり方
  • 選択したカテゴリーが
    右側に移動されます
  • 移動してきた右側のカテゴリー名の
    横の▼を押す

やり方
  • ナビゲーションラベルを入れる
    ここに入れた文字が
    グローバルメニューに表示されます

今の状態だとwordpressと表示されます

グローバルメニューに表示したいカテゴリーを
同様の流れで右のボックスに追加していき

ナビゲーションラベルを決めていきます。

グローバルメニュー名の横にアイコンを入れたい

当ブログはいたってシンプルに▶マークのみ
メニュー名の横に追加していますが

fontawesomeを使うことで
様々なアイコンをメニューに追加が可能です!

Fontawesomeでアイコンのコードを取得する

https://fontawesome.com/

Fontawesomeを開くと
上の画像のページが開きます。

「アイコンを検索」の箱に
検索したい言葉を入力します。

一旦『HOME』と入力して検索します。

検索後、下の方にページをスライドすると
家のアイコンがたくさん出てきますね!

たくさんのアイコンの中から
自分のブログにあったデザインを探しましょう!

アイコンが決まったら
アイコンをクリックします。

アイコンをクリックし
少しページを下にスライドしていきます。

中央付近にある

<i class=”fa fa-home fa-fw”></i>
が家のアイコンのコードになります。

取得したコードを
ナビゲーションラベル名に追記していきましょう!

取得したコードをナビゲーションラベルに貼り付ける

やり方
  • wordpressメニュー
  • 外観
  • メニュー
  • 編集するメニューを選び【選択】を押す
    先ほど作ったグローバルメニュー①を
    呼び出します
  • 右の箱に入っているカテゴリーの中から
    アイコンを追加したいカテゴリー横の▼を押す

■変更前のナビゲーションラベル

 wordpress

■変更後のナビゲーションラベル

 <i class=”fa fa-home fa-fw”></i> wordpress
 </i>とwordpressの間に半角スペース入れるのがおすすめ

カテゴリーに応じてアイコンを選び
アイコンのコードを貼り付ける
同様の作業を繰り返します。

全てのナビゲーションラベルの
編集が完了したら

右下の『メニューを保存』を押します。

保存せずにページを変えると
変更が反映されないため
忘れずに保存をしておきましょうね!

サブメニュー(副項目)を表示する

メインメニューの下に、サブメニュー(副項目)を
追加することができます。

メインメニュー名横の▼を押すと
下にビヨンと出てくる項目です!

グローバルメニューに表示する項目は
長すぎると見ずらいので

4個~6個がおすすめです。

カテゴリーが多い場合はサブメニューを
使ってシンプルに表示しましょう!!

サブメニューを作ってみよう!簡単だよ!!

やり方
  • wordpressメニュー
  • 外観
  • メニュー
  • 編集するメニューを選び【選択】を押す
    先ほど作ったグローバルメニュー①を
    呼び出します
  • 右の箱に入っているカテゴリーもしくは
    追加したいカテゴリーを
    親カテゴリーの下にドラッグして持ってきます
  • サブメニューにしたいカテゴリーを
    右に少しずらします
  • 位置がズレたら完成です!

編集完了後は「メニューを保存」を押します。

デザインを確認する

このような感じでグローバルメニューが
表示されていればひとまず完成です!

確認
  • メニュー名は間違ってないか?
  • 親カテゴリーと子カテゴリーは
    合っているか?
  • アイコンに違和感はないか?
  • アイコンと文字の間にスペース
    は空いているか?
  • スマホ・PC両方で確認しましょう!

【コピペでOK!】作成したグローバルメニューのデザインをCSSで調整する

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

スタイルシート用追加CSS

/************************************
** ヘッダーメニュー
************************************/
.navi-in > ul{/*メニューを中心に配置したい場合は以下3行を削除*/
justify-content:flex-start;
}
.navi-in>ul li {/*ヘッダーメニューの高さ*/
line-height: 50px;
height: 50px;
}
.navi-in a{/*ヘッダーメニューのフォントサイズ*/
font-size:15px;
}
#navi .navi-in a:hover {
transform: none!important;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{/*サブメニュー*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {/*サブメニューを仕切る点線*/
color:#333;
border-top: dotted #dddddd;
background:#fff;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {/*ヘッダー下の影非表示*/
box-shadow: none;
}
div.item-label{
font-weight:bold;
}

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

グローバルメニューの色と幅を変更する

やり方
  • wordpressメニュー
  • cocoon設定
  • ヘッダー

やり方
  • グローバルナビメニュー色
    ご自身のブログデザインに合わせて
    色を変更してください
  • グローバルナビメニュー幅
    ・メニュー幅をテキストに合わせる
    ・サブメニュー幅…200~240
    スマホ・PCで確認しながら微調整します

色と幅の調整が完了したら
スマホ・PCでデザインを確認しましょう!

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はグローバルメニューについて
紹介してきました。

次回はその他のヘッダー部分について
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした。

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

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