CSS構造のメモ。外観>テーマエディタにおいて編集する。
サイドバー
サイドバーのクラス名は、sidebar
正確な構造は container > content > content-in > sidebar となる。以下はその子に当たるウィジェットのクラス名
ウィジェット名 | クラス名(asideタグ) | 解説ページ |
検索 | widget_search | |
カテゴリー | widget_categories | |
カスタムHTML | widget_custom_html | |
タグ | widget_tag_cloud | |
[C]ナビカード | widget_navi_entries | |
[C]人気記事 | widget_popular_entries | |
[C]人気記事(カテゴリー別) | widget_popular_entries | |
全体の人気記事とクラス名は変わらない。よって、idによって判別しなければならない。それにはソースコードを見て確認する必要がある。 | ||
[C]関連記事 | widget_related_entries | |
[C]新着記事 | widget_new_entries | |
[C]目次 | widget_toc |
サイドバースクロール追従
サイドバースクロール追従はサイドバーから独立しておらず、sidebarの子である。
クラス名は、 sidebar-scroll
正確な構造は container > content > content-in > sidebar > sidebar-scroll
カード
ナビカード、人気記事などで使われるカードの共通クラス名は、widget-entry-card-title
構造としては、
container > content > content-in > sidebar > widget_navi_entries > widget-entry-cards > widget-entry-card-content > widget-entry-card-title
container > content > content-in > sidebar > widget_popular_entries > widget-entry-cards> widget-entry-card-content > widget-entry-card-title
などとなる。 要素はspan
デフォルト以外の、区切り線タイプや大きなサムネイルタイプなど全て共通。
編集する際は以下のクラス指定で十分である。
.sidebar .widget-entry-card-title{ color: #ff0000; }
特定の種類のウィジェットに適用する場合は
.sidebar .widget_nav_entries .widget-entry-card-title{ color: #ff0000; }
として、間にウィジェット(上記はナビカードの場合)の種類を挟めばよい。