【コピペだけ！】THE THORのカテゴリーをカスタマイズ！

ここあです。

頑張って書いたブログの記事を

たくさん読んでもらうには読者のユーザビリティを

上げるのが一番効果的です。

なので、

• どんな記事を書いているのか
• どんな記事が一番読まれているのか

サイドバーに

カテゴリーや人気記事ランキングとして

表示させている方は非常に多いですよね。

もちろん、私も表示させています。
※カテゴリーは絞ってますが（笑）

THE THORにも、カテゴリーや人気記事を

表示させるためのウィジェットが実装されていますが

THE THORに関して言えば、カテゴリーのデザインが

少し分かりにくいです＾＾；

こんな感じなので…

何が分かりにくいかというと

メインカテゴリーとサブカテゴリーが

少し見分けにくいと思いませんか？

まぁ、気にしない人は気にしないと思いますが…（笑）

なので、私と同じようにカテゴリー表示が

少し見にくいと気になっている方が

いるかもしれませんので

今回はそんなTHE THORのカテゴリー表示を

見やすくカスタマイズする方法を

ご紹介したいと思います。

また、今回は

• 従来のデザインを見やすくしたもの
• 私のサイトと同じようにボタン形式にしたもの

それぞれ２種類をご紹介いたしますので

もしも「デザインを変更したい！」と思ったあなたは

ぜひカスタマイズしてみてください＾＾

THE THORのカテゴリーデザイン

まず、最初にTHE THORのカテゴリーデザイン

2パターンをご紹介致します。

デザインが気に入らなかった方は

ここで退場してくださいね。寂しいですが…（笑）

従来のカテゴリーをアレンジしたデザイン

こちらがTHE THORの従来のデザインをアレンジした

カテゴリー表示になります。

グレーでシンプルにまとめていますが

色は自由に変更できます。

※色の変更など、カスタマイズ方法はこの記事に書いています。

記事数も表示できるので、非常に見やすいデザインです。

カテゴリーをボタン風にアレンジしたデザイン

こちらのデザインは私のサイトと同じような

ボタン風のデザインにアレンジしたカテゴリー表示になります。

ただし、こちらのデザインを採用する場合は

階層表示をしたり、記事数を表示させるとデザインが崩れるので＾＾；

• 階層表示は不可
• カテゴリーの文字数は7文字まで
• 記事数の表示はNG（文字数が少なければOK）

という条件付きです（笑）厳しい〜

なので、本当に読んでほしいカテゴリーだけに絞りたい方

もしくは、シンプルなデザインに変えたい方のみ

採用していただければと思います。

あくまでもこちらのデザインは他の方と

「がっつり差別化したい」という方へのおまけです＾＾

※ユーザビリティはあまり良くないと思いますので＾＾；

ということで、順番に設定方法を解説していきますね。

THE THORのカテゴリーを表示させる方法

まずは基本的な部分から。

THE THORのカテゴリーを表示させる方法です。

すでにカテゴリーを表示させていて

設定方法が分かっている場合は飛ばしてくださいね。

また、カテゴリーの設定方法は解説致しませんので

カテゴリーの設定がまだできていない場合は

先にカテゴリーの設定を済ませてください。

それでは設定していきましょう。

THE THORのサイドバーでカテゴリーを表示させる場合は

ダッシュボードメニューから外観 → カスタマイズをクリック

続いて、画面下の方にあるウィジェットをクリックします。

ウィジェットをクリックしたらさらに

「サイドバーエリア」をクリック。

サイドバーエリアをクリックしたら

「＋ウィジェットを追加」をクリックしましょう。

そうすると、いろんなウィジェットが表示されますので

その中から「カテゴリー」を選んで追加してください。

「カテゴリー」を選んでクリックするとこのように

サイドバーエリアにカテゴリーのウィジェットが追加されますので

タイトルを変える場合は、タイトル名を入力し

変更しない場合はそのまま空欄にしてください。

また、ここで「階層を表示」にチェックを入れると

サブカテゴリーが表示されますし、投稿数を表示したければ

「投稿数を表示」にチェックを入れましょう。

階層表示、投稿数の表示は以下の通りです。

先にご紹介した従来のカテゴリーデザインをアレンジする方は

階層表示も、記事数表示も両方チェックを入れていただいて大丈夫です。

※サブカテゴリーより深い階層の設定まではしてませんので、あらかじめご了承ください。

最後に「公開」ボタンをクリックして設定を保存しましょう。

簡単ですよね＾＾

THE THORのカテゴリーをカスタマイズする方法

私がいつも説明しているカスタマイズというのは

基本設定によるカスタマイズではありません。

