Cocoonの見た目をカスタマイズ（パディング、マーカーなど）

この記事では、個人的に「Cocoonのここを変えたいな」と思ったところをカスタマイズする方法について書いています。

あくまでも僕が変えようと思ったことを書いているので、そのあたりは理解してもらって参考程度にゆるく読んでもらえればと思います。

それともう一つ。

この記事は、スキンを適用していない「素の状態」を基準にしています。

なので、スキンを適用している状態でここに書いているCSSを追加しても、記事の通りになるとは限らないので注意してだくさい。

CSSの追加手順

カスタマイズではCSSを追加する方法がほとんどですが、以下の手順でCSSを追加します。

追加したいCSSを貼り付けて、「公開」をクリックすればCSSが適用されるようになります。

以降でCSSコードを追加する方法が書かれている場合は、この手順を参考にしてください。

アニメーション

アニメーションなど、動作に関するカスタマイズです。

スクロール

Cocoonでは目次のリンクやID指定の内部リンクをクリックすると、H2やH3などの見出しにジャンプ（スクロール）することができます。（他のテーマも同様です）

そのスクロールですが、スルスルといったアニメーションではなくて表示が切り替わっただけに見えるので、「あれ？ジャンプした？」と思ってしまうんですね。

Cocoon以外にSWELLも使っていますが、SWELLの場合はいわゆる「スムーススクロール」なので、「あぁジャンプしたな」とはっきりわかります。

ということで、Cocoonもスムースにスクロールできるようにします。

カスタマイズは、以下のCSSを追加するだけです（JavaScriptは不要）

/* スクロールをスムースに */
html {
  scroll-behavior: smooth;
}

これで、スムーズにスクロールするようになります。

装飾

文字の装飾などに関するカスタマイズです。

マーカー

Cocoonには黄、赤、青の三色のマーカーがあります。

以下の画像がマーカーですが、個人的にはちょっと太いかな～と思うんですよね。

（マーカーというより、アンダーラインとして見てますが）

そこで、三色のマーカーをちょっと細くすることにしました。

マーカーを細くするには、以下のCSSを追加します。

/* 黄、赤、青のマーカーを細く */
.marker-under {
  background: linear-gradient(transparent 75%, #ff9 75%);
}
.marker-under-red {
  background: linear-gradient(transparent 75%, #ffd0d1 75%);
}
.marker-under-blue {
  background: linear-gradient(transparent 75%, #a8dafb 75%);
}

これで、三色のマーカーが以下のように細くなります。

カラー

カラー（色）に関するカスタマイズです。

アクティブタブの色を変更

Cocoonにはタブブロックという便利なブロックがありますが、アクティブタブ（クリックされた時のタブ）の色は、デフォルトで黒となっています。

このアクティブタブの色ですが、Cocoon設定の「全体」にあるキーカラーの色を設定しても、その色になるわけではありません。

また、ブロックエディタでもアクティブタブの色は変更できないので、何もしなければ黒のままとなります。

アクティブタブの色を変更するには、以下のCSSを追加します。
※background-colorに変更したい色を指定

/* タブがアクティブになった時の色 */
.tab-label-group .tab-label.is-active {
  background-color: rgba(5, 139, 123, .8);
}

これで、アクティブタブの色が変更されます。

パディング（内部余白）

パディング（内部余白）のカスタマイズです。

グループを囲む白抜きボーダー

Cocoonでは、段落ボックスをいろんなボーダーで囲むことができます。

その中で、白抜きのボーダーだけが、グループを囲むとパディングが0になるという、謎の現象が発生するんです。（下の画像参照）

そこで、グループの時でも段落を囲んだ時と同じパディングになるように、以下のCSSを追加。

/* グループを囲むボーダーのパディングを調整 */
[class*=is-style-blank-box-] {
  padding: 1em 1.5em;
}

CSSを追加すると、いい感じのパディングにできます。

グループを囲むスタイル（ボーダー）には以下のものがありますが、なぜか白抜き（赤枠部分）だけがパディングが0になるので、注意してください。