Cocoonの投稿・固定ﾍﾟｰｼﾞﾀｲﾄﾙ・関連記事CSSｾﾚｸﾀｰ1

こんにちは､いっちゃんです｡(@hi_icchan_jp)

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

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

いっちゃん

 

Cocoonは素敵！

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

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

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

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

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

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

記事内の見出し２

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

記事内の見出し３

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

CSSに以下を追加してください。

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

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

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

CSSに以下を追加してください。

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

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

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

※もう一方の確認方法:管理ﾒﾆｭｰ⇒投稿一覧⇒タイトルにカーソル当てる

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

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

関連記事のｾﾚｸﾀｰ

CSSに以下を追加してください。

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

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

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

サイドバーウィジェット

CSSに以下を追加してください。

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

いかがでしたでしょうか？

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

• 固定･投稿ページタイトルのCSSセレクター
• ｈ２、ｈ３のCSSセレクター
• 特定のページのタイトルのCSSセレクター
• 関連記事見出しのCSSセレクター
• サイドバーｳｨｼﾞｪｯﾄのCSSセレクター

今後も少しずつまとめてCocoonのCSSｾﾚｸﾀｰの記事を増やしていきます｡

次回もお楽しみに！