WordPressテーマ「SWELL」カスタマイズ。グローバルメニューの特定の箇所に区切り線を入れる。

WordPressテーマ「SWELL」カスタマイズの備忘。

SWELLでは、というより多くのWordPressテーマではグローバルメニューが均等な間隔で、そして特に区切り線などのない状態で並べられています。

ただ、例えばカテゴリー群と著者情報などのアバウトページをグローバルメニューに並べているものの、それらが同レベルの役割を持っていない＝並列させていると少し違和感があるようなケースってあると思うんですね。

ちょっとわかりにくいので具体的に話すと、グローバルメニューにこういった項目を並べているサイトは非常に多いと思います。

ただ、これはこれで決して問題があるわけではありませんが、サイト運営者としては次のような感じで「カテゴリー群」と「それ以外の要素」を分けて設置しているような意識もあるかもしれません。

実際、「カテゴリー」と「お問い合わせ」って違う意味合い/役割がありますよね。

と、前置きが長くなりましたがこの役割の違いを視覚的に見せられないかなあと思い、最近グローバルメニューにこのような「区切り線」を入れてみました。実際にサイト上での表示を見てもらうとわかりやすいと思います。

このような感じで区切り線を入れてあげると、同列に並べられていたものの役割の違いがわかりやすくなり、特に「about」「contact」などのページが目立ちやすくなるような気がします。気がするだけかもしれません。

ちょっと実装方法は違いますが、無料WordPressテーマ「monozuki」や僕が個人的に超好きなサイト「No.26」さんなどで、こうしてグローバルメニューを分けている様子が見受けられました。

– WordPress無料テーマ「monozuki」を作りました｜カトウタクミ
– No.26

というわけで、カスタマイズ方法について。

実装方法はいたってシンプルで、以下コードを追加CSSに追記するのみです。カスタマイズの際にはあらかじめ子テーマを導入しておきましょう。

@media screen and (min-width: 768px) {
.c-gnav>li:nth-child(5)::before {
    position: absolute;
    content: "";
		margin: auto;
    left: 0;
    top: 6px;
    bottom: 0;
    width: 1px;
    height: 40%;
    background-color: #464646;
    opacity: .6;
}
.c-gnav>li:nth-child(5) {
    padding-left: 4px;
	}}

簡単に解説すると、まずメディアクエリでPCのみにカスタマイズが反映されるようにしています。今回実装する区切り線はスマホメニューやハンバーガーメニュー内の項目とはちょっと相性が良くないので。

そしてもう一点重要なのが:nth-child(5)のところ。

確か擬似クラスと呼ばれるものだったと思いますが、このカッコ内の数字を変えることによって区切り線を表示させる箇所を変更することができます。

紹介したコードには5という数字、これはつまり「5番目のリストの手前」に区切り線を入れるようになっています。このサイトで言えばこんな感じで「about」の前ですね。

この区切り線を入れる箇所はサイトによって違うと思うので、「何番目のリストの手前に区切り線を表示させたいか」ということを念頭に2つある:nth-child(5)の数字の部分を変えていただければと思います。

紹介したコードでは僕個人の好みで線の長さ/色/余白など設定しているので、必要であれば好きなようにその辺りは調節してみてください〜。