[Cocoon] カスタマイズ用CSS classリスト

「cssファイルを一から読むの面倒くさい」
「Cocoonカスタマイズさえできればいいしcssがっつり勉強する気ないし」

そんな方のお役にたちそうな、Cocoonでよく使うであろうクラス指定リストです。
備忘録を兼ねて随時追記していきます。

ページ指定

/* 固定ページ設定 */
.page

/* 固定ページ - Homeのみ */
.home .page

/* 特定ページ */
.post-**  /* ※「**」部分には、特定ページのIDが入る*/

ページ指定しなければ、全ページに適用されます。

非表示にしたい系クラス

class記述

/* カテゴリーラベル */ 
.cat-label

/* カテゴリーラベル - エントリーカードのみ */ 
.entry-card .cat-label

/* ブログカード下部URL */
.internal-blogcard-footer /*内部ブログカードのみ*/
.blogcard-footer /*全部*/

/* 本文内 */
.sns-share  /*SNSシェアボタン*/
.sns-follow  /*SNSフォローボタン*/
.date-tags  /*投稿日と更新日*/
.post-date /*投稿日*/
.author-info  /*投稿者名*/

/* パンくずリストアイコン(Font Awesome 4) */
.breadcrumb .fa-home  /*ホームアイコン*/
.breadcrumb .fa-folder  /*フォルダアイコン(カテゴリー)*/
.breadcrumb .fa-file-o  /*ファイルアイコン(記事タイトル)*/

/* パンくずリストアイコン(Font Awesome 5) */
.breadcrumb .fa-home  /*ホームアイコン*/
.breadcrumb .fa-folder  /*フォルダアイコン(カテゴリー)*/
.breadcrumb .fa-file  /*ファイルアイコン(記事タイトル)*/

非表示にするcss記述

{ display: none; }

組み合わせ例

.page .date-tags { display: none; }

「固定ページ」の「投稿日と更新日」を「非表示」

---

.home .page .sns-share,  /*SNSシェアボタン*/
.home .page .sns-follow,  /*SNSフォローボタン*/
.home .page .date-tags,  /*投稿日と更新日*/
.home .page .author-info /*投稿者名*/
    { display: none; }

「ホームに指定した固定ページ」の「SNSシェアボタン～投稿者名」を「非表示」

(非表示系)コードコピペで使える詳細ページ

[Cocoon] 投稿日や更新日を消したりする方法

WordPressの新しいエディタ Gutenberg(グーテンベルク) では各投稿ごとに、更新日を消したり任意の日付にする、「更新日の変更」エリアがありますが、一括で非表示したい場合や、投稿日の非表示設定は、css記述で行います。Word...

168labo.com

[Cocoon] エントリーカードの左上のやつを消す方法

WordPressの国産テーマCocoonには、ブログカードが標準で搭載されています。 こんなやつ(これはエントリーカード) URLを貼りつければ、何でもブログカードになりますが、サイト内部の記事一覧「エントリーカード」では、左部画像(アイ...

168labo.com

[Cocoon] パンくずリストのアイコンを非表示にする方法

WordPressの神テーマCocoonのパンくずリストでは、各タイトルの前にデフォルトでアイコンが表示されます。 パンくずリストとは Webサイト内の現在位置を、ツリー状にわかりやすく表示したものです。リンクで各項目に飛べるのが一般的。英...

168labo.com

見た目整える系

class記述

/* 見出し */
.article h2
.article h3

h4～以下同文。「 .article 」つけないと駄目だった。

---

/* ブログカード枠 */
.a-wrap .blogcard 

---

/* ラベル */
.blogcard-type .blogcard-label { background-color :#000; }

※Cocoon設定でサイトキーカラーを白にした時にラベルが真っ白になってしまうのを解決するやつ。
色指定は任意のものを。

---

/*目次*/
.article .toc
.toc-title /*目次タイトル*/
.toc-content /*目次中身全体*/
.toc-content ol li
.toc-content ul li

目次全体と中身全体はdiv、本体はリスト(ol,ul,li)
「 .article 」つけないと反映されない部分がある。 たぶん「 .article 」つけるとサイトキーカラーを越えられる。たぶん。

---

/* 汎用ブロック - タブ見出しボックス */
.tab-caption-box
.tab-caption-box-label /*ラベル*/
.tab-caption-box-content /*中身*/

(見た目整える系) コードコピペで使える詳細ページ

プレートっぽい見出しを作るCSS

見出し(h2タグ)がかわいくできたので、作り方をご紹介します。ビスでとめたプレートっぽいイメージです。見えるかな？ ※ある日突然見た目が変わったので少し書き直しました。/2021.10.11 見出し(h2) ↑こんなやつです。CSSを使って...

168labo.com

[Cocoon] 目次をカスタマイズする (カード風)

Cocoonの設定でできる目次のカスタマイズと、CSSを使ったアレンジをご紹介します。 設定画面でできるカスタム 設定する場所 Cocoon設定 ＞ 目次タブ 設定でできること 設定画面(上半分) 目次の表示目次の表示非表示 表示ページ「投...

168labo.com

[Cocoon] フッターのカスタマイズCSSと、CSSが効かない時の対処法 2021

ワードプレスのアップデートか何かで、これまで使えていたClass指定が反映されなくなっている様です。2021年10月時点での対処法をご紹介します。「How toブログ見てコピペしたcssが効かない」「ある日突然反映されなくなった」「!ipo...

168labo.com

見た目整えるのに便利なやつ

16進数のカラーコード(#ffffff みたいなやつ)をWeb上でさくっと生成できる便利なツール。
アドビ公式(無料)です。

カラーコードめんどくさい人におすすめの色名で指定する方法