テーマカスタマイザー：グローバルナビの高さや背景色を変更する（PC時）

grayishのスキン独自テーマカスタマイザーでは、PC時のヘッダーについてグローバルナビの高さ・背景色の変更・背景色の不透明度をカスタマイズ可能です。

フロントページとその他のページで別の項目になっています。

まずはフロントページの変更方法について、説明していきます。

フロントページ

スキン独自テーマカスタマイザーでフロントページ設定：ヘッダーを開く

スキン独自テーマカスタマイザーの立ち上げ手順が不明の方は、以下をご覧ください。

フロントページ設定：ヘッダーを開きます。

グローバルナビの高さを変更

56px〜100pxの範囲で変更が可能です。

範囲外の値を入力すると無効となり、初期値の56pxになります。

グローバルナビの背景色を変更

グローバルナビの背景色のカラーピッカーをクリックして、お好みの色を選択します。

動画では、分かりやすいように黄色のあたりを適当にクリックしています。

デフォルトを押すと、スキンのデフォルト色に戻ります。

グローバルナビの背景色の不透明度を変更

グローバルナビの背景色の不透明度を変更できます。

フロントページの変更方法については以上です。
続いて、その他のページについてです。

その他のページ

スキン独自のカスタマイズ項目でフロントページ以外の設定:ヘッダーを開く

フロントページ以外の設定:ヘッダーを開きます。

フロントページ以外のヘッダーを確認するため、カスタマイザーのプレビューでカテゴリー一覧などのページを表示させてください。

グローバルナビの高さを変更

フロントページ以外のページのヘッダーには、グローバルナビとサイトタイトル（またはロゴ）が表示されます。

グローバルナビの高さを大きくしてもサイトタイトルの大きさ（フォントサイズ）は変わりません。

以下の画像は、グローバルナビの高さを100pxにした例です。

サイトタイトルの「Demo-grayish」は大きさそのまま、グローバルナビの高さだけが100pxになります。

サイトタイトルの大きさ（フォントサイズ）は画面幅が1024pxに近づくと自動で小さくなっていく仕様になっています。
お使いのPCの画面の大きさによってはテーマカスタマイザーのプレビューでフォントサイズが小さくなっている場合もあります。

ロゴ画像は大きさが変わる

ロゴ画像を設定している場合は、グローバルナビの高さに合わせてロゴの大きさも変動します。

以下の画像は、サイトタイトルをロゴ画像にした場合です。グローバルナビの高さは初期値の56pxです。

例として、グローバルナビの高さを80pxに変更してみます。

ロゴ画像もグローバルナビの高さの変更に合わせて大きくなりました。

デフォルトのままではロゴの表示が小さい場合などに調整することが可能です。

ロゴ画像の縦横比率によってどのぐらい大きくできるかは変わってきます。
ロゴ画像が大きくなることによってグローバルナビのメニューが折り返すことがあります。

サイトタイトルの場合と同様に、ロゴ画像の場合も画面幅が1024pxに近づくと自動でサイズを小さく調整します。

グローバルナビの背景色を変更

フロントページの設定方法と同様です。

グローバルナビの背景色の不透明度を変更

フロントページの設定方法と同様です。

テーマカスタマイザーの設定変更後は「公開」を忘れずに！

グローバルナビの高さや背景色について、各自のサイトのイメージに合わせていろいろ設定を試してみてくださいね。

最後に「公開」ボタンを忘れずにクリックしてください。

テーマカスタマイザーの画面では、PC時のグローバルナビのサブメニューが表示されません→Cocoon ver2.7.1で表示するように仕様変更しました

24/01/29 追記
24/02/26 Cocoon ver2.7.1で仕様変更しました

Cocoon　ver2.7.1より仕様変更し、テーマカスタマイザー・Cocoon設定プレビューどちらでも、サブメニューがある場合は表示します。

---

今回の記事は以上です。