記事内にアフィリエイト広告を使用している場合があります。

スティンガー8

STINGER8のカテゴリーデザインをアレンジして個性的にカスタマイズ

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレス(WordPress)のウィジェットを使えば、サイドバーにカテゴリーを簡単に表示させることができます。

 

ユーザビリティ向上やSEO対策にも影響するカテゴリーですが、私が使用している無料テンプレート「STINGER8」でも簡単に表示できますが、デフォルトのデザインがどうもパッとしません。

 

カテゴリーを表示させるだけでは味気ないので、もっと独自性のある個性的なデザインにアレンジしたいと思います。

そこで今回はCSSコードだけを使って、「STINGER8」のカテゴリーをカスタマイズしていきます。

個性的にカテゴリーをデザインする

「STINGER8」に限らずワードプレスを導入している場合は、ウィジェット機能でサイドバーにカテゴリーの設置から投稿数や階層的に表示させることも可能です。

カテゴリーウィジェットの使い方」についてはこちらのリンクから確認できます。

 

デフォルトのカテゴリー

デフォルトの状態で使用した場合のカテゴリーデザインは以下のようになっています。

 

 

ここでは階層表示させていますが新規カテコリーが追加されるごとに、テキストリンクがズラッと下に並んでいく感じになります。

 

このままでは訪問されたユーザーの方に、「このブログのカテゴリーはデフォルトのままか。」というように、あまり好印象を与えることができないかもしれません。

なので他のブログとの差をつける為にも、個性を生かしたデザインにアレンジしていきましょう。

 

デザイン変更は子テーマのCSSを使用

親テーマではアップデートによってデータが上書きされてしまうので、子テーマで編集することをオススメします。

ワードプレスの管理画面左にあるメニューから、「外観」⇒『テーマの編集』をクリックして下さい。

 

 

「STINGER8 Child: スタイルシート (style.css)」に、以下のコードをコピー&ペーストして追加して下さい。

 

/*-- カテゴリーデザイン --*/
.cat-item a {/*親カテゴリー*/
    display: block;/*ブロック要素にする*/
    text-decoration: none;/*下線なし*/
    font-size: 16px;/*文字サイズ*/
    line-height: 2.2em;/*各カテゴリー間の高さ*/
    padding: 0 20px;/*左右の余白*/
    color: #24140e;/*文字色*/
    border-bottom: 2px dashed #79c06e;/*下の点線を引く*/
    margin-bottom: 2px;/*カテゴリー下の余白*/
}

.cat-item li a {/*子カテゴリー*/
    display: block;/*ブロック要素にする*/
    font-size: 13px;/*文字サイズ*/
    border-bottom: 2px dashed #79c06e;/*下の点線を引く*/
    padding: 0 30px;/*左右の余白*/
}

.cat-item a:hover {
    color: #4169e1;/*ホバー時の文字色*/
    background-color: #f5deb3;/*ホバー時の背景色*/
}

 

上記のコードをそのまま使用した場合は、以下のようなカテゴリーデザインになります。

 

 

親カテゴリーと子カテゴリーの文字サイズを別々に変更したり、下に点線の追加やカーソルホバー時の変化させるなど、色々お好みで変更できますので自分流にアレンジしてお使い下さい。

 

カテゴリーにアイコンを追加する

私的には各カテゴリー内に「フォントアイコン」も追加したかったので、幅広いアイコンを取り扱っている「FontAwesome」のものを使用します。

 

アイコンを使用する際は、以下のコードを子テーマ「style.css」に追加しましょう。

 

.cat-item a:before {/*親カテゴリのアイコン*/
    font-family: FontAwesome;/*アイコン取得先*/
    content: "\f07b";/*アイコンコード*/
    color: #008080; /*アイコン色*/
    margin-right: 5px;/*アイコンと文字の間隔*/
}

.cat-item li a:before {/*子カテゴリのアイコン*/
    font-family: FontAwesome;/*アイコン取得先*/
    content: "\f061";/*アイコンコード*/
    margin-right: 2px;/*アイコンと文字の間隔*/
}

 

アイコンコードの部分を好きなフォントアイコンのコードに変更して使用下さい。

「親」と「子」でそれぞれ別のアイコンを設定することができます。

 

 

このように表示させることができるので、アイコンがあると「親」と「子」を判別しやすくなります。

 

投稿数表示の不都合

上記カテゴリーのカスタマイズを使用した場合、投稿数を表示させるとデザインが崩れてしまう不都合が起きてしまいます。

そのまま使用すると少し不格好になってしまう為、「投稿数をリンクタグ内に収める方法」を参考に修正を行うようにして下さい。

 

これで問題なく変更したデザインを使用することができます。

以上が「STINGER8」のカテゴリーデザインのカスタマイズ方法になります。

 

「STINGER8」カテゴリーデザインまとめ

カテゴリーはデフォルトのまま使用してもSEO対策などに効果がありますが、ひと手間加えるだけでより機能性に優れたカテゴリーとなります。

 

デザインを変更することでユーザーの印象も変わってくると思いますし、その結果ブログやサイトの回遊率が上がり、検索エンジンにも評価されることに繋がります。

 

一からブログ内のデザインを変更していくのは大変なことですが、それだけ価値があるものなので少しずつアレンジを加えていきましょう。

こちらも読まれています

ABOUT ME
フリ
ブログで気になることをただひたすらに書き続けて、10ヶ月目で月間10万PV超えを達成。2018年5月から個人事業主として活動開始。今は資産運用に注力し、投資歴は5年になる。仮想通貨⇒DeFi・BCG・エアドロ案件など。BTC・ETHとNISAで積立中。自由であるために。to be free>>詳細プロフィール