WordPress メニュー項目の間に縦線を追加する方法

はじめ

この記事では、 WordPress メニューの項目間に縦線を追加する方法をTwenty Twelveテーマを例に挙げて説明します。

Twenty Twelveテーマのメニューを見てみると以下の通りです。

このメニューの形を次のように縦線がある形に変えてみましょう。

上記のように縦線があるメニューの外観は、いくつかの状況での応用が可能です。 仮にこのサイトの上部にあるログイン関連メニューを配置するために使用することができます。

まず、このタスクを実行するためには、CSSコードをテーマのスタイルシート（style.css）に追加する必要があります。 CSSコードをスタイルシートに追加する方法は、 ここを参照してください。

隣接セレクタを使用する

最も簡単な方法は、隣接セレクタ（Adjacent sibling selectors：隣接兄弟セレクタ）を使用することです。 （このセレクタの詳細については、 ここ 参考）

まず、メニューの要素を調べて、メニューに関連する要素が何であるかを確認します。 Chromeなどのブラウザで右クリックし、「要素チェック」を選択して要素を確認します。

.menu-menu-1-container> ul> liまでは、メインメニューの項目に該当します。
基本的には次のようなCSSコードを使用して縦線を追加することができます。

.menu-menu-1-container > ul > li + li a:before {
    content: "|";
}

他のテーマでは、.menu-menu-1-container部分をそのテーマに合った要素に変更します。 その後、メニューが次のように変わります。

垂直線の位置を調整する必要がね。 CSSコードを若干修正してみると

.menu-menu-1-container > ul {
  border: 0!important;
}

.menu-menu-1-container > ul > li {

margin-right: 0;
margin-left: 0;
padding: 0 10px 0 0px;
}

.menu-menu-1-container > ul > li + li a:before {
    content: "|";
  margin-right: 10px;
}

上下の境界線をなくし、メニュー項目の間にpaddingを追加すると、私たちが望む効果を与えることができます。

この方法では、「+」セレクタを使用して比較的単純に縦線を追加しました。 (この方法は Internet Explorer 8 以降でのみ適用されます。 CSSとIEの互換性参考.)

他の方法

別の方法として、次のようなコードを使用することができます。

.menu-menu-1-container > ul > li:not(:first-child) {
	border-left: 1px solid #BDBDBD;
}

上記のコードを追加してみると次のように少し型崩れ形になります。

最初の方法の核心は、 li + liのように、隣接する選択子を使用これを行うには、この方法の鍵は、「メインメニュー項目のすべての左側に枠線を追加しますが、最初の項目の左枠線を除外する」ことです。 そのために not（：first-child）が使用れました。 同様にコードを追加してpaddingなどを追加する必要があります。

次のようなコードを追加すると、最初の方法と同じ効果を得ることができます。

.menu-menu-1-container > ul {
  border: 0!important;
}

.menu-menu-1-container {
  height: 1.2em;
}

.menu-menu-1-container > ul {
  height: 1.2em;
padding: 1px 0 1px 0;
}

.menu-menu-1-container > ul > li {

margin-right: 0;
margin-left: 0;
  height: 1.2em;
padding: 0 10px 0 10px;
}

.menu-menu-1-container > ul > li:first-child {
/* padding-left: 0px!important; */
}

.menu-menu-1-container > ul > li > a {
  margin-top: -1.22em;
  height: 1.2em!important;
}


.menu-menu-1-container > ul > li:not(:first-child) {
	border-left: 1px solid #BDBDBD;
}

他にもいくつかの方法を使用して同じ効果を得ることができます。 CSSの使用にどの程度慣れてくると十分応用が可能になります。 そして、上記の方法は、Twenty Twelveテーマに適用したが、他のテーマでも同じ原理で適用が可能です。 （テーマに沿って容易かもしれない難しいこともあるでしょう。）