あくまでもCSSを使ったオリジナルカスタマイズの

設定方法です。

なので、今回も私がご紹介するCSSコードを

あなたのサイトにコピペすることで

デザインが変わるというものです。

ということで、CSSコードはダッシュボードメニューから

外観 → カスタマイズをクリックし

追加CSSをクリック

以下の部分にコードをコピペしてください。

カスタマイズ自体はCSSコードをコピペするだけで

簡単にできますので、ぜひ試してみてくださいね＾＾

ということで、CSSコードをコピペして

THE THORのカテゴリーデザインを変更しましょう！

まず先にご紹介するCSSコードのデザインはこちら

従来のカテゴリーデザインをアレンジした

CSSコードになります。

上記、デザインに変更したい場合は

以下のCSSコードを追加CSSにコピペしてください。

追加CSSにコピペ

.widget.widget_categories ul{
border-left: 0;
border-right: 0;
border-bottom: 0;
}.l-sidebar .widget.widget_categories ul li {
background:#eee;
border-top: solid 1px #ccc;
}.widget.widget_categories ul .children li {
border-top: dashed 1px #ccc;
background:#fff;
}.l-sidebar .widget.widget_categories h2 + ul{
border-bottom:solid 1px #ccc;
}.widget.widget_categories ul li a{
color: #333;
background: #eee;
}.l-sidebar .widget.widget_categories ul li a:before, .menuBtn .widget.widget_categories ul li a:before {
margin: 0px 5px;
color: #aaa;
content: "\e939";
font-size:100%;
}.l-sidebar .widget.widget_categories ul li .children li a{
background: #fff;
color: #999;
padding-left:30px;
}.widget.widget_categories ul li .children li a:before {
color: #aaa;
content: "\e92f";
}.l-sidebar .widget.widget_categories ul li a:hover, .l-sidebar .widget.widget_categories ul li .children li a:hover, .menuBtn .widget.widget_categories ul li .children li a:hover {
background-color: #22c4d6;
}.widget.widget_categories ul li .children li a:hover {
color:#fff;
}.widgetCount {
background: #aaa;
color: #fff;
min-width: 20px;
min-height: 20px;
line-height: 20px;
margin-left: 0px;
}.widget.widget_categories ul li a:hover{
color:#fff;
}

コピペした時点でカテゴリーのデザインが変わります。

CSSコードに何のコードか大体書いてありますが

念のためコードの変更方法も解説致します。

CSSコードの調整方法

それでは順番にCSSコードの調整方法について解説致します。

メインカテゴリーの上部線の色を変えたい

メインカテゴリーの上部線の色を変えたい場合は

上記コードborder-top: solid 1px #ccc;の

カラーコード#cccの部分を変えると変更できます。

また1pxの数字を変更することで

線の太さを変えることもできます。

メインカテゴリーの一番下の色を変えたい

カテゴリーの最下部の線色を変更したい場合は

上記コードborder-bottom:solid 1px #ccc;の

カラーコード#cccの部分を変えると変更できます。

サブカテゴリーの上部線の色を変えたい

サブカテゴリーの上部線（破線）の色を変更する場合は

上記コードborder-top: dashed 1px #ccc;の

カラーコード#cccの部分を変えると変更できます。

またdashedをsolidにすれば、破線から実線に変更することもできます。

メインカテゴリーの背景色を変えたい

メインカテゴリーの背景色を変更する場合は

上記コードbackground: #eee;の

カラーコード#eeeの部分を変えると変更できます。

メインカテゴリーの文字色を変えたい

メインカテゴリーの文字色を変更する場合は

上記コードcolor: #333;の

カラーコード#333の部分を変えると変更できます。

サブカテゴリーの文字色を変えたい

サブカテゴリーの文字色を変更する場合は

上記コードcolor: #999;のカラーコード

#999の部分を変えると変更できます。

また、サブカテゴリーの文字の左右位置を

padding-left:30px;の30pxの数字を変えることで

調整が可能です。数字を減らせば左に、増やせば右に動きます。

メインカテゴリーのアイコン色を変えたい

メインカテゴリーのアイコン色を変更する場合は

上記コードcolor: #aaa;のカラーコード

#aaaの部分を変えると変更できます。

サブカテゴリーのアイコン色を変えたい

サブカテゴリーのアイコン色を変更する場合は

上記コードcolor: #aaa;のカラーコード

#aaaの部分を変えると変更できます。

記事数の文字色と背景色を変えたい

記事数の文字色と背景色を変更する場合は

上記コードcolor: #fff;のカラーコード

#fffの部分を変えると文字色を変更できます。

またbackground: #aaa;のカラーコード

#aaaの部分を変えると背景色を変更できます。

