こんにちは、いっちゃんです。(@hi_icchan_jp)
今回からCocoonテーマのCSSセレクターを少しずつ記載していきます。
Cocoonテーマは高機能で、CSSセレクターが分かると編集しやすいです。そこで下記にマトメを作っていきます。

いっちゃん
Cocoonは素敵!
Cocoon固定記事タイトル、記事見出しのセレクター
Cocoon固定記事タイトル、記事見出しのセレクターです。
固定ページのタイトル、記事内の見出しのセレクター
固定ページタイトル、記事内見出しのセレクターを表示します。
投稿・固定ページタイトル
下記に投稿固定ページタイトルを貼り付けます
記事内の見出し2
下記に記事内の見出し2のカスタマイズを貼り付けます。
記事内の見出し3
下記に記事内の見出し3のカスタマイズを貼り付けます。
- h1.entry-title {
- /*投稿・固定ページの指定したいCSSを記載*/
- }
- .article h2 {
- /*投稿記事内の指定したいCSSを記載*/
- }
- .article h3 {
- /*投稿記事内の指定したいCSSを記載*/
- }
特定の固定ページを指定するには.page-id-○○をCSSに追加します。
例:特定のページのh1のタイトルのセレクターは以下のように指定。
- .page-id-○○ h1.entry-title {
- /*固定ページの指定したいCSSを記載*/
- }
※○○は投稿記事の編集画面上部URLに記載されている数字を入れます。
下記の例では赤字の部分です。
※もう一方の確認方法:管理メニュー⇒投稿一覧⇒タイトルにカーソル当てる
タイトルにカーソルを合わせると左下に表示される上記と同様のURLの赤のpost=○○○○←赤で書かれた箇所の数字を入れます。
関連記事見出しのセレクター
関連記事見出しのセレクターです。
関連記事のセレクター
- .related-entry-heading {
- /*関連記事見出しの指定したいCSSを記載*/
- }
ウィジェットのタイトルのセレクター
ウィジェットのタイトルのセレクターを表示します。
サイドバーウィジェット
- .sidebar h3 {
- /*サイドバーウィジェットの見出し指定したいCSSを記載*/
- }
今回は上記にCocoonのCSSセレクターを記載しました。
- 固定・投稿ページタイトルのCSSセレクター
- h2、h3のCSSセレクター
- 特定のページのタイトルのCSSセレクター
- 関連記事見出しのCSSセレクター
- サイドバーウィジェットのCSSセレクター
今後も少しずつまとめてCocoonのCSSセレクターの記事を増やしていきます。
ご覧いただきましてありがとうございます。