WordPressのテーマCocoon(コクーン)のグローバルナビをカスタマイズ!

WordPressの無料テーマ「Cocoon(コクーン)」でヘッダーのグローバルナビゲーションのカスタマイズ方法を書きたいと思います。

「Cocoon(コクーン)」とは

簡単に「Cocoon(コクーン)」の特徴など書いておりますので、よかったら読んでみてください。

WordPressの無料テーマ「Cocoon(コクーン)」Simplicityの後継としてわいひらさんが開発!
Simplicityを開発したわいひらさんが、新しくWordPressの無料テーマ「Cocoon(コクーン)」を作られたようなので、紹介したいと思います。

Cocoon(コクーン)のダウンロード

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

ロゴ周りのカスタマイズは下記に書いてあります。

WordPressのテーマCocoon(コクーン)のヘッダーロゴをカスタマイズ!
WordPressの無料テーマ「Cocoon(コクーン)」でヘッダーにあるロゴを左寄りにして、キャッチフレーズに余白など入れてカスタマイズする方法を書きたいと思います。

このページではヘッダーのグローバルナビゲーションについて書きたいと思っています。
現在テーマが新しくなり管理画面から設定ができるようになりました。詳しくは下記に記述がありますので参考にしてください!

グローバルメニューのアイテム幅をテキストサイズに合わせる方法

なので下の記事は古いです。もちろん下記のように修正も可能だと思いますが、管理画面から簡単に修正ができると思いますので、そちらをお勧めいたします。

準備と確認

まずヘッダーに表示させるグローバルナビゲーションメニューを設定します。

ダッシュボードの「外観}から「メニュー」を選びます。

新規でメニューを作ります。

メニュー名は、なんでも平気ですが、日本語にはしないほうがよいかなと思います。
いったん「heder-nav」としておきます。

「メニュー作成」を押します。下記のような画面になると思います。

「ヘッダーナビ」にチェックを入れます。
「メニューを保存」を押しておきます。

サンプルサイトですと、固定ページには「サンプルページ」しかありません。
メニューを沢山作りたいのでいったん、「カスタムリンク」を押します。

URLとリンク文字列を入れてメニュー追加を押します。

サンプルサイトなので、いくつかメニューを追加しておきます。追加したら「メニューを保存」を押します。

サイトを見てみます。

画像が小さくて恐縮ですが、メニューのうち少し文字数が多い、
・けっこう長めになるタイトル
・WordPress関連のメニュー

がちゃんと表示されていません。

メニューの幅を管理画面から修正する

サンプルではメニューを7つ作りました。
そのうち2つが収まりきれていません。

[管理画面]から[Cocoon 設定]を押し、タブにある「ヘッダー」をクリックします。

下のほうまでスクロールすると「グローバルナビメニュー幅」などが設定できる場所があると思います。

幅のデフォルトは176pxのようです。
現在メニューのうちの2つが表示できていないので、幅を210pxにしてみます。
こうすると、メニューが収まりましたが、「お問い合わせ」が下に行きました。
ちなみに下層メニューの幅も「サブメニュー幅」から変えられます!

ちなみに全体の幅はデフォルト設定で、1270pxです。
けっこう幅は広めだと思います。これで収まらない場合、まずはメニューを減らします。
7つあるうちの1つを消せば、1行に収まりますよね。
この対応で問題ない方はそれでよいと思います。

スタイルシートで幅を調整する

7つのメニューはすべて均等になっています。
わかりやすいようにちょっと枠をつけてみます。

一部を拡大してみます。

・けっこう長めになるタイトル
・WordPress関連のメニュー

については、文字数が多いので、210pxの幅でぎりぎり収まったという感じですが、「短いメニュー」や「お問い合わせ」の両端は、よくみると空きがあります。これを詰められないだろうか?と思う方もいると思います。

「Cocoon(コクーン)」では管理画面から、簡単に幅を設定できますが、文字数が少ないメニューの場合、余白がもったいないと感じる方もいると思います。逆にメニューの幅は、均等であるべきだと思う方もいると思います。

均等にした場合、「お問い合わせ」は下に行くし、余白を詰めれば、1行になるんじゃないだろうかと思う方もいると思うので、スタイルシートで調整できるか確認したいと思います。

管理画面から幅を設定すると、インラインで下記のように命令が追加されます。

#navi .navi-in > ul > li {
    width: 210px;
}

こちらのワイドの設定を無効にしたいと思います。
子テーマのstyle.cssに下記のような命令を追加します。

#navi .navi-in > ul > li {
width: auto;
}

保存してアップします。
サイトを確認します。

左右がぴたっとしていますが、収まりましたね!
右に余白がほしいので、子テーマに下記を追加します。

.navi-in a {
    padding-right: 20px;
}

サイトを確認してみます。

これで余白があり、少し長めなタイトルがあっても1行に収めることができましたね。

横幅ぎりぎりまでメニューを並べたい

少しメニューを減らして5つにしますと、センタリングします。
これで問題ない場合も多いかと思いますが、サイトのワイドぎりぎりまでメニューが来てほしいと思うことがあると思います。

その場合には、子テーマに下記を追加します。

.navi-in > ul {
    justify-content: space-around;
}

左右がぎりぎりまで来たと思います。

でもメニューとメニューの間が空いてしまい、ちょっと気になりますよね?
この場合は子テーマのstyle.cssに下記の命令を書けばよいかと思います。

#navi .navi-in > ul > li {
flex-grow: 1;
-webkit-flex-grow: 1;
}

これでメニューとメニューの間が詰まりよい感じになりましたね。

コメント