【Simplicity2】カテゴリーのデザインを変更する

スポンサーリンク

【Simplicity2】カテゴリーのデザインを変更する

 

Simplicity2」のデザインカスタム、カテゴリーのデザイン変更編です。

 

毎回言っていますが、「Simplicity2」はとてもシンプルなテーマですので何かしらのデザインカスタマイズを行っていかないと他のサイトと差別化ができません。

 

今回行っていく、「カテゴリー」もとってもシンプルというかリンクの見た目まんまなのでデザインカスタマイズしてサイトを装飾してみましょう。

 

スポンサーリンク

前準備. 子カテゴリーをインデントする

前準備. 子カテゴリーをインデントする

 

今回も当然ながらCSSを用いてデザインのカスタマイズを行っていくのですが、その前にWordPressで「カテゴリーウィジェット」の編集を少しだけ行います。

 

デフォルトのカテゴリーウィジェット

こちらが、デフォルトの「カテゴリーウィジェット」ですが、「てすと1-1」は「てすと」に属しており、「子カテゴリー」といえます。

 

しかしながら、上記の画像では見ただけではそれが判別できません。

そこで、「子カテゴリーのインデント」を行います。

※インデント = 字下げ

 

やり方ですが、

 

外観→ウィジェットを選択してください。

WordPressのダッシュボードを開き「外観」→「ウィジェット」を選択してください。

 

階層を表示にチェック

 

サイドバーウィジェット」の中から「カテゴリー」を開き、階層を表示にチェックを入れてください。

チェックを入れたら「保存」を押してください。

 

この操作を行うことで「子カテゴリー」の表記が以下のようになります。

子カテゴリーがインデントされます

しっかりと「てすと1-1」がインデントされてますね。

 

これで、前準備は終了です。

 

カテゴリーのデザインを変更する

カテゴリーのデザインを変更する

 

完成イメージ

 

今回の完成イメージはこちらです。

完成イメージ

 

色はセンスの問題なので気にしないでくださいw

自分好みに変えることもできます。

 

マウスホバー時

マウスホバー時

 

マウスホバー(マウスを合わせたとき)は色が少し薄くなり、わかりやすくなってます。

 

手順

 

手順といっても、いつも通りCSSコピペするだけです。

 

まずは、「ダッシュボード」を開いてください。

 

外観→テーマの編集を選択してください

外観」→「テーマの編集」を選択してください。

 

スタイルシート(style.css)を選択してください

右側にある「スタイルシート(style.css)」を選択してください。

 

上記のコードを追加して、「ファイルを更新」を選択してください。

 

以上で完了です。

Webブラウザで確認してみてください。

更新してもデザインが変更されない場合は、「スーパーリロード」を行ってみてください。

詳しくはこちら

CSSを変更したのにサイトデザインが変わらない時の対処方法
サイトのデザインを変更したい! そんな時は、どうしますか? WordPressであれば、「テーマ」を変更すればデザインを簡単に変えることができます。 しかしながら、なかなか自分の思い通りのデ...

 

注意事項

 

今回は、先頭に「▶」をつけています。

この「▶」は、「特殊文字」といってHTMLで普通では入力できない特殊な文字を入力したいときに使用します。

 

入力の仕方は、文字を入れるのではなく「コード」を入力します。

みんなの知識 ちょっと便利帳ーしるし物[1] 目印・装飾類

こういったところに載っていますので探してみましょう。

 

「▶」は「▶」になります。

…あれ?さっきとちがう?

 

はい、CSSの「content」を使用する場合は少し勝手が違ってきます。

 

以下の手順で行ってください。

  1. 」を「」に変える。
  2. 」を「0」に変える。
  3. 」を削除する。

すると、「▶」→「\0025B6」になります。

あとは、これを「content」で追加すればOKです。

 

その他の場合は、変更せずに使用すれば大丈夫です。

 

まとめ

 

Simplicity2」の「カテゴリーのデザイン変更編」でした。

 

今回も、コピペで簡単にデザインのカスタマイズができますので、ぜひ試してみてください。

慣れてきたら、もっと自分好みにカスタマイズしてみましょう。

コメント