公開日: 更新日:

WordPressテーマLION MEDIAの、カテゴリーウィジェットをカスタマイズする

WordPressテーマLION MEDIAの、カテゴリーウィジェットをカスタマイズする

どうも!ヤマダカイト(@slash_kaito)です。

今回は、LION MEDIAのカテゴリーウィジェットをカスタマイズする方法をご紹介します。

そもそものきっかけは、マサオカブログさんの「雑記ブログを13万pvまで成長させた8ヶ月間の戦略を晒す」を読んだこと。

「だいたい1つのジャンルに5記事以上集めて一つのカテゴリを作る感じです。記事と一緒に、カテゴリも決めます。」

ヤマダ
なるほど。ジャンル決めてカテゴリー作って、5記事くらい書けばええんやな。ほんほん。そういえばクロネさんもなんか言ってたな…

クロネのブログ講座「読者が分かりやすいブログのカテゴリー名の決め方」でも言っていました。

カテゴリーの整理は大事、って。読者がわかりやすいようにしたほうがいい、って。

ヤマダ、カテゴリ整理します!!

カテゴリーを分かりやすく整理してみた

以前までは、「デザイン・仕事・楽天RMS・ブログ運営・HTMLCSS・ライフスタイル」というバラバラさ加減。

大分類と小分類が一緒くたになってしまっています。

デザインといっても紙のデザインもあるし、webデザインもあるし、考え方からツールの使い方まで幅広くあります。

これはユーザー目線で考えてみてもわかりにくい!ということで変更しました。

それがこちら。

新しいカテゴリー

小分類も入れて、どんなジャンルの投稿なのかが一発でわかるように変更しました。

アクセス伸びたらいいなぁ・・・!(願望)

離脱率も減らないかなぁ・・・!(願望)

その後さらに変更(※2018年5月31日追記)

カテゴリ

これまで「デザイン」「ネットショップ」など、ただの「名詞」だったのを閲覧者目線に変更

閲覧者が「何をしたいか」「何を知りたいか」という、目的に応じた「動詞」のカテゴリー名にしました。

カテゴリ2

サブカテゴリーも調整。

あんまり数が多すぎても目がすべって読みにくいので難しいところ。

サイドバーにカテゴリーを表示させるとデザインがイマイチ…

で、サイドバーにカテゴリー表示をすることに。

クロネさんマサオカさんも使っている、Wordpressテーマ「SANGO」みたいにしたかったんです。。。

こういうの。

クロネのブログ講座 カテゴリー
画像:クロネのブログ講座のスクリーンショット

でも、サイドバーにカテゴリー表示させるとなんか変です。

下線幅のマージンがバラバラだし、(写真には無いけど)サブカテゴリーにも黒丸ついてるし、

大カテゴリと小カテゴリのフォントもサイズも同じだから見にくい・・・!

カテゴリー修正前
大カテゴリーと小カテゴリーの違いがわかりにくい

これは何とかしないといけません。

ユーザビリティを上げるためにカテゴリーを設置したにもかかわらず、そのカテゴリー自体のユーザビリティが低ければ本末転倒。

カテゴリーのデザインを修正しました。

カスタマイズで、カテゴリーの見栄えを良くする!

カテゴリーはCSSでいじるだけなので、カンタンです。

もちろん子テーマのstyle.cssに追記します。

子テーマに関しては前回の記事を参考に。

変更箇所は以下の3点。

・親カテゴリーは太字、子カテゴリーは細字にします。

・下線を消します。

・子カテゴリーの頭の黒丸を消します。

CSS

もうそのまま、子テーマにコピペしてもらえればバッチリです。

/*サイドバーウィジェット カテゴリー調整*/
.widget ul li {
    font-weight:bold;
}
.widget ul li .cat-item{
    font-weight:normal!important;
}
.widget ul li .cat-item:before{
    display:none!important;
}
.widget ul li {
    margin-bottom: inherit!important;
    border-top: inherit!important;
}
.widgetSticky {
    padding-top: 130px;
}解説

.widget ul liでウィジェットのリストを太字に。

.widget ul li .cat-itemがサブカテゴリー。こちらは太字にしたくないので、normalに。

.widget ul li .cat-item:beforeが黒丸。こちらはdisplay:none;で非表示。

.widget ul li のmargin-bottomをinheritにして行間を均等に、border-topをinheritで非表示に。

僕はカテゴリーウィジェットを固定サイドバーに入れて、かつヘッダーを固定していたので、.widgetStickyで天地の高さを調整。

ヘッダーにposition:fixed;を指定すると、高さ要素がなくなってしまうので、固定サイドバーが隠れてしまうんですね。

表示確認を行なって完了。

カテゴリー修正後

キレイに揃いました。

キモチイイ―!!!あとはここを埋めていくだけ!!って考えるとモチベーションも高まりますね!!

本日のまとめ

WordPressテーマ「LION MEDIA」のカテゴリーをカスタマイズするCSSのご紹介でした。

カテゴリーの調整はモチベーションだけでなく、ユーザビリティ、ひいてはSEO的にも良い結果をもたらしてくれます。

気づいた時にカスタマイズしておきたいですね。

それではまた。

 

ヤマダ
この記事が役に立ったら、シェアorはてブしてくれるとメッチャ喜びます!

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。

ブログで稼ぐカテゴリの最新記事