【Simplicity】カテゴリーのカスタマイズサンプル【まとめ】

カスタマイズサンプル

Simplicityのデフォルト(元々)用意されているカテゴリーの外観はシンプルです。

「この項目はリンクだよ」と言わんばかりのクリックを誘いやすい外観。

カテゴリーの内訳を見やすい配置、まさにシンプルベース型のカテゴリーデザインです。

今回は、SimplicityのカテゴリーをCSS(スタイルシート)だけを使用し、私自身がカスタマイズしたソースサンプルを公開したいと思います。

そこで、レポ部は・・・
【Simplicity】カテゴリーのカスタマイズサンプル【まとめ】
をレポートしたいと思います。
スポンサードリンク

元々のカテゴリーデザイン

以下のデザインがWordPress(Simplicity)のカテゴリーのスタイルとなります。

従来のカテゴリー

シンプルですが、訪問者から分かりやすいデザインです。

今回は、管理人が作成した「カスタマイズサンプル」を幾つか用意しました。

宜しければ、各ソースコードを「コピー&ペースト」し、ご自身のWebサイトにお役立てください。

Wanted!!
今回のカスタマイズ(カテゴリー)は、「投稿数」「階層」を表示しない場合のカスタマイズ方法です。「投稿数」「階層」を表示をしてしまうとスタイルが崩れてしまうのでおすすめできません。

スタンダード

スタンダードでは、カテゴリーの項目をマウスオーバー時にはゆっくりと背景色がフェードし、マウスアウト時には元々のスタイルに戻るといった動作をスタイルシートのみを用いて実装しています。

カテゴリータイトルのカスタマイズは行なっていません。

元々のカテゴリーデザインにアクション性を加えたカテゴリーモデルと解釈していただいて結構です。

変化・追加させたソースコード(要素)は以下の3つです。

スタンダード
未来のカテゴリー

ソースコード(スタンダード)

オーガニック

スタンダードと同じアクション性を持ったカテゴリーモデルです。

カテゴリータイトルを装飾し、Webフォントをカテゴリーの外観に組み込んでみました。

オーガニックでは、ネイバーセレクタ(隣接セレクタ)を使用し、カテゴリーリストの下線が点線とダブらないように設定しています。

Before/Afterメソッドを用い、タイトル、リスト名の前/後にWebフォント、または、縦線を実装することで、カテゴリーとリスト名を訪問者にハッキリと伝わるようにしたつもりです(笑)

変化・追加させたソースコード(要素)は以下の8つです。

オーガニック
スタンダード(改)

カスタマイズサンプル(オーガニック)が使用されているWebサイト【ゼロ画】

ソースコード(オーガニック)

ミリオンバス

オーガニックの1つ1つのリストをマウスオーバーしたときの動作では背景色を変化させただけでした。

ミリオンバスでは、マウスオーバーしたときの特殊効果をそのままに、背景色の変更と、訪問者の視野をマウスオーバーしたカテゴリーに注目させるために違う種類のWebフォント(矢印)へと切り替えると共にカテゴリーの強調性を伝わるようにフォント(文字)を太くしています。

カテゴリーのタイトル(右端)にはWebフォントを取り付け、自分の気に入ったウェブフォントをカテゴリーのタイトルに入れることで、他カテゴリーとの独立化/区別化を目的としています。

変化・追加させたソースコード(要素)は以下の10つです。

ミリオンバス
ミリオンバス

ソースコード(ミリオンバス)

まとめ

いかがでしょうか。

今回は、Simplicityで使える「3つのカテゴリーデザイン」をレポートしました。

私が運営している他サイト(ゼロ画)でカスタマイズサンプル(動作)のチェック済みです。

ただ、お使いのバージョンによっては動かない可能性もあります。

参考程度にソースコードを「コピー&ペースト」をして使用してください。