Cocoonヘッダー(グローバル)ナビのサブメニュー名を2行表示にする

サイト開始から1ヵ月強が過ぎ、全体的にこれまで書いた記事の見直しを進めています。

今回見直しすることにした直接的な要因は、Google AdSenseの認定で「質の低いサイト」と言われたことによりますが、
ただ 見直してみると 、確かに「そういわれても仕方ない」と思える記事が散見されました。

それは例えば、記事に見出しが設定されていなかったり、記事が1,000文字に足りていなかったり、告知だけのページだったり、内容に誤りがあったり、言葉が足りていなかったり、styleタグを使っていたり、リンク切れがあったり…

筆者の経験則としては、「間違いを指摘される」ということは「有難いことである」と認識しています。

という事で、この機会を使って下記の方針を見直すことにしました。

記事タイトルの全角での文字数をMax26文字から34文字に変更する

上記見出しの方針は、「サイトナビゲーションの考え方」に記載しているのですが、ここ1ヵ月弱の間、実際に運用して見て「もう少し文字数が有った方が記事の趣旨を伝え易いのだけど…」というケースが何度かありました。

ルールを守るために無理やり文字数を縮めてしまっても、タイトルの意味がお客様に伝わり難ければそのような努力をする意味がありません。

ちなみに、この文字数の上限はCocoonのデフォルトのヘッダーナビ(グローバルナビ)(以下ヘッダーナビ)のサブメニュー幅である240px(これより大きく設定することはできますが画面の横幅を考えると限界です)を使用して、ワードプレス(以下WP)のメニュー編集でナビゲーションラベルの設定欄にHTMLの<div>タグでStyle属性に文字サイズの60%に縮小を設定することで実装できる値です。

ただしこのやり方には下記の問題があります。

1. メニューに埋め込んだCSS設定と、サイト全体で使用するCSSファイルと2つが作用し合うことになる。
2. サブメニューのフォントサイズがバラバラになる。(大きな文字や小さな文字が混在する)

1.は、設定が競合するケースでは埋め込んだ設定が有効になるのですが、管理面から見てCSSファイルだけでは全体像を見れない事が良くないところです。

2行表示にするためにサブメニューの高さを決める

Cocoonに何も修正をしない状態でサブメニューのメニュー名(ナビゲーションラベル)を長く設定すると、入りきらない文字がすぐ下のサブメニューエリアに重なって表示されてしまいます。

これを回避するためには、まずサブメニュー用のスタイルシートを作り、それを子テーマのstyle.cssファイルに追加することで実装することにします。

本サイトで使用しているCocoonのヘッダーレイアウト「トップメニュー」(Cocoon設定→ヘッダータブ)ではヘッダーナビのデフォルトでの高さは60pxになるようです。
ちなみにヘッダーレイアウトで「トップメニュー小」を選ぶとこの高さは40pxになります。

「トップメニュー」の場合はヘッダーナビに合わせてサブメニューの高さも60pxに設定されています。

もともと何でこのような広めのサイズになっているか?といいますと、サブメニューでも「WP外観→メニューに入力されたサブメニュー名(ナビゲーションラベル)」と「説明欄に記入された内容」、この2つを2段表示できるように設計されているからであると推察いたします。

今回サブメニュー名を2行表示させるにあたり、標準で備わっているこの機能は取り除かせていただきたく事にしました。
つきましてはCocoon作成者「わいひら様」の設計思想とは異なる形になりますが、ご容赦いただければ幸いです。

60pxの高さから、「説明欄」1行を取り除くのだから、半分の30pxにするという案もありますが、サブメニュー同士がくっつき過ぎるのも見づらくなるので、サブメニューの高さは40pxに変更することにします。

これにより得られる効果としては下記の2点になります。

• メニューに収容できるカテゴリーや記事のキャパシティーを増やすことができる。
• メニューでのサイトナビゲーションがし易くなる。

なお、ヘッダーナビの高さはデフォルトの60pxのままで変更はしないことにしました。
この理由としては、この部分はCocoon設定から変更できる属性があり、この部分まで手を入れてしまうと後々Cocoonのバージョンアップについづぃしていくことが難しくなるためです。

サブメニューのフォントサイズから全角での文字数を決める

次にサブメニューに表示されるフォントサイズですが、これはCocoon設定→全体タブの全体設定にあるサイトフォントの文字サイズにより変更することができますが、本サイトでは14pxを使用しています。

サブメニュー幅のデフォルトは240pxですので240/17=17.142…から1行に17文字入ることになりますが、左右に一文字分強の余白が設定されているので実際に試して見ると全角14文字が上限になりました。
このままですと、2行に増やしても28文字どまりになるので、文字サイズを80%に設定致します。

80%にするとフォントサイズは14px×80%=11.2pxになります。

ちなみにこの設定で実際に試したところ1行に全角で18文字が入りました。
そのためこれであれば、サブメニュー名にアイコンを設定したとしても最大35文字まで使用することができます。

※なお本サイトでの上限を全角で34文字としたのは、本サイトの場合はカテゴリーを代表してメニューで表示させる記事タイトル名の末尾に「他」を付与するというルールがあるためです。

CSSファイルに追加するclass

今回新たに追加するclassは1つです。
もともとあるclassの変更は3つありますが、これは後段でご説明致します。

下記のコードをCocoon子テーマに置かれているstyle.cssのファイルに追記します。

※なおクラス名はなるべく短くした方が後段の入力の手間が省けます。

.my-navi {
  font-size: 80%;
  line-height: 14px;
  display: block;
  padding-top: 6px;
  padding-bottom: 6px;
  height: 40px;
}

サブメニューの高さ40pxの内、上下に6pxの余白を取り、1行はline-heightで14pxにしています。
なお2行表示の際の行間はこれで決まってきます。上記paddingの数値を変えることで、行間やサブメニュー同士の境目の幅の割り振りを調整することができます。

サブメニュー名に上記classを設定する

WPの外観→メニューからヘッダーナビを選択し、classを設定するサブメニューを選択してナビゲーションラベルにclassを設定します。
※従ってClass名は短めにした方が入力が楽です。

<div class="my-navi">∞ワークス</div>

すべてのサブメニューに<div>タグを設定するのは大変ですが、ご容赦ください。
コーディングすることで、サブメニューに登録した印を上記<div>タグに置き換えるような省力化は考えられますが、後々「何でこの印をつけるのか?」を忘れてしまう事も考えられるので採用しておりません。

最後に既存CSSのclassを3つ修正する

最後にヘッダーナビ関連のCSSの内、次の3つのclassの機能を修正するために、下記のコードをCocoon子テーマに置かれているstyle.cssのファイルに追記します。

.navi-in > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  height: 60px;
  /*サブメニュー*/
}

9行目だけを追加しています。
ヘッダーナビの高さのデフォルトは60pxなのですが、標準ではこの<ul>タグに高さの設定はされていません。
次のCSSを見ると分かるのですが、標準では<ui>タグに高さの設定が入っています。

今回<ui>タグに高さ40pxの指定を加えるため、その前の<ul>タグで上記の高さ60pxの記述を入れないと、ヘッダーナビの高さが正しく設定できません。

---

.navi-in > ul li {
  display: block;
  width: 176px;
  height: 40px;
  line-height: 40px;
}

4行目と5行目の値を60pxから40pxに変更しています。
これによりサブメニューの高さは40pxに設定することができます。

---

.navi-in > ul .sub-menu ul {
  top: -40px;
  left: 240px;
  position: relative;
}

2行目のみ-60pxから-40pxに変更しています。
これにより、設定変更後サブメニューに紐づく孫メニューの表示位置がサブメニューと水平に並ぶようになります。

以上、ご報告申し上げます。

p.s.
なかなかCSSの設定だけを見て、作成者の意図をくみ取るのは難しく、既存CSSの変更に関してはTry & Errorによる試行錯誤の末に導き出されています。
そのようなこともあり下記の点は考慮しておりませんので、お含みいただければ幸いです。

• サブカテゴリーの説明欄に文字を入れると、表示はされないもののシステム上サブメニューの高さが増えるため表示が乱れます。
• Cocoon設定の管理画面で表示されるヘッダーナビついては対応しておりません。