Emanon Proに「子カテゴリ」を作りたい！
当ブログで利用しているWordPressテーマ「Emanon Pro」は、WordPressの管理画面で設定できる「ウィジェット」ごとに決まったCSSが適応されます。
そのため、サイドメニューのカテゴリアーカイブ（カテゴリ一覧）において「子カテゴリ」を作った場合、↓の画像のように「親カテゴリ」との違いが分からず、しかもデザインが崩れてしまいます。
親テーマを直接カスタマイズするなら、CSSを書き換えるだけで良いのですが、子テーマを利用している場合、普通にCSSを追加するだけでは、このデザインの崩れは治りません。
そこで今回は、Emanon Proで子カテゴリを作りたい人向けに、親テーマのCSSを解除して、子テーマに独自のCSSを設定する方法をご紹介させていただきます。
今回の記事を書いた時点での当ブログの環境は以下の通り。
※2017年4月14日：ver1.3.1に対応したコードに変更済み
- サーバー：エックスサーバー
- WordPress：4.7.3
- Emanon Pro：1.2.9 → 1.3.1（子テーマを利用）
この記事の目次
この記事の対象となる方
まず大前提として、この記事は以下のような方に向けて書いています。
- WordPressテーマ「Emanon Pro」を利用している
- 「Chrome」か「Firefox」が使える
- 検索すればCSSの意味がなんとなく分かる（自分で書けなくてもOK）
- テーマファイル（php）は触らなくてOK
当ブログのように、「子カテゴリ」のインデントを下げ（2文字分くらい左にずらす）、アイコンを追加するだけならコピペでOKです。
ただし、マウスカーソルを近づけた時の動きや色を変更するなど、さらにCSSを追加したい場合は、「3.」以降を独自にカスタマイズする必要があります。
1.サイドメニューのカテゴリ部分のCSSセレクターを調べる
CSSセレクターとは、「CSSを適応する対象」のことです。
「Emanon Pro」では、「side-widget」というクラス名でサイドメニューのCSSをまとめて設定しており、「子カテゴリ」を作った時のようなリスト（li）の入れ子構造について書かれていません。
かといって「side-widget」というCSSセレクタに対して、追加のCSSを記載してしまうと、カテゴリアーカイブだけでなく、別のウィジェット（、当ブログにおける「運営情報」や「人気記事」など）にもCSSが適応されてしまいます。
そこでまずは、「Firefox」か「Chrome」の開発者機能を利用して、カテゴリーアーカイブを意味するCSSセレクターを調べましょう（以下ではFirefoxを使って説明）。
あなたのブログを表示している状態でキーボードの「F12」を押すと、ブラウザの下半分or右半分に「開発者ツール」が出現
「ページから要素を選択します」を有効にして、カテゴリーアーカイブの「side-widget」を選択
カテゴリーアーカイブの「side-widget」のすぐ下の<ul>で右クリックして「コピー」→「CSSセレクター」を選択
すると、以下のようなCSSセレクターが入手できる（下記はあくまで当ブログの場合で、あなたのブログでは別のCSSセレクターになる可能性・大）
|
1 |
.col-sidebar > div:nth-child(1) > ul:nth-child(2) |
Emanon Proは2017年4月12日にVer1.3.0になり、サイドメニューの構造が変更になりました。それに対応する形で抜き出したCSSセレクタは以下の通り。
|
1 |
#top > div.content > div > aside > div:nth-child(1) li |
2.親テーマのCSSを解除する（「initial」を利用して無効化）
次に、親テーマで設定されているCSSを解除（無効化）しましょう。
「Emanon Pro」ではカテゴリーアーカイブを含めて、サイドメニューのリストに以下のようなCSSが適応されています。
|
1 2 3 4 5 6 7 8 9 10 11 |
.side-widget li a:before { font-family: "FontAwesome"; content: "\f105"; position: absolute; top: 50%; right: 0; margin-top: -8px; color: #e2e5e8; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; } |
不要なCSSはリストの後ろのアイコン「＞」なので、子テーマのstyle.cssに以下のように追記しましょう。
|
1 2 3 4 |
/* 親テーマのカテゴリーアーカイブのアイコンフォントを無効化 */ .col-sidebar > div:nth-child(1) > ul:nth-child(2) li a:before { content: initial; } |
|
1 2 3 |
#top > div.content > div > aside > div:nth-child(1) li a:after { content: initial; } |
これで、カテゴリ名の右側の「＞」が無くなりました。
「initial」というのは、CSSの設定をブラウザーの初期値に戻すプロパティです。通常、リスト（li）にはアイコンは設定されていないので、「initial」を設定することでアイコンが無くなるわけです。
3.子カテゴリに独自のCSSを適応
最後に、カテゴリーアーカイブ適応させる独自のCSSをstyle.cssに追記します（上記の親テーマのCSS解除も含めて全て記載）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*-------------------------------- カテゴリーにアイコンを追加 ---------------------------------*/ /* 親テーマのカテゴリーアーカイブのアイコンフォントを無効化 */ .col-sidebar > div:nth-child(1) > ul:nth-child(2) li a:before { content: initial; } .cat-item li { position: static; padding: 0 16px 10px 0; margin-left: 1em; padding-left: 1em; text-indent: -1em; } .cat-item li a { display: inline; font-size: 80%; line-height: 1.2em; } /* 「side-widget」を付けるのはサイトマップページに反映されるのを防ぐため */ .side-widget .cat-item li:before { content: "\f054"; font-family: FontAwesome; margin-right: 5px; color: #211e55 } |
今回は子カテゴリにのみ独自のCSSを適応させたかったので「.cat-item li」というCSSセレクターを利用しました。
ちなみに、最後だけ「.side-widget .cat-item li」としているのは、単に「.cat-item li」とした場合、WordPressプラグイン「PS Auto Sitemap」で作成したサイトマップページのデザインが↓のように崩れてしまうからです。
もし親カテゴリも含めて適応させたい場合は、先程調べたカテゴリーアーカイブのCSSセレクターをそのまま利用して、以下のように記載すればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/*-------------------------------- カテゴリーにアイコンを追加 ---------------------------------*/ /* 親テーマのカテゴリーアーカイブのアイコンフォントを無効化 */ .col-sidebar > div:nth-child(1) > ul:nth-child(2) li a:before { content: initial; } .col-sidebar > div:nth-child(1) > ul:nth-child(2) li { position: static; padding: 0 16px 10px 0; margin-left: 1em; padding-left: 1em; text-indent: -1em; } .col-sidebar > div:nth-child(1) > ul:nth-child(2) li a { display: inline; font-size: 80%; line-height: 1.2em; } .col-sidebar > div:nth-child(1) > ul:nth-child(2) li:before { content: "\f054"; font-family: FontAwesome; margin-right: 5px; color: #211e55 } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/*-------------------------------- カテゴリーにアイコンを追加 ---------------------------------*/ /* 親テーマのカテゴリーアーカイブのアイコンフォントを無効化 */ #top > div.content > div > aside > div:nth-child(1) li a:after { content: initial; } .cat-item li { position: static; padding: 0 10px 5px 1em; } .cat-item li a { font-size: 80%; line-height: 1.5em; } /* 「side-widget」を付けるのはサイトマップページに反映されるのを防ぐため */ .side-widget .cat-item li:before { content: "\f054"; margin-top: 5px; position: absolute; font-family: FontAwesome; margin-right: 5px; color: #211e55 } |
Emanon Proの子カテゴリに独自のCSSを設定する方法まとめ
今回の記事で紹介した
- Firefoxなどで変えたい部分のCSSセレクターを確認
- 「initial」を利用して親テーマのCSSを解除
- 子テーマのstyle.cssに好きなCSSを記入
という方法を使えば、自由にブログのデザインを変更することができます。
ぜひチャレンジしてみてくださいね！
また、当ブログにおいてWordPressテーマ「Emanon Pro」に追加したカスタマイズは、下記のカテゴリに全てまとめていますので合わせてご確認ください。
参考Emanon Pro カスタマイズ | こまろくNOTE
以上、TSUNJI（@tsunji1983）でした。
