Cocoonの見出しデザインをカスタマイズしてみた｜初心者でも一気に見やすくなった方法

見出しのデザインを変えるだけで、ブログの印象はかなり変わります。

でも「CSS」と聞くと、なんだか難しそうで身構えてしまいますよね。

正直に言うと、僕はCSSをほとんど触っていません。やったのは、Cocoonのスキンを変えただけ。それでも見出しは一気に見やすくなりました。

この記事では、初心者の僕でもできた「スキンで変える方法」と、もう一歩こだわりたい人向けの「CSSで変える方法」を、順番にまとめていきます。

結論｜見出しデザインは「CSS」と「スキン」の違いさえ分かれば簡単

結論から言うと、初心者はまず「スキン」、こだわりたくなったら「CSS」。この順番がいちばん失敗しません。

Cocoonは標準機能（スキン）だけでもデザインを変えられます。細かく調整したいときだけCSSを使う、と考えればOKです。

	スキン	CSS
難易度	かんたん（クリックだけ）	少し難しい
自由度	低め（用意された中から選ぶ）	高い（自由に変えられる）
おすすめ	初心者	こだわりたい人

ちなみに見出しは「デザイン」だけでなく「構成（順番）」も大事です。そちらは関連記事のブログ記事構成の作り方でまとめています。

まず知っておきたい｜Cocoonで見出しデザインを変える2つの方法

方法① スキン設定でデザインを変える

いちばん簡単な方法です。Cocoonに用意されたデザイン（スキン）から好きなものを選ぶだけ。

1. WordPressの管理画面を開く
2. 「Cocoon設定」→「スキン」タブを開く
3. 好きなスキンを選ぶ
4. 「変更をまとめて保存」をクリック

これだけで、見出しやボタンのデザインがまとめて変わります。

方法② CSSで自由にカスタマイズする

「ここだけ色を変えたい」「もっと細かく調整したい」というときはCSSの出番。自由度が高いぶん、少しだけコードを書きます。

書く場所は Cocoon設定 →（または「外観」→「カスタマイズ」）→ 追加CSS です。

CSS初心者が最初に覚えるのは2つだけ

CSSは「どこを・どう変えるか」を指定するだけ。難しく考えなくて大丈夫です。

① CSSの基本的な書き方

基本の形はこれだけです。

.article h2 {
  color: #ff0000;   /* 文字色を赤に */
}

.article h2＝「記事内の見出し2」、color＝「文字色」、#ff0000＝「赤」。つまり「見出し2の文字を赤にする」という意味になります。

② CSSの「セレクタ」の調べ方

「どこを変えるか（セレクタ）」は、Chromeの検証ツールで調べられます。

1. 変えたい見出しを右クリックする
2. 「検証」をクリックする
3. 表示されたコードで class 名を確認する

見出し2なら .article h2、見出し3なら .article h3 が基本です。

実際に見出しデザインをCSSで変えてみる

やり方はシンプル。見た目を決めて、1つずつ変えるだけです。

※以下はコピペで使えるサンプルです。色やサイズはあなたのブログに合わせて変えてください。

背景色を変える

.article h2 {
  background: #eaf4ff;
}

文字色を変える

.article h2 {
  color: #333333;
}

文字サイズを変える

.article h2 {
  font-size: 24px;
}

線（種類・太さ）を変える

.article h2 {
  border-left: 5px solid #4a90d9;
  border-bottom: 1px solid #4a90d9;
}

余白を調整する

.article h2 {
  padding: 0.6em 0.8em;
}

全部まとめると、こんな感じになります。

.article h2 {
  background: #eaf4ff;
  color: #333333;
  font-size: 24px;
  border-left: 5px solid #4a90d9;
  border-bottom: none;
  padding: 0.6em 0.8em;
}

最初に background や border を一度リセット（none）してから組み立てると、スキンの装飾と混ざらずキレイに仕上がります。

【実体験】僕は「スキンを変えただけ」で見出しが一気に見やすくなった

ここからは僕の正直な話です。

Cocoonは標準のデザインのままでも記事は書けますが、見出しはどこか素っ気ない印象でした。

でも、ブログの雰囲気に合うスキン（僕はSILKを使っています）に変えただけで、見出しも含めて「なんだかそれっぽい」見た目になったんです。

CSSは触っていません。それでも、自分で記事を読み返したときの「見やすさ」が変わったのは実感できました。

色合いが見出しの形が、僕的にはサイトに合っているなと感じています。

CSSが効かない…！そんなときに確認すること

CSSが効かない原因は、ほとんどが「書き間違い」か「スキンの上書き」です。

① 誤字・脱字がないか確認する

カッコ { } やセミコロン ; が1つ抜けるだけでCSSは効かなくなります。まずはここを確認。

② コピペではなく手入力してみる

コピペだと、見えない余計な文字が混ざることがあります。効かないときは手で打ち直すと直る場合も。

③ 余計なスペースを消す

全角スペースが混ざっていないか、プロパティの前後に変なスペースがないかチェックします。

④ それでもダメなら !important を付ける

他の指定に負けているときは、値のうしろに !important を付けると優先されます。

.article h2 {
  color: #333333 !important;
}

スキンを使うとCSSが効かないことがある

じつは、スキンがあなたのCSSを「上書き」している場合があります。

スキン制御とは？

スキン制御とは、スキンの制作者が「ここは変えないでね」とロックをかけている機能のことです。これが原因で、自分のCSSが効かないことがあります。

スキン制御を解除する方法

解除するには、使っているスキンを子テーマにコピーして、該当する行を削除します。ただし不具合のリスクがあり、初心者にはおすすめしません。

まずは前述の !important で対応するのが安全です。子テーマの編集でつまずいたときは、関連記事のWordPress子テーマが反映されない原因も参考にしてください。

初心者におすすめのCocoonスキン5選

「全部見る」と疲れてしまうので、シンプルで使いやすいものに絞って紹介します。

① SILK（シルク）

僕がいま使っているスキン。シンプルで上品な雰囲気で、ジャンルを選ばず使いやすいです。

② NAGI（ナギ）

色数を抑えた無地系のシンプルスキン。キーカラーを設定して、自分好みの色に調整しやすいです。

③ Season（シーズン）

装飾が少なめで表示も軽め。どんなジャンルでも浮かない、万能タイプのシンプルスキンです。

④ grayish（グレイッシュ）

グレー基調の落ち着いたデザイン。読みやすさ重視の人にぴったりです。

⑤ Natural（ナチュラル）

やわらかい雰囲気のシンプルスキン。セルフケアや暮らし系のブログにも合います。

全107種類以上のスキン一覧は Cocoon公式サイト で確認できます。

まとめ｜最初はスキン、そのあとCSSが一番失敗しにくい

最後にこの記事のポイントをまとめます。

• まずはスキンでまとめて変える
• 細かい部分だけCSSで調整する
• CSSが効かないときはスキン制御を疑う
• 見出しを変えるだけで、ブログはぐっと見やすくなる

僕みたいにCSSが苦手でも、スキンを変えるだけで十分それっぽくなります。まずは気軽に試してみてください。

これからブログを始める人は、副業ブログの始め方 もあわせてどうぞ。