【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】

「ブログをカスタマイズしたい」

「おしゃれにカスタマイズする方法は？」

「CSSを使わずにカスタマイズできる？」

この記事では、そんな方に向けて、CocoonでCSS編集せずにカスタマイズする方法を解説します。

この記事を読めば、あなたも簡単に

• CSS編集せずにカスタマイズ

できるようになります。

私もコードを入力しないとおしゃれにカスタマイズできないと思っていたのですが、

本記事の方法でCSS編集せず、おしゃれなブログを作ることができました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

当ブログのカスタマイズ例【CSS不使用】

WordPressテーマ「Cocoon」は、独自のカスタマイズ機能が事前に備わっており、CSS編集なしでおしゃれなブログを作成できます。

Cocoonにはテーマ独自のカスタマイズ機能も充実しています。これにより、CSSやPHPなどを必要とせずに、オリジナリティーのあるサイトを作成することも可能です。

引用：Cocoon公式サイト-Cocoon独自のテーマ変更機能のまとめ

当ブログでもCocoonを利用しており、CSS編集せずにカスタマイズしています。

上部リンク先のページのように、CSS編集せずおしゃれにカスタマイズする方法をこれから紹介します。

Cocoonでサイト全体のカスタマイズ【CSS不使用】

Cocoonでサイト全体をCSS編集なしでおしゃれにカスタマイズする方法です。下記10つの項目を紹介します。

ページ全体の色をカスタマイズ

Cocoonでページ全体の色をカスタマイズしていきます。

WordPress管理画面を開き、Cocoon設定⇒全体の順にクリックします。

• ページ内の背景色を変えたい場合…「サイト背景色」で変更します

• ページ外のテキスト・背景色を変えたい場合…「キーカラー」で変更します

カスタマイズする項目が変更できない場合は、スキン制御されているのが原因です。

変更をまとめて保存をクリックしましょう。

これでページ全体の色をカスタマイズできます。

設定したい色が見つからない場合は、設定したい色のカラーコードを入力すると見つかります。

カラーコードで設定したい色を見つける方法は、下の記事を参考にしてください。

「サイト型トップページ」

サイト型トップページとは、目的や好みに合わせて記事やコンテンツを配置したり、おしゃれにデザインしたトップページのことです。

Cocoonでは、ブログ型トップページがデフォルトですが、サイト型トップページへかんたんにカスタマイズできます。

Cocoonでサイト型トップページの作り方については、下の記事を参考にしてください。

「スキン」

Cocoonでは、スキンを変更することでサイトのデザインをカスタマイズできます。

スキンを変更する方法は、WordPress管理画面を開き、Cocoon設定⇒スキンの順にクリックします。

スキン一覧の中から利用したいスキンを選びましょう。

変更をまとめて保存をクリックします。

これでスキンの変更ができます。

Cocoonで全スキンのデザインを見てみたいという人は、下の記事を参考にしてください。

「ヘッダー」

ヘッダーをカスタマイズすることで、サイト上部のデザインを変更したり、固定ページやカテゴリーページを設置することができます。

あなたのサイトに来たユーザーが最初に見る画面にヘッダーもあるので、

「何が書いているサイトなのか？」が一目でわかるようカスタマイズしたいですね。

Cocoonでヘッダーをカスタマイズする方法は、下の記事を参考にしてください。

「フッター」

フッターはサイト下部のことで、主にプロフィールやお問い合わせフォーム、プライバシーポリシーなどを設置する場所です。

Cocoonでフッターをカスタマイズする方法は、下の記事を参考にしてください。

「サイドバー」

もしサイドバーを表示する場合、

「トップページではこの項目を表示させよう」
「この記事にはこの項目だけ表示させよう」

など、ページごとでサイドバーに表示させる項目を選べます。

Cocoonでサイドバーをカスタマイズする方法は、下の記事を参考にしてください。

また、ページ別でサイドバーを非表示にしたい場合は、下の記事を参考にしてください。

「カテゴリー」

ヘッダー・フッターに設置するカテゴリーを決めたり、

トップページに表示する記事一覧をカテゴリー別で表示させる設定などができます。

同じジャンルの記事を見たいというユーザーが迷子にならないように、カテゴリーリンクを設置しましょう。

Cocoonでカテゴリーをカスタマイズする方法は、下の記事を参考にしてください。

「おすすめカード」

