【動画あり】中国語コンテンツについて

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

Cocoonのセレクター①
CocoonWordPress

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

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

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

いっちゃん
いっちゃん
 

Cocoonは素敵!

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

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

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

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

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

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

記事内の見出し2

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

記事内の見出し3

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

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に追加します。

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

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

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

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

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

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

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

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

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

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

関連記事のセレクター

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

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

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

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

サイドバーウィジェット

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

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

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

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

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

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

次回もお楽しみに!

WordPressのインストール代行・カスタマイズをします!

ブログ制作に自信が無い、直し方が分からない方向けです。

いっちゃん
いっちゃん

女性の多くが「WordPressが苦手」だと言います。

事例① 「インストール」で挫折

事例② ”「頭が痛い」し難しい 

事例③ とにかく「分からない」

一見混乱しがちですが、「WordPressのインストール」をクリアするとハードルは下がります。

いっちゃんはWordPressのCocoonテーマのカスタマイズをお手伝いします。

デモサイトを見る >>


いっちゃん紹介

いっちゃん

いっちゃん
『Cocoonをカスタマイズ』

初心者向けにCocoonのカスタマイズをします。ご依頼はこちら。私の幼少期は外国語が嫌いで全く話せませんでした。しかし、多様性に慣れていた私は中国語を学び、人のご縁でシリコンバレーに滞在しました。ただいま、恋愛系中国語学習動画を有料公開中。詳細はお問い合わせ下さい!

→ プロフィール
→ お仕事のご依頼
→ Cocoonのカスタマイズ

いっちゃんをフォローする !
はなしあいて①.com
タイトルとURLをコピーしました