当ブログと運営者について
スティンガー8

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

 

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

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

 

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

 

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

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

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

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

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

 

デフォルトのカテゴリー

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

 

 

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

 

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

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

 

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

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

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

 

 

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

 

 

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

 

 

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

 

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

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

 

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

 

 

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

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

 

 

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

 

投稿数表示の不都合

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

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

 

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

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

 

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

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

 

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

 

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

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール