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

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

還じい

内容としては、「見た目」の変更が中心になってますよ。

他の人も同じように変えたいと感じるかどうかはわかりません。

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

あと大事なことをもう１点！

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

そのため、スキンを使っている場合はCSSを追加しても記事の通りにならない可能性があることに注意してください。

還じい

スキンによっては、この記事の一部のカスタマイズ内容を既に取り込んでいるかもしれませんよ。

CSSの追加手順
スクロール
マーカー

CSSの追加手順

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

管理画面メニュー「外観」の「カスタマイズ」（①）をクリック。

「追加CSS」をクリック。

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

さきほどの追加は一番簡単な方法ですが、CSSの追加方法は他にも2つあるので、興味があれば次の記事を読んでみてください。

CocoonでCSSを追加できる3つの方法

ブログを開設して運営を進めていくと、デザインなどの見た目を変更したくなることがあります。還じいそんな時には、デザインを変えるCSSを追加すれば見た目を簡単に変更できます！この記事では、CocoonでCSSを追加できる3つの方法を詳しく解説し...

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

スクロール

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

還じい

でも、Cocoonのスクロールって一瞬なんですよね。

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

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%);
}