Twitterはこちら instagramはコチラ

サイトのヘッダーグローバルメニュー色・幅の設定【Cocoon設定】

Cocoon設定_グローバルナビメニュー_ナビ色ナビ文字色設定2 Cocoon

どーもひろくまです(@hirokuma_blog

こちらの記事では

・Wordpress(ワードプレス)
・テーマはcocoonを使用しています。

cocoon設定の「ヘッダー」の詳細を事細かく刻んで記事にしてきましたが、

今回で「最終回」です。

 

ヘッダー部のみの設定ですが細かく調べると新しい発見があったりもしました。

Cocoonマスターとしてはまだまだ未熟者ですが精進ししてまいります。

 

今回は「グローバルナビメニュー配色の設定です

以下のオレンジの枠内の殺風景な背景・文字色を変更します

Cocoon設定_グローバルメニュー色設定_デフォルト画面

 

設定作業は各1分程度で完了します。(微調整を除く)

またこちらの記事はこんな方には参考になります。

  1. ブログ初心者
  2. ヘッダーのイメージを変えたい
  3. グローバルメニュー ⇒ 設定していない
  4. グローバルメニュー作りたい
  5. グローバルメニューの色を変えたい
  6. Cocoonでカスタマイズがしたい

大体の設定方法がわかってるかたは読み飛ばしてもらってOKです!

 

そもそも「グローバルメニュー自体作っていないという方

こちらの記事でグローバルメニューの作り方わかりやすく画像付で詳細を紹介しています

テーマ「Cocoon」を入れてみたい方はこちらの記事へ

ブログサイトを作るのがはじめてでこれからサイト作りをしてみたいという方

こちらの記事を参考にしてみてください。この記事も「画像付」でわかりやすく説明しています。

 

Cocoonのヘッダー設定一覧

cocoon(コクーン)のヘッダー設定には12の設定項目があります。
こちらの色の付いている箇所はそれぞれの説明・手順のリンクへジャンプできます※随時更新中

 

12項目の設定のうち今回はこちらの説明です。

グローバルナビメニューの設定
  • ナビ色の設定
  • 文字色
  • トップメニュー幅の設定
  • サブメニュー幅の設定

グローバルナビ色・文字色の設定

まずはグローバルナビ色の設定です。

ナビの色を設定するとこんな感じに仕上がります。

Cocoon設定_グローバルメニュー色設定_グローバルナビ色変更

デフォルトではグローバルメニューの文字色は黒でしたが

ナビ色のみ変更すると自動で「白」に変更される仕様のようです。

 

初期設定の文字色は以下の「黒」です。

Cocoon設定_グローバルメニュー色設定_デフォルト画面

 

※こちらのグローバルメニューの高さはCocoon設定「ヘッダーレイアウト」➡ 「センターロゴ(スリムメニュー)」に設定してあり高さが狭い設定となっています。

ヘッダーレイアウト変更手順リンク ➡ ヘッダーレイアウト変更手順はこちら

グローバルナビ色・文字色の設定手順

WordPress(ワードプレス)管理画面より

毎度おなじみ ➡「Cocoon設定」をクリックします。

Cocoon_設定

 

「ヘッダー」タブをクリックします。

Cocoon設定_ヘッダー選択

 

グローバルナビメニュー色の確認

▽▼▽下へスクロールします▽▼▽

 

Cocoon設定_グローバルメニュー色設定_スクロールする

△こちら2つを変更するとグローバルメニューの「ナビ色」「ナビ文字色」が設定できます△

色の変更手順

それぞれ「色の選択」をクリックして

「カラーパレット」から選択 or「カラーコード」を直接入力しましょう。

Cocoon設定_グローバルメニュー色設定_グローバルナビ色変更_グローバルナビ文字色変更する

カラーコードの確認方法

グローバルナビメニューの「⚠」← アイコンにカーソルを合わせると

「カラーコードの早見表」が表示されます。

Cocoon設定_グローバルメニュー色設定_グローバルナビ色変更_カラーコード表示

 

ひろくま
ひろくま

カラーコードが小さすぎて見えませんね…

※コードが見えない場合

「Ctrl」+「マウスのスクロールホイールを上にスクロール」で表示画面が拡大されるのでカラーコードが見やすくなります。

設定を保存する

忘れずに「変更をまとめて保存」をクリックしましょう。

Cocoon設定_グローバルメニュー色設定_グローバルナビ色変更_変更をまとめて保存する

「変更をまとめて保存」は上・下に2か所あります。

プレビューで確認してみる

Cocoon設定_グローバルメニュー色設定_グローバルナビ色変更_プレビューで確認してみる

 

▼ プレビューの配色 ▼
  • グローバルナビ色:#3db0c6
  • グローバルナビ文字色:#eded4e

配色はランダムでチョイスしてみました。

色は好みなのでご自身で好きな配色を色々試してみてください。

 

グローバルナビメニュー幅の設定

Cocoon設定_グローバルナビメニュー幅の説明

 

ヘッダー設定の「グローバルナビメニュー」の幅の設定とは文字間の幅の設定で

Cocoon設定_グローバルナビメニュー幅設定_トップメニュー幅_見本2

薄く白く表示されている幅の事を指します。

こちらのメニュー毎の幅が変更されます。

変更できるグローバルナビメニューの幅

変更できる幅の設定とは
  • トップメニュー幅
  • サイドメニュー幅

トップメニュー幅の設定

合わせるCocoon設定_グローバルナビメニュー幅設定_トップメニュー幅設定

こちらの枠内に数値を入力しましょう。

テキスト幅で合わせる設定

合わせるCocoon設定_グローバルナビメニュー幅設定_メニュー幅にをテキストに合わせるをチェックする

テキストのサイズに合わせてかんたんに幅を調整したい場合。

「メニュー幅をテキストに合わせる」にチェックを入れましょう。

合わせるCocoon設定_グローバルナビメニュー幅設定_メニュー幅にをテキストに

文字サイズに合わせて調整するのでこちらのメニューの場合は幅が狭くなります。

サブメニュー幅の設定

合わせるCocoon設定_グローバルナビメニュー幅設定_サブメニュー幅設定サンプル

サブメニューの幅はこちらの幅の設定です。

サブメニューの文字が長い場合・メニュー幅よりはみ出るなどの場合に設定しましょう。

合わせるCocoon設定_グローバルナビメニュー幅設定_サブメニュー幅設定

あまり使用しない設定ですが必要に応じて「サブメニュー幅」に数値を入力します。

変更をまとめて保存する

変更しましたら忘れずに「変更をまとめては保存」クリックしましょう。

Cocoon設定_グローバルメニュー色設定_グローバルナビ色変更_変更をまとめて保存する

 

まとめ:サイトのグローバルメニュー色・幅の設定

  1. Cocoonのヘッダー設定一覧
  2. グローバルナビ色・文字色の設定
    1. グローバルナビ色・文字色の設定手順
      1. 「ヘッダー」タブをクリックします。
      2. グローバルナビメニュー色の確認
      3. 色の変更手順
      4. カラーコードの確認方法
      5. 設定を保存する
      6. プレビューで確認してみる
  3. グローバルナビメニュー幅の設定
    1. 変更できるグローバルナビメニューの幅
      1. トップメニュー幅の設定
      2. テキスト幅で合わせる設定
      3. サブメニュー幅の設定
      4. 変更をまとめて保存する
  4. まとめ:サイトのグローバルメニュー色・幅の設定

今回のまとめはこちら

まとめ
  • ヘッダーの色にあわせた配色がキレイにみえます。
  • 文字数が長くがはみ出る場合は幅調整で解決します
  • 自分のサイトに合った配色を探しましてみましょう。

Cocoon設定のメニューにもどる

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