サイトアイコン やっとこブログ

WordPressでカテゴリー階層表示のカスタマイズ方法（テーマ：Xeory）

やっとこブログ

WordPressのサイドバーにある「カテゴリー」、この部分ってブログ見てくれている人が他のページも見てもらうために重要だと思うんですが、WordPressのテーマ「Xeory」では、「階層ごと」で表示するといまいち分かりにくいデザインになっています。

正直どこが「親カテゴリー」でどこが「子カテゴリー」なのか全然わからないです。線の境目もよくわからないし、線が二重になっている部分もあるし、とてもクリックしようとは思えません。

もうちょっと「親カテゴリー」の中にはこの「子カテゴリー」があるんだよと、視覚的に分かりやすく作りたいなと思ったので、サイドバーのカテゴリーデザインをカスタマイズしていきます。

コアラ
親カテゴリーと子カテゴリーわかりやすく分けるぞ

 

1.カテゴリーとは

カテゴリーとはブログのサイドバーの部分にあるこれです。

例えば親カテゴリーに「WordPress」、子カテゴリーに「プラグイン」と「カスタマイズ」など、ブログを見てくれている人が情報を探しやすくするために、設定する必要があります。ちゃんと設定することで

と、訪れた「ユーザー」にも「SEO」的にも良いものです。

情報が探しやすいと訪れたユーザーのクリック数も必然的に上がります。どこに何があるか分からないWebページって見ていてイライラしますよね。

そんなページは大体右上の×で閉じられるか他のページ行っちゃいますからね。階層ごとのデザインが見やすい、ということは必須だと思います。

コアラ
やっとこブログもこれまでカテゴリーほったらかしだったけどな

 

2.カテゴリーのデザインイメージ

カテゴリーのデザインカスタマイズイメージです。「Xeory」のシンプルさを残しつつ、「親カテゴリー」と「子カテゴリー」をパッと見てすぐに分かるようにしました。

変更前のカテゴリー

こちらが初期のカテゴリー設定です。階層表示もしていない状態です。「親カテゴリー」だろうが「子カテゴリー」だろうが関係なく、同じデザインで記載されています。やはり分かりにくいですね。

変更後のカテゴリー

コチラが変更後のカテゴリーです。パッと見て「親カテゴリー」と「子カテゴリー」が分かりますね。

今回のデザインは「親カテゴリー」と「子カテゴリー」を「階層表示」にして、親カテゴリーは太字で表示しています。初期設定であった線は削除して「子カテゴリー」は左に余白を追加して断層的に表示しています。

コアラ
パッとみて「親カテゴリー」と「子カテゴリー」がわかるぞおおお

 

3.カテゴリーの設定

早速カテゴリーのデザインをカスタマイズしていきますが、今回のデザインにするには、カテゴリーの設定で「階層を表示」にチェックを入れる必要があります。その設定からやっていきましょう。

まずはWordPressトップページから「外観　→　ウィジェット」をクリックしましょう。

右側の「カテゴリー」を選択して「階層を表示」にチェックを入れて、「保存」をクリックします。

これで準備完了です。今回は階層表示にしてデザインをカスタマイズするので、ここにチェックを入れないとうまくデザインが反映されません。

同じデザインにする場合は「階層を表示」に必ずチェックをいれましょう。

3.設定画面に移動

カテゴリーの「階層を表示」の設定が完了したら、次はcssを追記していきましょう。まずはWordPressトップページから「外観　→　カスタマイズ」を選択しましょう。

下図の画面が出たら「追記css」をクリックしましょう。

下図の赤枠部分にコピペすればOKです。

追加cssをまだ利用したことが無い場合は、この部分は空欄になっているはずです。上部のコメント「/*ここに～詳しくは～クリックしてください。*/」の下にコピペしましょう。

このコメントのように「/*」と「*/」に囲まれている部分はコメントアウトといって、cssを記載しても無効になります。「/*」と「*/」に囲まれている中にはcssはコピペしないでください。

この「コメントアウト」ですが、名前の通りコメントを入れることが可能です。例えば下図赤枠部分のように「/*」と「*/」で残したいコメントだけを囲めばOKです。

これで今回追記したcssの内容や場所が一目で分かるようになりましたね。cssをどんどん追記していくと、昔のやつとか普通に忘れますし、どこの何を設定したか分からなくなります。

「コメントアウト」を利用して、いつみてもcssの内容や場所が分かるようにしておきましょう。

4.cssの追記

早速cssを追記していきましょう。「追記css」の部分に記載するので、コピペで大丈夫です。自分のブログに合わせてデザインをカスタマイズしたい場合は、コピペした後にcssを変更してください。

右側に自分のサイトが表示されていますが、「追記css」を変更すると、右側のデザインがリアルタイムで変更されます。納得のいくデザインになったら、上の「保存して公開」をクリックすればOKです。

↓↓コピペ用css↓↓


#categories-2 ul li {
 border-bottom:none;
 padding:5px 0;
 font-weight:bold;
}

#categories-2 ul li.cat-item ul.children {
 padding:15px 0 15px 15px;
}

#categories-2 ul li.cat-item ul.children
li a{
 font-weight:normal;
 background-image: none;
}

もともと設定してあるcssを上書きしている感じなのですが、内容的には下記のイメージです。

「padding」で追加した余白は下図のイメージです。

4-1.#categories-2 ul liで追加した余白

この部分に追加した「padding:5px 0;」では「子カテゴリー」の上下に下図のイメージで余白を追加しています。

正確には子カテゴリーのだけではなく、「親カテゴリー ＋ 子カテゴリー」の範囲の上下にも余白が入っているのですが、図にするとややこしいので書きません。

追記した余白も「5px」とわずかなので、そんなに気にしなくても大丈夫だと思います。

4-2.#categories-2 ul li.cat-item ul.childrenで追加した余白

この部分に追記した「padding:15px 0 15px 15px;」では「子カテゴリーをまとめた」範囲の上下と左に下図のイメージで余白が入っています。

自分のブログで余白の調整をする際は、参考にして「padding」の部分の数字を変更してください。

コアラ
個人でブログカスタマイズしていると反映されないかも

 

5.まとめ

以上が「WordPressでカテゴリーをカスタマイズする方法（テーマ：Xeory）」です。

「カテゴリー」って結構地味な部分ですが、自分の探している情報を見つけるのに重要な部分です。せっかく良いこと書いているブログでも、他のページが探しにくかったら見る気なくなりますよね。

自分と同じ趣味や同じことをやっているブログの「カテゴリー」って個人的にはついついクリックして他のページも見てしまいます。

せっかくなので他のページも見てもらえるように、分かりやすくデザインしてみましょう。

 

その他のWordPressカスタマイズは、

【hタグ】 【ヘッダー・メニュー】 【サイドバー】 【プラグイン】 【URL変更】 【その他】

上記の記事を参考にしてください。

モバイルバージョンを終了