おすすめカードとは、好きな記事やその他コンテンツの画像リンクをヘッダー下に目立つよう表示できるカスタマイズ機能のことです。

おすすめカードを設置することで、読んで欲しい記事にユーザーを誘導でき、クリック率アップが期待できます。

Cocoonでおすすめカードを設定する方法は、下の記事を参考にしてください。

「アピールエリア」

アピールエリアとは、ユーザーにアピールしたい内容やコンテンツをヘッダー下に表示できるカスタマイズ機能のことです。

収益性の高い記事や読んでほしい記事がある人におすすめです。

Cocoonでアピールエリアを設置する方法は、下の記事を参考にしてください。

「ボックスメニュー」

ボックスメニューとは、テキストだけのメニューとは異なり、アイコン画像も一緒に表示できるカスタマイズメニューになります。

サイドバーやヘッダー下に設置することができ、視認性が高まります。

Cocoonでボックスメニューを設置する方法は、下の記事を参考にしてください。

Cocoonで投稿ページのカスタマイズ【CSS不使用】

Cocoonで投稿ページをCSS編集なしでおしゃれにカスタマイズする方法です。下記9つの項目を紹介します。

「見出し」

Cocoonでは見出しの

• レベル
• 色
• フォント

などをカスタマイズできます。

Cocoonで見出しをカスタマイズする方法は、下の記事を参考にしてください。

「リスト(箇条書き)」

Cocoonのリストは、

• 点

1. 数字

で箇条書きできる機能がついています。

また、以下のようなアイコンリストを使うことで、

を細かくカスタマイズできます。

Cocoonでリストをカスタマイズする方法は、下の記事を参考にしてください。

「ボックス」

Cocoonで利用できるボックスは全8種類あり、以下のように

Cocoonでボックスをカスタマイズする方法は、下の記事を参考にしてください。

「アイキャッチ画像」

アイキャッチ画像とは、ユーザーの目をひきつけるための画像で、主にサムネイルに使われます。

アイキャッチ画像を設定することで、

• ページの滞在時間が延びる
• 回遊率が上がる
• サイトがオシャレになる

などのメリットがありますよ。

Cocoonでアイキャッチ画像を設定する方法は、下の記事を参考にしてください。

「吹き出し」

吹き出しは、セリフを言うアイコンのことです。

吹き出しを使えば、

• 自分の意見や感情を伝えられたり
• オリジナルな記事に仕上がる
• 記事がおしゃれに仕上がる

などのメリットがあります。

表示位置を変えたり、スタイルを変えたりなどのカスタマイズもできますよ。

Cocoonで吹き出しの設定方法は、下の記事を参考にしてください。

「目次」

目次は、訪れた記事に何が書いてあるかを把握するため重要です。

目次があれば、

• 記事の内容が大まかに分かる
• 読みたい場所にジャンプできる

と言うメリットがあります。

目次にどのレベルの見出しまで表示させるかのカスタマイズができます。

Cocoonで目次を表示させる方法は、下の記事を参考にしてください。

「ブログカード」

ブログカードとは、別記事へ飛ぶリンクを記事タイトルや画像などもあわせて表示させる埋め込み形式のことです。

ラベルや画像を表示させたり、リンクの開き方を選んだりなどのカスタマイズができます。

Cocoonでブログカードを設定する方法は、下の記事を参考にしてください。

「ボタン」

ボタンは、内部リンクや外部リンクをボタン化させるために使います。

_{＼当ブログのトップページへ／}

ボタンリンクはカスタマイズ性が高く、

• サイズや形を変えたり
• 色を変更できたり
• ボタンを光らせたり

できます。

Cocoonでボタンをカスタマイズする方法は、下の記事を参考にしてください。

「X(Twitter)」

ブログ記事やサイドバーなどにTwitterを埋め込むことができます。

雑記ブログを始めました！

《内容》
・沖縄の美味しいグルメリポート
・WordPressテーマ「Cocoon」や「Canva」の使い方

画像を用いて、丁寧に説明しています。

▼見てみてね▼https://t.co/WXz6a9j6uu

— かめコンパス (@kamecompass) July 25, 2023

埋め込む要素は、

• 特定のツイート
• タイムライン
• フォローボタン

があります。

CocoonでTwitterを埋め込む方法は、下の記事を参考にしてください。

まとめ：CSS編集なしでおしゃれにカスタマイズしよう！

今回は、CocoonでCSS編集せずにカスタマイズする方法を紹介しました。

当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。