【Xeory Baseカスタマイズ】子カテゴリーの階層を見やすく表示する方法

  • このエントリーをはてなブックマークに追加

こんにちは、たっそです。

バズ部さんが提供しているWordpressテンプレート「Xeory Base」。ネット上での評判もいいし、デザインもかっこいいなと思って当ブログでも採用したんですけど、実際使い始めると予想以上にシンプル。

というか寂しい(笑)というか機能面でもシンプル( ゚Д゚)

ということで、最近は四苦八苦しながらカスタマイズを行いましたので、そのへんを同じ悩みを抱える方たちと共有出来たらと思います。今回はカテゴリーを見やすく整理していきます。

テンプレートをいじる前に必ずバックアップ

言わなくってももうやってる方もいると思いますが、テンプレートをいじくる前に、Wordpressのバックアップは必ず行ってくださいね。

バックアップの仕方についてはこの記事に図解付きで書いてありますのでご覧くださいませ。

WordPressのバージョンアップはバックアップしてからだよープラグインBackWPup使用ー

では早速いってみましょう。

Xeory Baseのカテゴリーを見やすくカスタマイズする方法

そもそもなんですが、Xeory Baseのカテゴリーって親カテゴリーだけなら見やすいんですよね。なんですが、記事数も増えて子カテゴリーを作ると出てくるこの悩み。

見ずらい!!分かりづらい!!本当に子カテゴリーに分類されてるのか??ってくらい分かりずらい^^;まじか・・・って感じです。

今回は

before

after

このようなカスタマイズを行っていきたいと思います。

私の場合だと「自己アフィリエイトで初期投資をチャラ」と「難しくない!常時SSL化の全て」の部分が子カテゴリーなんですけど、beforeだと分かりにくいですよね。

なので、具体的には親カテゴリーを太字にして、アンダーラインを消す。子カテゴリーは細字でアイコンを消して余白も見やすいように微調整していきます。

カスタマイズの仕方は至って簡単です。外観→カスタマイズ→追加CSSと進んでいって、そこにコードをコピペするだけです。

子テーマは作らなくてもOK

よくCSSなどのテンプレートをいじる際には子テーマを作成しましょうなんて記事をみかけますが、Xeory Baseに限って言えば「追加CSS」という機能が付いているので作らなくても大丈夫です。

テンプレートの更新があっても追加CSSに書いたコードは上書きされませんし、間違えたコードを書いても消せばいいだけなんで。

ただ、今回は関係ないですが、functions.phpなどのphpファイルをいじる時だけはご注意くださいね。安易にいじると管理画面にすら入れなくなります。コワッ

では実際に作業に入りましょう。

図解で簡単!!Xeory Baseカスタマイズ-カテゴリー編-

まず外観→カスタマイズと進んでいってください。

するとこんな画面になりますので、「追加CSS」をクリック

そこにCSSコードを貼り付けるだけです。貼り付けするコードはこちら。

こんな感じです↓

これを貼り付けたら上のほうの「公開」をクリック。以上で完了です。カスタマイズ成功しましたか??

もし変更が適応されない場合はセレクタっていう場所指定の名前が異なっている場合があります。

デベロッパーツールを駆使して調べてみましょう。

デベロッパーツールの使ってセレクタを特定

まずキーボードの一番上の列「F12」を押しましょう。または、右クリックから「検証」をクリック。

するとこんな文字記号がズラーーーーっと横に出てくると思うので、左上の矢印をクリック。

そしたらカテゴリーのリストの部分にカーソルを合わせてクリック。

そしたら#categoriesっていう記述を探しましょう。

この部分です。

ここの#categories-3の「3」っていう数字がさっき書いたコードと違ってませんか??これが違うとうまくいきません。

なので、自分のカテゴリーリストをクリックしてみてこの数字が1とか2って出てきた場合は、さっきのCSSコードの数字も変えてみてください。そしたら変更が適応されるかもしれませんよ^^。

SNSでもご購読できます。

コメントを残す

*