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

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

 

ここあです。

 

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

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

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

 

なので、

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

サイドバーに

 

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

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

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

 

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

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

 

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

少し分かりにくいです^^;

 

こんな感じなので…

THE THORカテゴリー

 

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

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

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

 

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

 

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

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

いるかもしれませんので

 

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

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

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

 

また、今回は

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

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

 

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

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

 

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

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

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

 

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

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

 

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

THE THORカテゴリー

 

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

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

 

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

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

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

 

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

 

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

 

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

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

 

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

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

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

という条件付きです(笑)厳しい〜

 

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

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

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

 

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

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

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

 

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

 

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

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

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

 

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

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

 

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

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

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

 

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

 

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

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

ダッシュボードメニュー

 

 

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

ウィジェット追加

 

 

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

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

ウィジェット追加

 

 

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

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

ウィジェット追加

 

 

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

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

カテゴリー追加

 

 

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

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

 

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

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

 

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

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

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

カテゴリーウィジェットの設定

 

 

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

カテゴリー表示

 

 

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

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

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

 

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

簡単ですよね^^

 

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

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

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

 

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

設定方法です。

 

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

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

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

 

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

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

ダッシュボードメニュー

 

 

追加CSSをクリック

追加CSS

 

 

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

追加CSS

 

 

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

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

 

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

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

 

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

THE THORカテゴリー

 

 

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

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;/*ホバー時のメインカテゴリーの文字色*/
}

7/22 余計なコードが混ざっていたため一部修正ました。

 

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

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

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

 

CSSコードの調整方法

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

 

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

 

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

.l-sidebar .widget.widget_categories ul li {
background:#eee;
border-top: solid 1px #ccc; /*メインカテゴリー上部の区切り線*/
}

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

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

 

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

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

 

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

 

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

.l-sidebar .widget.widget_categories h2 + ul{
border-bottom:solid 1px #ccc; /*一番下の区切り線*/
}

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

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

 

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

 

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

.widget.widget_categories ul .children li, .menuBtn {
border-top: dashed 1px #ccc; /*サブカテゴリー上部の区切り線*/
background:#fff;
}

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

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

 

またdashedsolidにすれば、破線から実線に

変更することもできます。

 

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

 

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

.widget.widget_categories ul li a{
color: #333; /*メインカテゴリーの文字色*/
background: #eee; /*メインカテゴリーの背景色*/
}

上記コードbackground: #eee;

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

 

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

 

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

.widget.widget_categories ul li a{
color: #333; /*メインカテゴリーの文字色*/
background: #eee; /*メインカテゴリーの背景色*/
}

上記コードcolor: #333;

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

 

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

 

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

.l-sidebar .widget.widget_categories ul li .children li a{
background: #fff;
color: #999; /*サブカテゴリーの文字色*/
padding-left:30px; /*サブカテゴリーの文字位置*/
}

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

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

 

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

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

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

 

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

 

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

.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%;
}

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

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

 

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

 

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

.widget.widget_categories ul li .children li a:before {
color: #aaa; /*サブカテゴリーのアイコン色*/
content: "\e92f"; /*サブカテゴリーのアイコン*/
}

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

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

 

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

 

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

.widgetCount {
background: #aaa;/*記事数の背景色*/
color: #fff;/*記事数の文字色*/
min-width: 20px;
min-height: 20px;
line-height: 20px;
margin-left: 0px;
}

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

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

 

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

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

 

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

 

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

.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; /*ホバー時の背景色*/
}

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

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

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

 

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

 

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

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

.widget.widget_categories ul li a:hover{
color:#fff;/*ホバー時のメインカテゴリーの文字色*/
}

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

 

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

.widget.widget_categories ul li .children li a:hover {
color:#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の調整方法は記述しますが

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

それほど需要はないと思いますので^^;

 

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

 

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

.widget.widget_categories ul li a {
background-color: #fff;
border:solid 1px #22c4d6;
color:#5d5d5d;
}

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

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

 

アイコンの色を変えたい

 

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

.widget.widget_categories ul li a::before {
content: "\f15c";
font-family: "Font Awesome 5 Free";
font-size: 1.5rem;
color: #22c4d6;
}

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

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

 

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

ぜひあなたも取り入れて

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

 

カテゴリーのカスタマイズに関しては、コピペだけで完結するので

分からないことはないと思いますが

 

万が一設定で分からないことがありましたら

お気軽にご相談ください。

「ここあ」に問い合わせをする

 

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?