Cocoonを有り難くカスタマイズさせていただいく時に「この部分は何ていうクラスだろう？」と迷うことがあったので、備忘録として収集していきます。
目次(クリックでジャンプ)
記事領域全体(2019/6/13)
記事全体に色を付けたり、影を落としたりしたい時にデベロッパーツールでクリックすると「entry-content」と「article」があって違いがよくわからなかったので調査。
結論から言うと「article」クラスをいじるとよさそうです。
「entry-content」は本文領域(緑)(カテゴリー記事は「category-page-content」)で、「article」は記事全体(赤)でした。
ただレイアウトに関しては「entry-content」や「category-page-content」にマージンやパディングが設定されていることもあるのでそちらも調整しないと思い通りになりません。
グローバルナビ(2019/7/21)
全体
当初は「menu-header」で色や影をつけていましたがブラウザの幅が広がると両脇が切れてしまっていました。最近「navi」で指定すれば良いと分かりました。
「menu-header」は幅を指定してヘッダー全体とコンテンツの幅を変化させられるようです。
ナビのアイテム
「.navi-in>ul>li」で背景色やボーダーを指定できます。
幅を文字に合わせるには、「Cocoon設定」「ヘッダー」タブの下の方「グローバルメニュー幅」内の「メニュー幅をテキストに合わせる」にチェックを入れます。
グローバルナビ文字色(2019/6/18)
「Cocoon設定」「ヘッダー」タブ内の「ヘッダー設定」「グローバルメニュー色」の「グローバルナビ文字色」で設定できますが、CSSではどこで設定するんだろう？
記事内のアイテム
記事下のカテゴリー・タグリンク
カテゴリーリンクは「cat-link」、タグリンクは「tag-link」。
色を変えたい時に「cat-link」の方は「background-color」で指定してもだめで、「background」で指定すればOKです。
タグを活用したいと思っているので、目立つようにカスタマイズしています。