WordPressの無料テーマcocoonでグローバルメニューをカスタマイズする方法

WordPressの無料テーマcocoonでグローバルメニューをカスタマイズする方法

グローバルメニューを作成するのは比較的簡単。ただ、カスタマイズはちょっと難しい。
まずは、グローバルメニューの作成方法を説明しよう。

今回作成したグローバルメニューは、カテゴリ+ホーム。
外観 → メニュー からまずはグローバルメニューの名前を作成する。今回は、メニューという名前で作成した。
次に、メニュー項目を追加のところで、カテゴリを選択。メニューに追加したいカテゴリにチェックマークを付ける。
※今回は全てだったので、すべて選択をチェック。
メニューに追加ボタンを押す。

次に、ホーム(トップ)ページを追加する。
同じく、メニュー項目を追加のカスタムリンクを選択。
トップページのURLと名前を作成。ここでは、ホームで作成。
メニューに追加ボタンを押す。

その後、順番を並び替えて、メニューの位置はヘッダーナビを選んで保存する。
これで、グローバルメニューは完成。

あとは、グローバルメニューをちょっとカスタマイズ。

外観 → テーマエディター から、スタイルシート (style.css)のお尻に追加しよう。

グローバルメニューのカスタマイズ


/*グローバルメニューのカスタマイズ*/
.navi {
 border-top:solid 2px #800080;
 border-bottom:solid 2px #800080;
 }

トップとボトムに線を入れるカスタマイズ。solidは直線を、2pxで線のサイズを、そのあとの数字で色を調整可能。
つまり、ここをいろいろ変えることで、カスタマイズが可能になる。

コメント