カテゴリーの 一覧表示と Font Awesome アイコンを表示させるCSS|ルクセリタス
カテゴリーは このサイトで書かれている記事を分類分けしたものなので
サイドバーにカテゴリーを設置するケースが多いと思います。
カテゴリーを表示させる方法は2通りあり、ウィジェット機能のカテゴリーと メニューを使用します。
2つの項目での表示のしかたと それぞれの違いについてまとめていきます。
ウィジェット機能
サイドバーに カテゴリーや 新着記事などを設置する際に利用するのがウィジェット機能です。
ルクセリタスでは ウィジェット項目と設置場所が多く 欲しい場所に簡単に各項目を設置することができます。
今回はこの項目の中にある カテゴリーとメニューの項目を使ってカテゴリーの一覧表示を設置していきます。
ウィジェット項目 – カテゴリーとメニューの違い
カテゴリーの項目を選択して サイドバーにカテゴリーを設置する場合、
投稿の項目にある カテゴリーに登録したカテゴリー名すべてが一覧表示となって簡単に設置されます。
カテゴリーでは ドロップダウンでの表示 などの選択が可能ですが、
表示が50音順になってしまうのがデメリットにもなってしまいます。
ナビゲーションメニューを利用すると 順序・階層・タイトル を自由に設定し カテゴリを表示することができるのです。
カテゴリーの作成については こちらにまとめてあります。
Luxeritas ( ルクセリタス ) カテゴリー作成のポイントと設定のしかた【WordPress】
メニュー機能で カテゴリーを作成
まず新しいメニューを作成します。 メニュー名を設定したら メニューを保存をクリック
1.メニュー項目を追加 から カテゴリーを選択します。
2.よく使うものに表示されていない場合は すべてを表示 のタブをクリックし カテゴリを表示させます。
3.設定したいカテゴリにチェックを入れて メニューに追加をクリックします。
4・Luxeritas 項目を右にずらして 副項目 にすることでWordPress 属性という風に表示できます。
リストをカスタマイズしよう!
最後に リストにアイコンやアンダーラインなどを装飾するカスタマイズ方法をご紹介します!
カスタマイズのサンプルで使用するデザインはこちらです。
ウィジェット – カテゴリーリストに アイコンを入れる
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*サイドバー親カテゴリーアイコン*/ .widget_categories li:before { font-family:
FontAwesome; content:
"\f101"; color:
#a7d28d; font-size:12px;
/*サイズ指定は無くてもOK*/ margin-right:5px; padding:
1px
0; } /*サブカテゴリーアイコン*/ .widget_categories li li:before { font-family:
FontAwesome; content:
"\f101"; color:
#e44d26; font-size:12px;
/*サイズ指定は無くてもOK*/ margin-right:8px; padding:1px
0; } /*バージョンによって追記*/ .widget_categories a{ display:inline-block; } |
ルクセリタスの 旧バージョンでは リストとアイコンがズレてしまうので inline-block
の追記が必要になります。
リストすべてにアイコンを設定
カテゴリーのリストにだけにアイコンを指定する場合は .widget_categories
を使用
カテゴリーの他に リスト表示のウィジェットすべてにアイコンを指定したい場合、すこしコードを変更します。
.widget_categories li
のセレクタ部分を #side .widget li
に変更します。
リストにアンダーラインを入れる
下線のカスタマイズは別記事にまとめています。
サイドバーのリスト一覧に下線をつける CSSカスタマイズ |ルクセリタス
まとめ
サイドバーにカテゴリー一覧を より見やすくするための メニュー機能を使った一覧作成と
リストのデザインを FontAwesome や CSSを使ってカスタマイズする方法をまとめてみました。
関連記事
Font Awesomeアイコン|投稿ページからHTMLコードでカスタマイズする方法
Font Awesomeは Webサイトの見出しやサイドバー、ページ内で使用する ...
【ルクセリタス】アイコンフォント設定と色のカスタマイズ|WordPress
Webサイトでは ホーム画面を表す家の形のアイコンだったり フォルダのアイコンや ...
番号なしリスト – ul 要素 -の CSSカスタマイズ注意点
投稿記事で使用するリストや 目次やグローバルナビなどのリストのカスタマイズにはu ...
目次デザインをカスタマイズしてみる|ルクセリタス
Webページに目次を入れるという設定は外観カスタマイズから簡単に設定できます。 ...
サイドバーで目次を表示させる方法とカスタマイズ|ルクセリタス
ルクセリタスのウィジェット機能に「目次」があります。 ページトップに目次を表示さ ...
外観カスタマイズから基本的な目次の設定|ルクセリタス
ユーザーにとって目次は Webページの見出しタイトルからどのような記事が書かれて ...
Tag