見ていただきありがとうございます。ぽぽです。
Cocoonの見出しで、こんなところで止まっていませんか。
- 見出しの色を変えたい
- 見出しの形（線・帯など）を変えたい
- 設定画面のどこを探しても、見つからない
※見出しは、記事の中の大きい文字のタイトルのことです。h2が大きい見出し、h3がその中の小さい見出しです。
私も、ここで止まった側です。
スケートボードのブログはCocoonで書いています。
見出しの色と形を変えたくて、いろいろ調べました。
色は時間がかかって、形はあきらめました😇
先に答えを書いておくと、こうです。
| やりたいこと | Cocoonの設定画面で |
|---|---|
| 見出しの色を変える | |
| 見出しの形を変える | |
| サイト全体の見た目ごと変える |
ということで、設定で「できること」と「できないこと」を順に書いていきます。
- 過去の自分：Cocoonで見出しの色と形を変えたくて、形はあきらめた
- いま：SWELLでブログ4年目（スケートボードのブログはCocoonのまま）
Cocoonの設定に、見出しの項目はない
Cocoon設定の画面には、「見出しのデザイン」という項目がありません。
最新のCocoon（2.9.6.1）の中身を、公式の公開データで確かめています。
見出しの見た目にかかわる場所は、この2つだけです。
| 押す場所 | どうなるか |
|---|---|
| Cocoon設定 →「全体」タブ → キーカラー | 見出し・ヘッダー・フッターなどが、まとめて同じ色になる |
| Cocoon設定 →「スキン」タブ | サイト全体の着せ替え。見出しの色と形も一緒に変わる |
どちらも、見出しだけを変える場所ではないんですよね。
ちなみに、このぽぽブログはSWELLで書いています。
CocoonからSWELLに変えて、記事が崩れた3ヶ月の話はこちらです。
色は「キーカラー」で変わる。でも見出しだけではない
「全体」タブのキーカラーは、サイトのポイントになる色です。
選ぶと、h2の背景の色が変わります。
ただ、同じ色になるのは見出しだけではありません。
- ヘッダー（いちばん上の帯）
- メニュー
- フッター（いちばん下）
- サイドバーの見出し
- カテゴリーのラベル
見出しだけ別の色にする項目は、設定画面にはありません。
見本で比べると、こうなります。
Cocoonの公式のファイルで、手元に見本のページを作って撮りました。
形を変えるには、スキンかCSS
線にする・帯にする、といった形の項目もありません。
形を変える方法は、大きく2つです。
| やり方 | どうなるか |
|---|---|
| スキンを選ぶ | 見出しの形も色も、サイト全体と一緒に変わる |
| CSSを書き足す | 見出しだけ変えられる。ただしコードを書く |
スキンを選ぶと、見出しの形まで変わります。
ネットで調べると、CSSのコードを貼るやり方がたくさん出てきます。
私はコードを触らなかったので、形はそのまま。
ここで、あきらめました。
私のスケートボードのブログは「スキン」だった
今回あらためて、自分のブログを確かめてみます。
スケートボードのブログの見出しは、ピンクの帯です。
調べると、Cocoon公式のスキン「Simple Pink」と同じでした。
ヘッダーもメニューもピンクです。
見出しだけでなく、サイトごと着せ替えている状態ですね。
自分で書いたCSSは、ひとつもありませんでした。
「色は変えた、ほかは触っていない」という私の記憶とも合っています。
コードが怖い人に、私が言えること
Cocoonで、コードなしでできるのはこの2つです。
- キーカラーで、見出しとヘッダーをまとめて同じ色にする
- スキンを選んで、サイト全体の見た目ごと変える
それでも足りなければ、CSSに進むか、ほかのテーマを見るか。
私が選んだのは、後のほうです。
SWELLにしたら、見出しは「選ぶだけ」になった
テーマをSWELLに変えたのは、2024年1月です。
SWELLの見出しは、カスタマイズ画面で選ぶ方式です。
| 押す場所 | どうなるか |
|---|---|
| 外観 → カスタマイズ → 投稿・固定ページ → コンテンツのデザイン | 見出しのデザインを選ぶ画面が開く |
ここで、見出しを1段ずつ別々に選べます。
| 項目 | いまの私の設定 |
|---|---|
| 見出し2のデザイン | 帯 |
| 見出し3のデザイン | 2色の下線（メイン・グレー） |
| 見出し4のデザイン | 左に縦線 |
色も「見出しのキーカラー」という、見出し用の項目があります。
Cocoonで止まった「形」と「見出しだけの色」は、ここで片付きます。
正直に言うと、どう選んだかは覚えていません。
でも、いまの見出しは気に入っています。
見出しのことだけ、Cocoonと並べるとこうなります。
| やりたいこと | Cocoon （設定画面） | SWELL （設定画面） |
|---|---|---|
| 見出しの色だけ変える | × | 〇見出しのキーカラー |
| 見出しの形を変える | × | 〇帯・下線などから選ぶ |
| h2・h3・h4を別々に選ぶ | × | 〇 |
| お金 | 無料 | 17,600円（税込・買い切り） |
Cocoonは無料です。
私のスケートボードのブログも、いまもCocoonのままです。
CocoonとSWELLの画面の違いは、こちらで並べています。
SWELLを買うまで迷った話は、こちら。
ほかの場所のカスタマイズは、こちらにまとめています。
まとめ
- Cocoon設定には、見出しのデザインの項目がない
- 色は「全体」タブのキーカラーで変わるが、ヘッダーやフッターも同じ色になる
- 形を変えるなら、スキンを選ぶかCSSを書く
- 私のスケートボードのブログは、スキン「Simple Pink」の見出しだった
- SWELLは、見出し2・3・4のデザインを別々に選べる
Cocoonでも、キーカラーとスキンは今日から試せます。
まずは「全体」タブのキーカラーから、試してみてくださいね。
目次で止まった話は、こちらに書いています。
コメント