【Simplicity】カテゴリーをカスタマイズする方法【まとめ】

カテゴリー(カスタマイズ)

Simplicityは、WordPressの無料テーマの1つです。

Simplicity専用の着せ替えスキンまで他サイトで製作されるようになってきました。

今回は、そんな、皆さんから愛されている日本のテーマ「Simplicity」のお話です。

Simplicityでのカテゴリーはリストで表記されているため、要素1つ1つに「フェードイン」や「フェードアウト」などの動作を取り入れると少々複雑なソースコードとなります。

今回は、CSS(スタイルシート)だけを用いた初心者向けのカスタマイズ方法で、Simplicityのカテゴリーをカスタマイズしていくことにします。

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

カテゴリー(外観)の最終的な目標

デフォルト(元々)のカテゴリーの表示では少し寂しい気がします。

従来のカテゴリー

今回は、このシンプルベース型のカテゴリーを変化させて…

未来のカテゴリー

CSS(スタイルシート)だけを用いて、上の画像のようなグラフィックに仕上げることにします。

そして、カテゴリーのそれぞれの項目に対し、「フェードイン」や「フェードアウト」といった動作をCSS(スタイルシート)だけで実装し、訪問者からのカテゴリーの操作を動的にしたいと思います。

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

カテゴリーの変数をチェックすると…

Simplicityのカテゴリーは、大まかに分けると以下の4つの要素で構成されているようです。

要素の役割
  • カテゴリータイトル(widget_title)
  • リスト全体(ul)
  • リスト内の1つ1つの要素(li)
  • リスト内の1つ1つの要素のリンク文字(a)

上記の各要素にソースコードを追加し、カスタマイズに向けた外観に整えることにします。

次は、カテゴリー項目の横幅いっぱいをリンクにし、訪問者からの使いやすさを重視したインターフェイスに仕上げる作業を行います。

1つ1つの項目全体をリンクにするには…

1つ1つのリスト項目、すなわち、カテゴリーの項目の要素全体を「リンク」にする作業を行います。

追加したソースコードは1つです。

このソースコードを追加し、<a>の要素をブロック要素にすることで、<li>全体に<a>の要素(リンク)が覆うようになります。

1つ1つのカテゴリーをクリックする範囲が縦と横に広くなるということですね。

<li>の<a>の要素に追加すると…

さて、次は、マウスオーバー時に「フェードイン」や「フェード」を行うような、他サイトでよく見られる動的なデザインに変更していくことにします。

マウスオーバー時に特殊効果を付ける

今回は、カテゴリー項目にカーソルが合わさったとき、ゆっくりと背景を表示し、マウスアウトすると、背景を元に戻すといった他サイトでよく見かける特殊効果をSimplicityのカテゴリーにスタイルシートを用いて実装していくことにします。

Transitionメソッドは要素に時間的変化を適用するCSS(スタイルシート)のプロパティです。

数値を増やすことで、フェードに掛かる時間を遅めたり、早くすることが可能となります。

transition: all 0.6s ease;は複数のプロパティを1つにしたもので正式には、

  • transition-property: background;
  • transition-duration: 0.6s;
  • transition-timing-function: ease;

上記の3つのプロパティを合わせもったソースコードです。

さて、続いて、新しい要素(hover)を追加し、マウスオーバー時の背景と位置を調整することにします。

新しく追加する要素は、

これは、<a>をホバーしたとき、すなわち、<li>の各要素をホバーしたときに起きる内容です。

この要素にホバー時のソースコードを追加して…

背景色には、#DCDCDC(灰色)を指定し、リンク文字の位置を少しだけ調整することにしました。

全体のソースコード(完成)

今回行った、カスタマイズ(カテゴリー)の完成版は以下のソースコードとなります。

カテゴリーリストのみのカスタマイズを行いましたが、カテゴリータイトルをカスタマイズしたい方は、以下の要素を上記のソースコード内に入れ、独自にカスタマイズしてください。

カテゴリータイトル:サンプル

カテゴリータイトルのカスタマイズサンプルを作成してみました。

宜しければ「コピー&ペースト」をしてお使いください。

上記のソースコードを入力すると以下の画像のようにカテゴリータイトルが出力されるはずです。

即席で作成したソースコードなので上手く表示されるかは不明です。

カテゴリータイトル

まとめ

「Javascript」「PHP」「Jquery」などのプログラムを用いて「フェード」や「フェードイン」などの特殊効果を実装する方法が一般的に使われている方法ですが、上記のように、CSS(スタイルシート)だけを使用して特殊効果を出すことも可能です。

CSS(スタイルシート)だけでカスタマイズすれば、煩わしいFTPツールでの操作は一切必要ありません。

是非、この際に、カテゴリーのスタイルをカスタマイズしてはいかがでしょうか。

【Simplicity】カテゴリーのカスタマイズサンプル【まとめ】
Simplicityのデフォルト(元々)用意されているカテゴリーの外観はシンプルです。 「この項目はリンクだよ」と言わんばかりのクリック...