Cocoon CSSメモ サイドバーウィジェット編 HTML+CSS

スポンサーリンク

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;
}

として、間にウィジェット(上記はナビカードの場合)の種類を挟めばよい。