マウスオーバーした時の色を変えたい

カテゴリーにマウスを乗せた時の色を変更する場合は

上記コードbackground-color: #22c4d6;の

カラーコード#22c4d6の部分でマウスホバー時の

色を変更することができます。

マウスオーバーした時の文字色を変えたい

最後はカテゴリーにマウスを乗せた時の文字色を変更する方法です。

マウスを乗せた時のメインカテゴリーの文字色は

上記コードcolor:#fff;のカラーコード#fffで変更できます。

また、マウスを乗せた時のサブカテゴリーの文字色は

上記コードcolor:#fff;のカラーコード#fffで変更できます。

以上、CSSの調整方法を全てご紹介しましたので

最初は何のこっちゃ意味が分からないかもしれませんが

コードを触っているうちに慣れてきますので

頑張って調整してみてくださいね＾＾

続いてあまり機能性としてはよろしくない

デザインありきのカテゴリーボタンです（笑）

どうしても他のユーザーとデザインで差別化したい！

というこだわり屋さんのあなただけ採用してくださいね＾＾

上記デザインのCSSコードはこちらです。

タイトル

.widget.widget_categories ul li {
display: inline-block;
width: 48%;
border-color:#fff;
margin-bottom: 5px;
}.widget.widget_categories ul, .widget.widget_nav_menu ul.menu {
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
}.widget.widget_categories ul{
text-align:center;
}.widget.widget_categories ul li a {
background-color: #fff;
border:solid 1px #22c4d6;
color:#5d5d5d;
}.widget.widget_categories ul li a::before {
content: "\f15c";
font-family: "Font Awesome 5 Free";
font-size: 1.5rem;
color: #22c4d6;
}.widget.widget_categories ul a{
border-radius: 5px;
font-size: 14px;
}.widget.widget_categories ul li a:hover {
background-color: #90e1ea;
color:#fff;
font-weight:400;
}.widget.widget_categories ul a{
border-radius: 5px;
font-size: 14px;
box-shadow: 0 2px 2px rgba(0,0,0,.5);
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}.widget.widget_categories ul a:hover{
box-shadow: 0 2px 2px rgba(0,0,0,.8);
transform: translate3d(0px, 2px, 0px);
}

ボタン風カテゴリーに関してはサイドバーのカテゴリー設定で

階層表示にチェックさえ入れなければ

全てのカテゴリーがボタン形式で表示されます。

ボタン風カテゴリーのCSS調整方法

一応CSSの調整方法は記述しますが

先のカテゴリーアレンジ版ほど詳しくはあえて書きません。

それほど需要はないと思いますので＾＾；

ボタンの囲み罫の色を変えたい

ボタンの囲み罫の色を変更する場合は

上記コードborder:solid 1px #22c4d6;の

カラーコード#22c4d6の部分で変更できます。

アイコンの色を変えたい

アイコンの色を変更したい場合は

上記コードcolor: #22c4d6;のカラーコード

#22c4d6の部分で変更できます。

こちらのカスタマイズ方法はこれだけにしておきます（笑）

THE THORのカテゴリーデザインをカスタマイズする方法まとめ

今回はTHE THORのカテゴリーデザインを

コピペだけでカスタマイズする方法をご紹介しました。

THE THORも最近は非常に注目されているテーマですし

THE THORの利用者も少しずつ増えてきています。

なので、STORKほどではないとは言え

いずれはデザイン被りを避けるために、他のユーザーと

デザインで差別化したいというTHORユーザーも増えてくるはずです。

カテゴリー表示のデザインに関しては

従来のデザインに毛が生えた程度のカスタマイズですが

それでも、少し手を加えればサイトの印象は変わって見えます。

なので、今回はデザインメインというよりは

サイト訪問者のユーザビリティを上げるために

カテゴリー表示をみやすくしたというものになりますので

ぜひあなたも取り入れて

いろんな記事をみてもらえる見やすくて分かりやすい

カテゴリーデザインにしていただけたらと思います。

カテゴリーデザインの変更はほんの些細なことですが

サイト訪問者のことを考えて作り込んでいくと

小さな積み重ねがやがては大きな結果を生むようになってきます。

だから、デザインに限ったことではありませんが

これからブログやサイトで収益化を図ろうと考えるのであれば

自己満足なデザインをするのではなく

あなたのサイト訪問者のことを第一に考えた

ユーザビリティの高い見やすくて分かりやすい

サイトデザインを意識していただけたらと思います。

ということで、これからもまだまだ

カスタマイズ系の記事はアップしていきますので

少しずつでも良いサイトになるように手を加えてみてくださいね。

最後までお読みいただきありがとうございました!