日本画ページが出来ました!

Cocoonの投稿・固定ページタイトル・関連記事CSSセレクター

Cocoonのセレクター①
Cocoon WordPress

こんにちは、いっちゃんです。(@hi_icchan_jp)

 

今回からCocoonテーマのCSSセレクターを少しずつ記載していきます。

 

Cocoonテーマは高機能で、CSSセレクターが分かると編集しやすいです。そこで下記にマトメを作っていきます。

 

いっちゃん
いっちゃん
 

Cocoonは素敵!

Cocoon固定記事タイトル、記事見出しのセレクター

Cocoon固定記事タイトル、記事見出しのセレクターです。

固定ページのタイトル、記事内の見出しのセレクター

固定ページタイトル、記事内見出しのセレクターを表示します。

投稿・固定ページタイトル

下記に投稿固定ページタイトルを貼り付けます

記事内の見出し2

下記に記事内の見出し2のカスタマイズを貼り付けます。

記事内の見出し3

下記に記事内の見出し3のカスタマイズを貼り付けます。

 

  1.  h1.entry-title {
  2.     /*投稿・固定ページの指定したいCSSを記載*/
  3.       }
  4.      
  5. .article h2 {
  6.         /*投稿記事内の指定したいCSSを記載*/
  7.     }
  8.      
  9. .article h3 {
  10.         /*投稿記事内の指定したいCSSを記載*/
  11.     }

 

特定の固定ページを指定するには.page-id-○○をCSSに追加します。

例:特定のページのh1のタイトルのセレクターは以下のように指定。

  1. .page-id-○○ h1.entry-title {
  2. /*固定ページの指定したいCSSを記載*/
  3. }

 

※○○は投稿記事の編集画面上部URLに記載されている数字を入れます。

下記の例では赤字の部分です。

 

(例) https://あなたのドメイン.com/wp-admin/post.php?post=7267&action=edit

 

※もう一方の確認方法:管理メニュー⇒投稿一覧⇒タイトルにカーソル当てる

タイトルにカーソルを合わせると左下に表示される上記と同様のURLの赤のpost=○○○○←赤で書かれた箇所の数字を入れます。
 

関連記事見出しのセレクター

関連記事見出しのセレクターです。

関連記事のセレクター

  1. .related-entry-heading {
  2.     /*関連記事見出しの指定したいCSSを記載*/
  3.     }

ウィジェットのタイトルのセレクター

ウィジェットのタイトルのセレクターを表示します。

サイドバーウィジェット

  1. .sidebar h3 {
  2.   /*サイドバーウィジェットの見出し指定したいCSSを記載*/
  3. }

 

今回は上記にCocoonのCSSセレクターを記載しました。

  • 固定・投稿ページタイトルのCSSセレクター
  • h2、h3のCSSセレクター
  • 特定のページのタイトルのCSSセレクター
  • 関連記事見出しのCSSセレクター
  • サイドバーウィジェットのCSSセレクター

 

今後も少しずつまとめてCocoonのCSSセレクターの記事を増やしていきます。

ご覧いただきましてありがとうございます。

タイトルとURLをコピーしました